HTML常用属性

HTML文档类型

目前常用的两种文档类型是xhtml 

xhtml 1.0 是html5之前的一个常用的版本,目前许多网站仍然使用此版本。

html文档规范

xhtml制定了文档的编写规范,html5可部分遵守,也可全部遵守,看开发要求。

1、所有的标签必须小写

2、所有的属性必须用双引号括起来

3、所有标签必须闭合

4、img必须要加alt属性(对图片的描述)

html块

1、div标签 块元素,表示一块内容,没有具体的语义。
2、span标签 行内元素,表示一行中的一小段内容,没有具体的语义。

含样式和语义的标签

1、em标签 行内元素,表示语气中的强调词
2、i标签 行内元素,原本没有语义,w3c强加了语义,表示专业词汇
3、b标签 行内元素,原本没有语义,w3c强加了语义,表示文档中的关键字或者产品名
4、strong标签 行内元素,表示非常重要的内容

语义化的标签

语义化的标签,就是在布局的时候多使用语义化的标签,搜索引擎在爬网的时候能认识这些标签,理解文档的结构,方便网站的收录。比如:h1标签是表示标题,p标签是表示段落,ul、li标签是表示列表,a标签表示链接,dl、dt、dd表示定义列表等,语义化的标签不多

有序列表ol>li*3  1. .... 2. .... 3. ...

无序列表ul>li*3 在网页上生成的列表,每条项目上会有一个小图标,这个小图标在不同浏览器上显示效果不同,所以一般会用样式去掉默认的小图标,如果需要图标,可以用样式自定义图标,从而达到在不同浏览器上显示的效果相同,实际开发中一般用这种

定义列表通常用于术语的定义。<dl>标签表示列表的整体。<dt>标签定义术语的题目。<dd>标签是术语的解释。一个<dl>中可以有多个题目和解释

table常用属性:

1、border 定义表格的边框

2、cellpadding 定义单元格内内容与边框的距离

3、cellspacing 定义单元格与单元格之间的距离

4、align 设置单元格中内容的水平对齐方式,设置值有:left | center | right

5、valign 设置单元格中内容的垂直对齐方式 top | middle | bottom

6、colspan 设置单元格水平合并

7、rowspan 设置单元格垂直合并

传统布局:

传统的布局方式就是使用table来做整体页面的布局,布局的技巧归纳为如下几点:

1、定义表格宽高,将border、cellpadding、cellspacing全部设置为0

2、单元格里面嵌套表格

3、单元格中的元素和嵌套的表格用align和valign设置对齐方式

4、通过属性或者css样式设置单元格中元素的样式

html表单

表单用于搜集不同类型的用户输入,表单由不同类型的标签组成,相关标签及属性用法如下:

1、<form>标签 定义整体的表单区域

  • action属性 定义表单数据提交地址
  • method属性 定义表单提交的方式,一般有“get”方式和“post”方式

2、<label>标签 为表单元素定义文字标注

3、<input>标签 定义通用的表单元素

  • type属性
    • type="text" 定义单行文本输入框
    • type="password" 定义密码输入框
    • type="radio" 定义单选框
    • type="checkbox" 定义复选框
    • type="file" 定义上传文件
    • type="submit" 定义提交按钮
    • type="reset" 定义重置按钮
    • type="button" 定义一个普通按钮
  • value属性 定义表单元素的值
  • name属性 定义表单元素的名称,此名称是提交数据时的键名

4、<textarea>标签 定义多行文本输入框

5、<select>标签 定义下拉表单元素

6、<option>标签 与<select>标签配合,定义下拉表单元素中的选项

<iframe>标签会创建包含另外一个html文件的内联框架(即行内框架),src属性来定义另一个html文件的引用地址,frameborder属性定义边框,scrolling属性定义是否有滚动条

a标签的target属性可以将链接到的页面直接显示在当前页面的iframe中

h5新增的主要语义化标签如下:

1、header 页面头部、页眉
2、nav 页面导航
3、article 一篇文章
4、section 文章中的章节
5、aside 侧边栏
6、footer 页面底部、页脚

新增类型:网址 邮箱 日期 时间 星期 数量 范围 电话 颜色 搜索

<label>网址:</label><input type="url" name="" required><br><br> 
<label>邮箱:</label><input type="email" name="" required><br><br> 
<label>日期:</label><input type="date" name=""><br><br> 
<label>时间:</label><input type="time" name=""><br><br> 
<label>星期:</label><input type="week" name=""><br><br> 
<label>数量:</label><input type="number" name=""> <br><br>
<label>范围:</label><input type="range" name=""><br><br> 
<label>电话:</label><input type="tel" name=""><br><br> 
<label>颜色:</label><input type="color" name=""><br><br> 
<label>搜索:</label><input type="search" name=""><br><br>
新增常用表单控件属性:
1、placeholder 设置文本框默认提示文字
2、autofocus 自动获得焦点

3、autocomplete 联想关键词

html5增加了audio和video标签,提供了在页面上插入音频和视频的标准方法。

audio标签 
支持格式:ogg、wav、mp3

对应属性:
1、autoplay 自动播放
2、controls 显示播放器
3、loop 循环播放
4、preload 预加载
5、muted 静音

video标签 
支持格式:ogg、mp4、webM

属性:
1、width
2、height
3、Poster

可选第三方播放器:
1、cyberplayer
2、tencentPlayer
3、youkuplayer


猜你喜欢

转载自blog.csdn.net/zczc946/article/details/80794454