HTML&CSS精华知识点——高级标签

HTML高级标签

一、实体字符
1、实体字符通常用于显示页面中一些特殊符号，实体字符表现得两种形式

• &单词
• &#数字
  2、常见的实体字符
  
  二、高级标签
  1、<pre></pre>：预格式化文本元素，在pre元素中的内容不会出现空白折叠，在pre元素内部出现的内容，会按照源代码显到页面上，那么什么叫空白折叠呢，空白折叠就是：在源代码中的连续空白字符（空格、换行、制表），在页面显示时，会被折叠成一个空格

2、<br>:单标签，回车文本
3、<hr>:单标签，水平线
三、列表元素
1、有序列表

<ol>
<li></li>
<li></li>
<li></li>
</ol>

有序列表标签，默认在网页中会以1.2.3往下排，但在 ol 后边加上 type=“1/a/A/i/I ”，他就会以指定的排序方式往下排，在 ol 后边加上 reversed=“reversed”，则以倒序排列，在 ol 后边加上 start=“2”，则以第二个往下排，引号里可以只写数字，
写数字几，则从第几个开始往下排。
2、无序列表

<ul>
<li></li>
<li></li>
<li></li>
</ul>

无序列表标签，默认前边为小黑点，即属性为 type=“disc”，小方块为 type=“square”，小圆圈为 type=“circle”
3、定义列表

<dl>
	<dt>HTML</dt>
	<dd>解释内容</dd>
	<dt>HTML</dt>
	<dd>解释内容</dd>
</dl>

四、a标签
9.a 标签的作用：
（1）超链接： <a href=“http://” target="_blank"></a>,

• href属性
  通常表示跳转地址,跳转地址或者跳转到某个锚点锚链接
• target属性
  target：_self(当前页面打开)、_blank(在新窗口中打开) a 标签里可以放任何东西
  （2）锚点，例如：

<div id=“demo1”></div>
<div id=“demo2”></div>
<a href=“#demo1”>find demo1</a>
<a href=“#demo2”>find demo2</a>

当两个 div 在一个页面中时， a 标签可以起到一个目录的作用，点击 a 标签，跳转到对应的位置。
（3）打电话，例如： <a href=“tel:123132321328” >给XXX打电话 </a >
（4）发邮件： <a href=“mailto:邮箱地址” >给XXX发邮件 </a >
（5） 协议限定符：例如： <a href=“javascript:while(1){alert(‘emmmmm!’)}” >点我</a >， 你这么写的话他就会强制运行里边的 js 代码。
五、多媒体元素
1、<video></video>:视频元素

<video controls>
  <source src="myVideo.mp4" type="video/mp4">
  <source src="myVideo.webm" type="video/webm">
  <p>你的浏览器不支持H5标签</p>
</video>

上面为一种兼容写法，是针对浏览器不支持此元素时候的降级处理，浏览器并不是都支持相同的视频格式，所以你可以在 <source> 元素里提供多个视频源，然后浏览器将会使用它所支持的第一个源。

下面说一说支持的属性：

• autoplay属性：自动播放属性
• muted属性：静音播放
• loop：循环播放

【扩展】：某些属性只有两种状态：第一种写法不写属性值，第二种为取值为属性名，这种属性为布尔属性
2、<audio></audio>:音频元素

<audio controls>
  <source src="myaudio.mp4" type="audio/mp3">
  <source src="myaudio.webm" type="audio/webm">
  <p>你的浏览器不支持H5标签</p>
</audio>

同理上面为一种兼容写法，是针对浏览器不支持此元素时候的降级处理，浏览器并不是都支持相同的音频格式，所以你可以在 <source> 元素里提供多个音频源，然后浏览器将会使用它所支持的第一个源。

下面说一说支持的属性：

• autoplay属性：自动播放属性
• muted属性：静音播放
• loop：循环播放
  3、<img> 图片元素
  <img src=“ ” alt=“” title=“”/> 单标签：图片标签
  属性
• src ：里边放图片路径，分为网上的 URL（超链接）、本地绝对路径（需要把地址写全）、本地相对路径（必须 html 文件和图片文件在同一目录下 …/返回上一层）
• alt： 图片占位符，当图片地址发生错误时展示文字信息（只有出错的时候会展示）
• title： 图片提示符，鼠标移到图片上时，出现提示内容
• 【扩展】路径
  1）、路径的写法
  站内资源：当前网站的资源（相对路径）
  站外资源：非当前网站的资源（绝对路径）
  绝对路径：协议名：//主机名：端口号/path
  - 协议名：http、https、file
  - 主机名：域名、IP地址
  - 端口号：
  - 路径：
  当跳转目标和当前页面的协议相同时，可以省略协议
  相对路径：以./开头，./表示当前资源所在的目录，…/表示返回上一级目录 ，./可以省略
  六、表单元素
  (1)form 表单：
  <form method=“get/post” action=“http//:www.baidu.com/123.php”></form>
  属性
• method=“get/post”为发送数据的方式，
• action 后面跟对象（发送给谁），单纯只有 form 表单自己并不能干什么，必须配合以下组件一起使用：
  (2) <input type=“text” name=“username” value="请输入 xx">：输入框
  (3)<input type=“password” name=“password” value="请输入 xx">：密码框，
  属性
• value=“”为占位符。
  (4)<input type=“submit” value=“”>：登录框， value 后面跟框里的内容，默认为提交， 要想数据提交成功，就必须有数据名和数据值，例如上边的两个表单，数据名就是 name 里的（username/password），数据值就是你输入进去的，否则提交失败。
  (5)<input type=“radio” name=“aaa” value=“bbb”>：单选框， 要想实现单选，一个选择题里的 name 值必须相同，这里的 name 里为数据名，
  属性
• value 里的为数据值。
  (6)<input type=“checkbox” name=“aaa” value=“bbb”>：复选框，和单选框写法相同， 规则也是一样的。
  注意：要想实现默认被选中，则需要在 input 后边加上 checked=“checked”（单选复选均可）
  (7)下拉列表：

<select name="" >
<option></option>
<option></option>
</select>

这个里边的数据名是 name 里边的， 数据值是 option 标签里边的，但是你如果在 option标签里加上 value=“”，则数据值就是 value 里边的
七、注释
<!—注释 -->
作用： 注释,调错。 快捷键 ctrl+?