Html基础

---

Html基础

---

语义化

• 所有元素与展示效果无关，元素展示到页面中由CSS决定。由于浏览器带有默认的CSS样式，所以每一个元素都有本身默认的样式。
• 语义化的作用：
  1）为了搜索引擎优化
  2）为了让浏览器理解网页

文本元素

h元素

• 标题：head
• h1~~h6表示一级标题到六级标题

p元素

• 段落：paragraphs

span元素

• 没有语义，仅用于设置样式

pre 元素

• 预格式化文本元素：在 pre 元素中不会出现空白折叠，文本照原样输出

a元素

• 超链接
• href 属性：hyper reference【通常表示跳转地址】

1）普通链接

    <a href="http://baidu.com">baidu</a>

2）锚链接

    <a href="#chapter1">章节1</a>
    <a href="#chapter2">章节2</a>
    <a href="#chapter3">章节3</a>
    
    <h2 id="chapter1">章节1</h2>
    <p>zhangjiemingcheng</p>
    
    <h2 id="chapter2">章节2</h2>
    <p>zhangjiemingcheng</p>
    
    <h2 id="chapter3">章节3</h2>
    <p>zhangjiemingcheng</p>

3）功能连接

    <a href="邮箱">邮件</a>
    <a href="tel:电话号码">电话</a>

• target
  属性(全局属性)
  1）_self(默认):表示在当前页面窗口打开链接
  2）_blank:在新窗口中打开

路径的写法

• 绝对路径
  url地址：

协议名://主机名:端口号/路径
schema://host:port/path

• 相对路径

1. 以./开头,表示当前资源所在目录
2. …/表示返回上一级目录

图片元素 （img元素）

• src属性：图片位置
• alt属性：当图片加载失败时显示的文字
• 与a元素连用
• 与map元素连用：area为map的子元素（量坐标时使用专业的测量工具）

   <a href="图片链接" target="_blank">
    <img usemap="#名称"src="图片路径">
   </a>
   <map name="名称">
       <area shape="形状" coords="坐标" href="图片链接">
   </map>

• figure元素：常用于把图片、图片名称、描述包裹起来
• figcaption元素：figure的子元素

多媒体元素

• video(视频)，audio(音频)

<video src="视频路径"></video>

• 布尔属性
  autoplay(自动播放)，muted(静音)，loop(循环)

列表元素

• 有序列表

<ol>
    <li>内容1</li>
    <li>内容2</li>
    <li>内容3</li>
</ol>

• 无序列表

<ul>
    <li>内容1</li>
    <li>内容2</li>
    <li>内容3</li>
</ul>

• 定义列表

<dl>
    <dt>标题1</dt>
    <dd>定义1</dd>
    <dt>标题2</dt>
    <dd>定义2</dd>
</dl>

容器元素

• div元素：无语义
• 语义化容器元素
  1.header元素：通常用于表示文章的头部或页头
  2.article元素：通常表示文章
  3.footer元素：通常表示页脚或文章的尾部
  4.section元素：通常用于表示文章的章节
  5.aside元素：通常用于表示侧边栏

元素包含关系

• 容器元素可以包含任何元素
• a元素几乎可以包含任何元素
• 标题元素和段落元素不能相互嵌套，并且不能包含容器元素