HTML
H5基础知识
-
HTML概念
HTML:超文本标记语言(Hyper Text Markup Language)。是用来描述网页的一种语言。
HTML不是一种编程语言,而是一种标记语言(markup language)。
标记语言是一套标记标签(markup tag)。 -
标签语言化
目的:
方便代码的阅读和维护;
同时让浏览器或是爬虫可以很好地解析,从而更好分析其中的内容;
使用语义化标签会具有更好的搜索引擎优化。
根据标签的语义,在合适的地方给一个最为合理的标签,让结构更清晰。
1.1 HTML标签格式
html标签是由尖括号包围的关键字,如:、、
html标签通常是成对出现,如
有些标签是单独呈现的,如:
、
、 等;
标签里面带有若干属性,也有不带的。
标签语法:
<标签名 属性1=“属性值1” 属性2=“属性值2”…>内容部分</标签名>
<标签名 属性1=“属性值1” 属性2=“属性值2”…>
HTML文档结构
:声明为html5文件,必须是html文档的第一行,在标签之前; :文档开始和结束的标记,是HTML页面的根元素; :定义文档开头部分,包含文档元(meta)数据,配置信息等,是给浏览器看的;meta标签组成:
http-equiv属性:相当于http的文件头作用,向浏览器传回一些有用的信息,正确显示网页内容,与之对应的属性值content,content中的内容是各个参数的变量值;
name属性:主要用于描述网页,与之对应的属性值为content,content中的内容主要是便于搜索引擎查找信息和分类信息用的。
2.2 body常用标签
名字 描述
<b> 内容 </b>
<strong> 内容 </strong> 加粗(XHTML推荐使用strong)
<i> 内容 </i>`
<em>内容<em> 斜体(XHTML推荐使用em)
<u> 内容 </u> 下划线
<s> 内容 </s>
`<del>内容</del> 删除(XHTML推荐使用del)
<p> 内容 </p> 段落标签
<h1> 内容 </h1> 作为标题使用,h1, h2…h5依据重要性递减
<div> 内容 < /div> 定义一个块级元素
<span> 内容 < /span> 定义内联(行内)元素
<img src=“图像URL”/> 插入图片
定义超链接:用于从一张页面链接到另一张页面(比如百度);
锚:用于从页面当前位置跳转至指定锚点,博客的目录经常用到(比如内容
内容
);它最重要的属性是href,指示链接的目标。所有的浏览器都支持a标签。
2.2.1 列表
无序列表
里面只能包含li,没有顺序,布局中最常用。基本语法如下:
<ul type=“desc”>
<li>第一项</li>
<li>第二项</li>
</ul>
type属性 描述
disc 实心圆点(默认值)
circle 空心圆圈
square 实心方块
none 无样式
有序列表
里面只能包含li,有顺序,使用情况较少。基本语法如下:
<ol type=“1” start=“2”> <li>第一项</li>
<li>第二项</li> </ol>
type属性 描述
1 数字列表(默认值)
A 大写字母
a 小写字母
I 大写罗马
i 小写罗马
start是从数字几开始
3.自定义列表
定义列表常用于对术语或名词进行解释和描述,里面有2表兄弟,dt和dd。基本语法如下:
<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
… …
<dt>名词2</dt>
<dd>名词2解释1</dd>
<dd>名词2解释2</dd>
… …
</dl>
table标签:定义表格;
tr标签:定义行,必须嵌套在table标签中;
td标签:定义单元格,必须嵌套在tr标签中。
2.2.2 表格
创建表格的基本标签table、tr、td,缺一不可。基本语法如下:
<table>
<tr>
<td>单元格内的文字</td>
… …
</tr>
… …
</table>
2.2.2.1 表格常用属性
属性名 作用 常用单位
border 设置表格的边框(默认值为0,无边框) 像素值(px)
cellspacing 设置单元格与单元格边框之间的空白间距 像素值
cellpadding 设置单元格内容与单元格边框之间的空白距 像素值
width 设置表格的宽度 像素值
height 设置表格的高度 像素值
align 设置表格在网页中的水平对齐方式 left、center、right
2.2.2.2 表格结构
在使用表格进行布局时,可以将表格划分为头部、主体和页脚,如下所示:
3.:用于定义表格的表头;
只需用表头标签th替代相应的单元格标签td即可。一般位于表格的一行或第一列,并且文本加粗剧中。
:用于定义表格的主体。 必须位于table标签中,一般包含网页中除头部和底部之外的其他内容。 :用于定义表格的页脚(脚注或表注)。 必须位于table标签中,与thead和tbody元素结合起来使用。总结:thead元素用于对HTML表格中的表头内容进行分组,而tbody元素用于对HTML表格中的主体内容进行分组,tfoot元素用于组合HTML表格中的表注内容。
2.2.2.3 合并单元格
合并属性:
属性名 作用
rowspan 跨行合并
colspan 跨列合并
合并顺序: 遵循先上、后下、先左、后右的顺序。
合并步骤:
确定是跨行合并还是跨列合并;
找到目标单元格,写上合并方式和要合并的单元格数量;
删除多余的单元格(删除的个数=合并的个数-1)。
2.2.3 表单标签
作用:标签用于定义表单区域,收集用户输入的数据,向服务器传输这些数据。
完整的表单通常由表单控件、提示信息、表单域3个部分构成。基本语法如下:
action属性:表单数据提交的地址;
method属性:表单发生提交操作的时候的请求方式,有get和post;
enctype属性:编码类型。
2.2.3.1 input控件
input标签是表单标签中最重要的标签。input标签是个单标签。
input标签在使用时,type、name、value这三个属性是最常用的。
type属性:规定input标签的类型;
type属性值 描述
button 生成按钮
radio 生成单选按钮
submit 生成提交按钮
text 生成文本框
file 生成浏览按钮
hidden 生成隐藏的输入字段
password 生成密码输入框
checkbox 生成复选框
image 生成图片形式的提交按钮
reset 生成重置按钮
name属性:定义input元素的名称。在进行前后端交互时,可以根据这个名称找到对应的标签,是前端和后端交互时非常重要的属性;
3.value属性:规定input元素的值,在获取表单数据时获取的就是value属性的值。
HTML5新增标签
3.1 新的语义和结构元素
属性名 描述