HTML基础-02

<header>网页头部              <hgroup>一个标题组

<main>网页主体                 <article>网页中的一块内容

<footer>网页底部               <section>一个区块

<nav>导航                          <aside>辅助信息

以上均为块元素，独占一行。

<q>短引用                      <blockquote>长引用

标题与段落

标题：h1-h6等级（从小到大），默认加粗，具有换行符，不能嵌套

　　h1+h2+h3：并行显示                 h1>h2>h3：嵌套显示

　　h1{标题}*10+tab键=创建10个<h1>标题</h1>

　　h1{$}*10+tab键=1,2,3.....10个标签

段落：<p>...</p>

字符实体

有些东西在浏览器中打不开，需要使用字符实体

&nbsp； 空格

&emsp;  全角空格

&copy;    版权符合

&yen;      人民币符号￥

&gt;        大于号>

&lt;          小于号<

快捷符号

+：标签并行关系

*：创建多个标签，div*5+tap

{}:设置内容

（）：对内部的内容，（tr>td*4）*5

[]:设置属性，div[id=demo class]

@:设置$符号的起始位置

$:设置起始位置，div{$@4}*5+tap键=4,5,6,7,8

文本修饰标签

强调：<strong>  </strong>(加粗)

　　　<em>      </em>(斜体)

<i>  </i>：斜体；<b>   </b>：加粗

区别：1.写法和展示效果有区别，一个加粗，一个斜体

　　　2.strong的强调性更强，em稍弱

上标/下标：^上标 /////_下标

删除文本，插入文本：<del>  </del>/////<ins>  </ins>

　　　　　　　　　　两者配合使用

图片标签和属性

<img src="引入图片地址" alt="当图片加载失败时，显示的提示文字" title=“ 提示文字（鼠标放在图片上出现的提示）”

图片格式：

　　　　jpg(jpeg):支持的颜色丰富，不支持透明效果，适合显示图片

　　　　GIF：支持的颜色较少，支持简单透明，支持动图

　　　　png:支持颜色丰富，支持复杂透明

　　　　webp:google专门为页面设计一种图片格式，支持颜色丰富、支持复杂透明、支持动图，并且占用内存特别小，集各种优点，兼容性差

　　　　通过base64编码的图片（背景图片必须快速出现），base64可以将图片转换成字符串，直接在网页中使用。

注意：效果一致，用小的；效果不一致，用效果好的；

音频标签

<aduio controls autoplay src='  '>   </aduio>

controls:用来设置用户是否控制音频播放 ；  没有属性值，允许用户播放就加（有音频），不允许就不加（无音频）

autoplay：设置音乐是否自动播放，默认不会

例：<aduio controls autoplay loop(循环播放）>

　　　　对不起，浏览器不支持此标签

　　　　<source src='#'>

　　 </aduio>

视频标签

<video controls src='#' width=' '>  </video>

<embed width=' 'height=' 'src=' 'type='video/mp4'>

超链接

用于引入文件的地址路径，相对路径，绝对路径

<a href=' # '>  </a>

target:改变链接的打开方式

　　　　_self：在当前页面打开

　　　　_blank：新窗口打开（慎用）

　　<base target='_blank'>:改变标签的默认行为

锚点

给标签设置name或id属性，通过<a href='#'>链接锚地am，链接到当前页面中的指定位置，或其他页面的指定位置。

例：当前页面内锚点：

　　　　<h1 id='top'>顶部</h1>

　　　　<a href='#top’>返回顶部</a>

　　其他页面：

　　　　跳转<a href='./地址#middle'>进入另一个页面的中间位置</a>

　　　　中间位置设置锚点：<p  id=‘middle’>

列表

无序列表：<ul>  </ul>，无先后之分；列表项：<li>  </li>

ul/li必须同时出现，不能单独书写。嵌套一个/多个li，ul只能放li标签，并不能放其他内容

li：type属性修改：disc:默认实心圆；

　　　　　　　　circle:空心圆；

　　　　　　　　square:实心方块；

有序列表：<ol>  </ol>  <li>  </li>

li：type属性设置项目符号

　　　　　　　　A大写英文字母

　　　　　　　　a小写英文字母

　　　　　　　　1阿拉伯数字

　　　　　　　　I大写罗马数字

　　　　　　　　i小写罗马数字

　　start:设置列表符号从第几个开始排列，属性值只能是阿拉伯数字

　　reversed：设置列表符号的倒序，会会出现负号。

例：

<ol type=’A’start=’3’reversed>

　　<li>

　　　　ddwws

　　</li>

</ol>

定义列表

给文本添加定义列表语义

dl:定义列表  只能嵌套（一个、多个）dd/dt，两者为同一级标签，dd是dt的解释、定义、说明

　　dt:定义标题  容器级  　　dd:定义描述  容器级，跟在dt后面，解释dt

例：<dl>

<dt>速度</dt>

<dd>速度就是路程除以时间</dd>

</dl>

---