HTML5学习笔记-常用标记

概念性小知识点

• 语义化：根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析
• 双标记：<标签名></标签名>
• 单标记：<标签名/>

---

常用的HTML标签

• 标题标签 ：h1 h2 h3 h4 h5 h6

  语义化标签 双标记
  Tips:请仅仅把标题标签用于标题文本。不要仅仅为了产生粗体文本而使用它们。请使用其它标签或 CSS 代替。

	<h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>

效果图：

---

• 段落标签 p

语义化标签 双标记

	<p>段落元素由 p 标签定义。</p> 

效果图：

---

• 格式化标签

标签名	作用	是否语义化	单双标记
em	让文本倾斜	是	双标记
i	让文本倾斜	否	双标记
br	换行	是	单标记
strong	加粗	是	双标记
b	加粗	否	双标记

	<p>
	    <em>em标签让文本倾斜</em>
	    <br/> <!--换行标记-->
	    <strong>strong标签让文本加粗</strong>
	    <br/> <!--换行标记-->
	    <i>i标签让文本倾斜</i>
	    <br/> <!--换行标记-->
	    <b>b标签让文本加粗</b>
  </p> 

效果图：

---

• 图片标签 img

  语义化标签 双标记
  标签有两个必需的属性：src 属性 和 alt 属性。 此外常见的还有title，width，height 等属性。

属性	作用
src	定义显示图像的 URL，可以是相对路径，绝对路径或者http的URL等
alt	定义图像的替代文本，若网页无法加载图片，则会用该属性定义的文本展示
title	主题，鼠标悬浮图片上显示的文字
width	设置图像的宽度
height	定义图像的高度

	<img src="../img/cat.jpg" title="我是一只猫" alt="猜猜我是谁"
			 width="100" ,height="100" />
  	<img src="" title="我是一只猫" alt="猜猜我是谁" width="100" ,height="100" />

效果图：（鼠标悬浮在图片上会将title属性的内容展示出来，截图截不出来）

---

• 列表标签

语义化标签 双标记

列表类型	上级标签	下级标签	标签样例
有序列表	ol	li	<ol><li></li><ol>
无序列表	ul	li	<ul><li></li><ul>
自定义列表	dl	dt	<dl><dt></dt><dd></dd></dl>
自定义列表	dt	dd	展示效果的时可见dt是dd的行标签

	<!-- 无序列表 -->
    <ul type="cycle"> <!-- type="cycle" 将展示的圆圈改成实心展示，即可通过定义不同的type来改变列表的标记格式 -->
        <li>北京</li>
        <ul>
            <li>海淀区</li>
            <li>朝阳区</li>
        </ul>
        <li>上海</li>
        <li>广州</li>
        <li>深圳</li>
    </ul>
    <!-- 有序列表 -->
    <ol>
        <li>html</li>
        <li>css</li>
        <li>js</li>
    </ol>
    <!-- 自定义列表 -->
    <dl>
        <dt>自定义1</dt>
        <dd>11</dd>
        <dd>11</dd>
        <dt>自定义2</dt>
        <dd>22</dd>
        <dd>22</dd>
        <dt>自定义3</dt>
        <dd>33</dd>
        <dd>33</dd>
    </dl>

效果图：

---

• 超链接标签

语义化标签 双标记

常见属性	作用
href	定义连接的目标
target	定义被链接的目标在何处显示

target常用值	作用
_blank	在新窗口中打开被链接文档
_parent	在父框架集中打开被链接文档
_self	默认。在相同的框架中打开被链接文档
_top	在整个窗口中打开被链接文档
framename	在指定的框架中打开被链接文档

	<a href="http://www.baidu.com" target="_blank">点我进行搜索</a>

效果图：（点击后会跳转到一个加载百度首页的新网页）

---

• 表格标签

  布局 展示数据

标签名	描述
table	定义一个表格
caption	定义表格的标题
thead	定义表格的表头，可不加
tbody	定义表格主体，可不加
tfoot	定义表格的表尾，可不加
tr	定义表格的一行，tr中包含多个td或者th
td	定义表格的单元格，多个单元格组成一行，默认样式水平垂直居左显示
th	定义表头单元格，默认样式让内容加粗居中

表格属性名称	作用
border	单元格之间的分隔线粗细
width	宽
heigth	高
cellspacing	单元格间距
cellpadding	单元格内容与边框距离
align	居中/居左/居右

单元格属性名称	作用
width	宽
heigth	高
align	居中/居左/居右（水平）
valign	居上/居中/居下 （垂直）
rowspan	单元格垂直方向占多少行，例如设置rowspan=“2”,则该单元格会同时占据所在行和下一行的同列单元格
colspan	单元格水平向占多少行，例如设置colspan=“2”,则该单元格会同时占据所在行当前单元格和右边单元格

	<table border="1">
    <caption>信息表格</caption>
    <thead>
      <tr>
        <th>first</th>
        <th>second</th>
        <th>third</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1-1</td>
        <td>1-2</td>
        <td>1-3</td>
      </tr>
      <tr>
        <td rowspan="2">2-1</td>
        <td>2-2</td>
        <td>2-3</td>
      </tr>
      <tr>
        <td>3-2</td>
        <td>3-3</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td>last</td>
        <td>over</td>
      </tr>
    </tfoot>
  </table>

  <table border="1">
    <caption>信息表格</caption>
    <tr>
      <th>first</th>
      <th>second</th>
      <th>third</th>
    </tr>
    <tr>
      <td>1-1</td>
      <td>1-2</td>
      <td>1-3</td>
    </tr>
    <tr>
      <td>2-1</td>
      <td>2-2</td>
      <td>2-3</td>
    </tr>
    <tr>
      <td>3-1</td>
      <td>3-2</td>
      <td>3-3</td>
    </tr>
    <tr>
      <td>last</td>
      <td colspan="2">over</td>
    </tr>
  </table>

效果图：

---

• 表单标签

form标签常用于收集数据,数据交互
input标签常用于用户输入数据

input标签类型	作用
text	定义单行的输入字段，用户可在其中输入文本。默认宽度为 20 个字符
button	定义可点击按钮
checkbox	定义复选框
file	定义输入字段和 "浏览"按钮，供文件上传
hidden	定义隐藏的输入字段
image	定义图像形式的提交按钮
password	定义密码字段。该字段中的字符被掩码
radio	定义单选按钮
reset	定义重置按钮,重置按钮会清除表单中的所有数据
submit	定义提交按钮。提交按钮会把表单数据发送到服务器

常见标签属性	作用
name	表示表单元素名称，以后想携带数据到后台，需要设置name
value	初始值
checked /checked=“checked” / checked=“true”	表示是否被选中
selected	下拉列表选项是否选中
readonly	只读
disabled	不能被操作，而且不能被提交
maxlength	输入框最大长度
action	form表单提交动作

	<form action="###">
    <p>用户名 <input type="text" name="username" ></p>
    <p>密 码  <input type="password" name="password" id=""></p>
    <p>性别 <input type="radio" name="sex" id="" >男
             <input type="radio" name="sex" id="" >女
    </p>
    <p>
        擅长领域
        <!-- 数组 -->
        <input type="checkbox" name="major" id="">前端
        <input type="checkbox" name="major" id="" checked>后端
        <input type="checkbox" name="major" id="">数据库
        <input type="checkbox" name="major" id="">运维
    </p>
    <p>
        <select name="city" id="">
            <option value="bj">北京</option>
            <option value="nj" selected>南京</option>
            <option value="sh">上海</option>
        </select>
    </p>

    <p >
        <textarea name="words" id="" cols="30" rows="10">理由</textarea>
    </p>

    <p>
        <input type="file" name="file" id="">请上传文件
    </p>

    <p>
        <input type="hidden" name="hiddenDate">
    </p>

    <p>
        <input type="button" value="普通按钮"> 
        <input type="submit" value="提交按钮"> 
    </p>
    <p>
        <input type="email" name="email" id="">邮箱
        <!-- 会校验@符号 -->
    </p>
    <p>
        <input type="datetime" name="date" id="">日期
    </p>
    <p>
        <input type="image" src="../img/cat.jpg" alt="" width="100px" height="100px">
    </p>
</form>

效果图：

---

• 表单标签

标签名称	单双标签	描述
div	双标签	该标签用于做网页布局
span	双标签	对局部范围的修饰
pre	双标签	根据内容来换行
s	双标签	删除线
del	双标签	删除线

	 <div>
	    头部
	</div>
	
	<div>主题</div>
	
	<div>尾部 <span style="color: red;">2020-07-21</span></div>
	
	<pre>
	    1
	    2
	    3
	    4
	</pre>
	
	<s>$1200</s>
	<del>$1200</del>

效果图：

---

使用语义化标签的好处

• 增强代码可读性
• 有利于团队协作
• 用户体验