目录
一、HTML语义
二、了解HTML标签
一、HTML语义
HTML 指的是超文本标记语言 (Hyper Text Markup Language) ,它是用来描述网页的一种语言
Web 标准: 结构、样式、行为
二、了解HTML标签
1.语义化标签
语义化标签在网页中HTML专门用来负责网页的结构
所以在使用html标签时,应该关注的是标签的语义,而不是它的样式
2.标签分类
(1)按闭合模式分类(单标签、双标签)
单标签:只有一个<>组成
<br />、<hr />、 <img />、 <input />、<area />、 <base />、 <link />、 <meta />
双标签:由<></>组成
<div> </div>、<p> </p>、<html> </html>、<h1> </h1>、<span> </span>等
(2)按显示模式分类
- 行内元素
(1)本身属性为 display:inline;
(2)与相邻行内元素在同一行上;
(3)对其设置宽、高、垂直方向的padding、margin值无效,但水平方向设置padding、margin值有效;
(4)默认宽度是本身内容的宽度;
(5)行内元素只能容纳文本或者其他行内元素(a特殊,链接中不可再放链接),不可在其中嵌套其他块级元素; - 块内元素
(1)本身属性为 display:block;
(2)每个块级元素独占一行,每个块级元素都会从新的一行开始,从上到下排布;
(3)可以设置宽高、内、外边距值;
(4)若不设置宽度和高度 ,则宽度默认为父级元素的宽度(100%),高度根据内容大小自动填充;
(5)块级元素大多都可以容纳行内元素(内联元素 )和其他块级元素;
- 常用HTML标签元素
基本结构标签:
<h1-h6> 标题标签</h1-h6>
<p> 段落标签</p>
格式化标签:
图像标签:<img src="图片路径">
表格标签:
<table align="center" border="1" cellpadding="0" cellspacing="0" width="" height="">
<!-- align(居中)border=1(边框)cellpadding 表格属性 -->
<tr>
<!--表格中的行 -->
<th></th>
<!--表头单元格(居中加粗显示) -->
<td></td>
<!--表格中的单元格 -->
</tr>
</table>
<!-- 跨列单元格 -->colspan
<!-- 跨行单元格 -->rowspan
列表标签:
<!-- 无序列表 -->
<ul>
<li>列表1</li>
<li>列表2</li>
</ul>
<!-- 有序列表 -->
<ol>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
</ol>
<!--自定义列表 -->
<dl>
<dt>名词1</dt>
<dd>名词解释1</dd>
<dd>名词解释2</dd>
</dl>
表单标签:
<form>表单元素
action="url地址"
target 用于设置表单元素的提交方式
<input type="">输入表单元素
value元素设定值
label
下拉表单元素:
<select>
<option selected="selected">选项一</option>
<option>选项二</option>
</select>
文本域元素:
<textarea cols="50" rows="5">文字</textarea>
</form>