HTML5笔记（文本元素、html实体、a元素、路径的写法、图片元素）

标准的文档结构

HTML: 页面、HTML文档

<!DOCTYPE html>

文档声明，告诉浏览器当前文档使用的HTML标准是HTML5

不写文档声明将导致浏览器进入怪异的渲染模式

<html lang="en">
</html>

根元素，是一个页面最多只能一个，并且该元素是所有元素的父元素或祖先元素

lang属性：language,全局属性，该元素内部使用的文字是哪一种自然语言书写而成的。
charset:指定网页内容的编码

文本元素

HTML5中支持的元素-----> HTML5元素周期表

h 标签

h1 - h6标签可定义标题。h1 定义最大的标题。h6 定义最小的标题。

p 段落

该标签是指定义段落。
p 元素会自动在其前后创建一些空白。浏览器会自动添加这些空间，您也可以在样式表中规定。

span [无语义]

span标签没有语义，仅用于设置样式。
以前某些元素在显示时会独占一行（块级元素），而某些元素不会（行级元素）到了HTML5，已经弃用这种说法。
标签被用来组合文档中的行内元素。

提示：请使用来组合行内元素，以便通过样式来格式化它们。
注释：span 没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化。

pre标签

预格式化文本元素
空白折叠：在源代码中的连续空白字符（空格、换行、列表），在页面显示的时候，会被折叠为一个空格。

例外：在pre元素中的内容不会出现空白折叠，在pre元素内部的内容，会按照源代码格式显示到页面上。
该元素通常用于在网页中显示一些代码，pre元素功能的本质：它有一个默认的css属性

显示代码时，通常外面套code元素。code元素表示代码区域。

HTML实体

实体字符， HTML Entity 实体字符通常与在页面中显示一些特殊符号

&单词
&#数字

小于符号 &lt
大于符号 &gt
空格符号 &nbsp
版权符号 &copy
&amp 指的是 & 符号本身打印

a元素

href属性

hyper reference：通常表示跳转地址

1. 跳转地址
2. 跳转某个锚点

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

    <h2 id="chapter1">章节1</h2>
    <p>Lorem ipsum dolor sit.......</p>
    <h2 id="chapter2">章节2</h2>
    <p>Lorem ipsum dolor sit.......</p>
    <h2 id="chapter3">章节3</h2>
    <p>Lorem, ipsum dolor sit......</p> 

    <a href="#">回到顶部</a>

    <body>
        <a href="锚链接.html#chapter3"> 锚链接页面的第三章</a>
    </body>

id属性：全局属性，表示元素在文档中的唯一编号
3. 功能链接

    点击后，触发某个功能
- 执行JS代码 ， javascript
     <a href="javascript:js代码"></a>
- 发送邮件, mailto:
    <a href="mailto:邮箱地址">发送邮件</a>
- 拨号, tel:
    <a href="tel:电话号码">拨打电话</a>

target属性

表示跳转窗口位置。target的取值：
_self: 在当前页面窗口打开，默认值。
_blank: 在新窗口中打开

路径的写法

站内资源: 当前网站的资源
站外资源：非当前网站的资源

绝对路径和相对路径

1.绝对路径
站外资源：绝对路径
站内资源：相对路径
绝对路径的书写格式：

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

协议名---> http 、 https 、 file
主机名---> 域名、IP地址

端口号：如果协议是http协议，默认端口号80；如果协议是https协议，默认端口号为443

例如：
http://www.renren.com:80/
https://www.baidu.com:443/

2. 相对路径
以./开头， ./表示当前资源所在的目录
可以书写 ../表示返回上一级目录
相对路径中： ./可以省略

图片元素

img 元素

image缩写，空元素
src属性：source
alt属性：当图片失效时，将使用该属性的文字替代图片

和a元素联用

    <a  href="">
        <img usemap="#solarMap" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1575347748185&di=259697fb40afd73aa2debec5bb444e2f&imgtype=jpg&src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20181026%2F725072d55959472b9d3bb86b04a53442.jpg" alt="这是一张太阳系图片">
    </a>

和map元素联用

<a target="_blank" href="">
    <img usemap="#solarMap" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1575347748185&di=259697fb40afd73aa2debec5bb444e2f&imgtype=jpg&src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20181026%2F725072d55959472b9d3bb86b04a53442.jpg" alt="这是一张太阳系图片">
</a>
<map name="solarMap">
    <area shape="circle" coords="491,425" href="https://baike.baidu.com/item/%E6%9C%A8%E6%98%9F/222105?fr=aladdin" alt="这是木星的简介" target="_blank">
    <area shape="circle" coords="512,439,56" href="https://baike.baidu.com/item/%E6%9C%A8%E6%98%9F/222105?fr=aladdin" alt="这是木星的简介">
    <area shape="rect" coords="493,45,536,133"href ="https://baike.baidu.com/item/%E6%9C%A8%E6%98%9F/222105?fr=aladdin" alt="这是木星的简介">
    <area shape="poly" coords="" href="" alt="">
</map>

map子元素：area
shape：指的是形状，矩形，多边形,圆形等等
coords：坐标，衡量坐标的时候，为了避免衡量误差，需要使用专业的衡量工具。例如：ps、pxcook等。
href：点击图片的链接地址
alt：当图片显示不出来的时候，这个区域显示什么内容。
以图片左上角为坐标原点，对于圆形，计算原点到图形圆心的距离。
对于长方形，计算原点到长方形左上角和原点到长方形的右下角的距离。
对于多边形，计算原点到各个点的距离。

和figure元素联用

指代、定义、通常用于把图片、图片标题、描述包裹起来；可以使其更具有语义化。

子元素：figcaption,可以在子元素里面写图片的标题。

<figure>
        <a href="">
            <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1575347748185&di=259697fb40afd73aa2debec5bb444e2f&imgtype=jpg&src=http://5b0988e595225.cdn.sohucs.com/images/20181026/725072d55959472b9d3bb86b04a53442.jpg" alt="">
            <figcaption>
                <h2>太阳系</h2>
            </figcaption>    
            <p>
                太阳系是以太阳为中心，和所有受到太阳的引力约束天体的集合体。包括八大行星(由离太阳从近到远的顺序:水星、金星、地球火星、木星、土星、天王星、海王星)、以及至少173颗已知的卫星、5颗已经辨认出来的矮行星和数以...
            </p>
        </a>
    </figure>