HTML语义化标签
一、基础标签
1.1标题标签
<h1> 我是一级标题 </h1>
标签语义:作为标题使用,并且依据重要性递减。
特点:
- 加了标题的文字会变的加粗,字号也会依次变大。
- 一个标题独占一行。
1.2段落和换行标签
在 HTML 中,一个段落中的文字会从左到右依次排列,直到浏览器窗口的右端,然后才自动换行。如果希望
某段文本强制换行显示,就需要使用换行标签
。
特点:
是个单标签。
标签只是简单地开始新的一行,跟段落不一样,段落之间会插入一些垂直的间距。
1.3文本格式化标签
在网页中,有时需要为文字设置粗体、斜体 或下划线等效果,这时就需要用到 HTML 中的文本格式化标签,使
文字以特殊的方式显示。
标签语义: 突出重要性, 比普通文字更重要.
我是<strong>加粗</strong>的文字
我是<b>加粗</b>的文字
我是<em>倾斜</em>的文字
我是<i>倾斜</i>的文字
我是<del>删除线</del>的文字
我是<s>删除线</s>的文字
我是<ins>下划线</ins>的文字
我是<u>下划线</u>的文字
1.4
和
标签
和
是没有语义的,它们就是一个盒子,用来装内容的。
<div> 这是头部 </div>
<span> 今日价格 </span>
特点:
-
标签用来布局,但是现在一行只能放一个。 大盒子
- 标签用来布局,一行上可以多个 。小盒子
1.5图像标签和路径
在 HTML 标签中, 标签用于定义 HTML 页面中的图像。
src 是标签的必须属性,它用于指定图像文件的路径和文件名。
图像标签属性注意点:
① 图像标签可以拥有多个属性,必须写在标签名的后面。
② 属性之间不分先后顺序,标签名与属性、属性与属性之间均以空格分开。
③ 属性采取键值对的格式,即 key=“value" 的格式,属性 =“属性值”。
1.6超链接标签
- 链接的语法格式
<a href="跳转目标" target="目标窗口的弹出方式"> 文本或图像 </a>
1.7综合案例
二、标签
2.1表格标签
2.1.1基本语法
<table>
<tr>
<td>单元格内的文字</td>
...
</tr>
...
</table>
提示:
-
是用于定义表格的标签。
- 标签用于定义表格中的行,必须嵌套在
标签中。
- 用于定义表格中的单元格,必须嵌套在标签中。
- 字母 td 指表格数据(table data),即数据单元格的内容。
2.1.2表头单元格标签
<table>
<tr>
<th>姓名</th>
...
</tr>
...
</table>
2.1.3案例
2.1.4表格结构标签
- :用于定义表格的头部。 内部必须拥有 标签。 一般是位于第一行。
- :用于定义表格的主体,主要用于放数据本体 。
- 以上标签都是放在
标签中。
2.1.5合并单元格
跨行合并:rowspan=“合并单元格的个数”
跨列合并:colspan=“合并单元格的个数”
2.1.6表格属性
2.2.列表标签
2.2.1 无序列表
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
...
</ul>
- 无序列表的各个列表项之间没有顺序级别之分,是并列的。
-
- ,直接在
- 与
- 之间相当于一个容器,可以容纳所有元素。
- 无序列表会带有自己的样式属性,但在实际使用时,我们会使用 CSS 来设置。
2.2.2有序列表
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
...
</ol>
-
- ,直接在
- 与
- 之间相当于一个容器,可以容纳所有元素。
- 有序列表会带有自己样式属性,但在实际使用时,我们会使用 CSS 来设置。
2.2.3自定义列表
<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
</dl>
-
- 。
-
和
- 个数没有限制,经常是一个
对应多个- 。
2.2.4列表总结
2.3表单标签
<form action=“url地址” method=“提交方式” name=“表单域名称">
各种表单元素控件
</form>
2.3.1 表单元素
<input type="属性值" />
标签为单标签
type 属性设置不同的属性值用来指定不同的控件类型
2.3.2 元素
<input type="radio" name="sex" value="男" checked="checked" />男
<input type="text" value=“请输入用户名”>
2.3.3
<label for="sex">男</label> <input type="radio" name="sex" id="sex" />
2.3.4 表单元素
<select> <option>选项1</option> <option>选项2</option> <option>选项3</option> ... </select>
2.4综合案例
<h4>青春不常在,抓紧谈恋爱</h4>
<table width="600" >
<!-- 第一行 -->
<tr>
<td>性别:</td>
<td>
<input type="radio" name="sex" id="nan"> <label for="nan"> <img src="images/man.jpg" > 男 </label>
<input type="radio" name="sex" id="nv"> <label for="nv"><img src="images/women.jpg" > 女</label>
</td>
</tr>
<!-- 第二行 -->
<tr>
<td>生日:</td>
<td>
<select>
<option>--请选择年份--</option>
<option>2001</option>
<option>2002</option>
<option>2003</option>
</select>
<select>
<option>--请选择月份--</option>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<select>
<option>--请选择日--</option>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</td>
</tr>
<!-- 第三行 -->
<tr>
<td>所在地区</td>
<td><input type="text" value="北京思密达"></td>
</tr>
<!-- 第四行 -->
<tr>
<td>婚姻状况:</td>
<td>
<input type="radio" name="marry" checked="checked">未婚 <input type="radio" name="marry"> 已婚 <input type="radio" name="marry"> 离婚
</td>
</tr>
<!-- 第五行 -->
<tr>
<td>学历:</td>
<td><input type="text" value="博士后"></td>
</tr>
<!-- 第六行 -->
<tr>
<td>喜欢的类型:</td>
<td>
<input type="checkbox" name="love" > 妩媚的
<input type="checkbox" name="love" > 可爱的
<input type="checkbox" name="love" > 小鲜肉
<input type="checkbox" name="love" > 老腊肉
<input type="checkbox" name="love" checked="checked"> 都喜欢
</td>
</tr>
<!-- 第七行 -->
<tr>
<td>个人介绍</td>
<td>
<textarea>个人简介</textarea>
</td>
</tr>
<!-- 第八行 -->
<tr>
<td></td>
<td>
<input type="submit" value="免费注册" >
</td>
</tr>
<tr>
<td></td>
<td>
<input type="checkbox" checked="checked"> 我同意注册条款和会员加入标准
</td>
</tr>
<tr>
<td></td>
<td>
<a href="#" > 我是会员,立即登录</a>
</td>
</tr>
<tr>
<td></td>
<td>
<h5>我承诺</h5>
<ul>
<li>年满18岁、单身</li>
<li>抱着严肃的态度</li>
<li>真诚寻找另一半</li>
</ul>
</td>
</tr>
</table>