• HTML网页设计


    HTML网页设计

    属性值一般用" "括起来,且必须使用英文双引号

    是文档的头部信息,说明文档的基本情况,如文档的标题等,其内容不会显示在网页中。此标签对之间可使用等描述HTML文档相关信息的标签对

    标签中常用的属性:

    bgcolor:设置网页背景颜色;
    text:设置文档中文本颜色
    bacjground:设置网页的背景图片

    1、常用的单标签


    换行

    制作水平线
    图像和动画标签
    页面一秒刷新一次

    例:1、



    align对齐属性,center居中,left左对齐(默认),right右对齐;color颜色属性;size字体大小属性,其属性值为5px;

    2、常用的双标签

    黑体标签
    斜体标签
    #=1,2,3,4,5,6,定义了6级标题,字体大小递减

    段落标签:align属性指定对齐方式
    用来定义html文档或文章的拥有者的联系信息,可以包括手机电话、联系地址、电子邮箱、微信号等联系信息
      有序列表标签
        无序列表标签
          1. 标签内使用,形成列表项
            超链接

            3、列表标签

            (1)有序列表标签

              格式如下:

              <!---->>
              <ol type="序号类型">
              	<li>……</li>
              	<li>……</li>
              	……
              </ol>
              
              • 1
              • 2
              • 3
              • 4
              • 5
              • 6

              属性type指定列表项前项目符号的样式,取值如下:“1”:编号为阿拉伯数字(默认);“a”:小写英文字母;“A”:大写英文字母;“i”:小写罗马数字;“I”:大写罗马数字;
              (2)无序列表标签

                格式如下:

                <!---->>
                <ul type="序号类型">
                	<li>……</li>
                	<li>……</li>
                	……
                </ol>
                
                • 1
                • 2
                • 3
                • 4
                • 5
                • 6

                属性type指定列表前项目符号的样式,取值为:disc:实心圆点(默认);circle:空心圆点;square:实心方块;

                4、超链接标签

                格式:超链接名称或图片
                属性href用于指定连接的目标(另一个网页的路径)。
                属性target设置单击超链接时打开网页的目标框架,可以选择_blank(新建窗口),_parent(父框架),_self(在同一窗口中打开,是默认设置值)和_top(整页)等目标框架

                5、图像和动画标签

                格式:
                属性src:指定图像的路径,分为绝对路径和相对路径;

                绝对路径:

                .表示当前文件所在的目录
                ..表示当前文件所在的上一级目录
                文件名表示当前文件所在目录文件,相当于./文件名,./可以省略

                绝对路径

                正确格式:http://ip:prot/工程名/资源路径
                错误格式:盘符:/目录/文件名

                属性height:图片高度;属性width:图片宽度;属性border:设置图像边框;属性alt(或title):当图片显示不出来是用需要替代的文本

                图像和动画标签可以组合使用例如:

                <a href="">
                	<img src=""width=""height=""alt="">
                </a>
                
                • 1
                • 2
                • 3

                6、Html5中音频的插入

                <audio src="地址",autoplay="autoplay",controls="controls",controls="controls",loop="loop">`音频`</audio>
                
                • 1

                autoplay:音频在就绪后马上播放;controls:显示控制面板(启动,中止等按钮);loop:循环播放

                7、定时刷新或跳转

                (1)定时刷新语法:
                该语句表示页面每隔一秒刷新一次,属性content的值代表间隔的时间。
                (2)定时自动跳转语法:
                该语句表示页面3秒后自动跳转到搜狐页面
                (1)和(2)一般放在标签中

                8、表格

                表格由行、列、单元格组成,可以很好地控制页面布局,固定文本或图像的输出,还可以任意进行背景和前景颜色的设置。
                (基本语法)

                	<table>
                		<caption>列表标题</caption>
                		<tr><th>列名一</th><th>列名二</th></tr>
                		<tr><td>数据二</td><td>数据二</td></tr>
                	</table>
                
                • 1
                • 2
                • 3
                • 4
                • 5

                属性border设置单元格边框(0无1有);width:设置宽度;height:设置高度;align:在table标签中表示设置表格相对于页面的对齐方式,在td标签中表示单元格文本的对齐方式;valign:是属性中单元格内容的对齐方式(top:顶端对齐;middle:中间对齐;bottom:底端对齐)

                colspan:设置跨列;rowspan:设置跨行;cellpadding:设置单元格边框与内容之间的距离;bgcolor设置表格背景颜色,也可设为某行或某个单元格颜色;background:设置表格背景图像
                注意特别注意:一定放在

                中,

                9、HTML表单标签与表单设计

                基本语法form name="表单名称"method="提交方法"actoin="提交服务器的地址">……

                <input name="输入域名称"type="类域名"value="输入域的值">
                
                • 1

                主要有6个属性:type、name、size、value、maxlength、check。其中name和type是必选的两个属性。那么属性的值是响应程序(form标签中的action属性指定,只要发给服务器必须带上name标签)的变量名。type的格式和含义如下:

                一定要放在
                input type="text"是文本输入框value设置默认显示内容
                input type="passwork"是密码输入框value设置默认显示内容,Maxlength设置最多能输入几位密码
                input type="radio"是单选框name属性可以进行分组,checked=“checked”表示默认选中
                input type="checkbox"是复选框checked="checked"表示默认选中
                input type="reset"是重置按钮value属性修改按钮上的文本
                input type="submit"是提交按钮value属性修改按钮上的文本
                input type="button"是按钮value属性修改按钮上的文本
                input type="file"是文件上传域
                input type="hidden"是隐藏域
                input type="select"是下拉列表框option是下拉列表框中的选项,selected="selected"表示默认选中
                input type="textarea"表示多行文本输入框rows属性设置可以显示几行的高度,cols属性可以设置每行可以显示几个字符宽度

                form和table标签可以联用,是表单更整洁

                用户注册

                <form>
                	<table align="center">
                		……
                	</table>
                </form>
                
                • 1
                • 2
                • 3
                • 4
                • 5
            1. 相关阅读:
              vue2旧项目迁移到vite开发,提升编译效率
              JS基础--强制类型转换(易错点,自用)
              python爬取每日天气情况
              windows下mysql中binlog日志分析和数据恢复
              使用docker compose快速搭建spark集群
              Java练习 day2(LeetCode简单题15道)
              基于AvaSpe 2048测定物体的光谱曲线
              优化用户体验:解决element中el-tabs组件切换闪屏问题
              LeetCode算法题解(回溯)|39. 组合总和、40. 组合总和 II、131. 分割回文串
              Python编程——for循环基础语法、range语句以及一些案例
            2. 原文地址:https://blog.csdn.net/m0_61482505/article/details/130071346