初识HTML

 1.HTML

         HTML是一种标记语言，用于构造页面的超文本标记语言。“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。HTML的具有简易性、可拓展性、平台无关性、通用性等特点，HTML文件的后缀名是.html或.htm

 2.语法

注释

        <!--注释内容-->

        记录编程思路，解释说明

元素

  单标签元素:

<meta /> 、<img />、<br/>

  双标签元素:

<div></div>
<p></p>

属性

        核心属性：绝大多数标签都具有的属性。

title：描述信息

id：唯一标识

class：标识一类元素

style 样式

字符实体

块级元素

    特点：

• 独占一行空间

• 默认宽度为100%

• 高度由子元素或内容决定

• 可以通过css指定其宽度

    元素：html、body、div、p、h1~h6、ul->li、ol->li、dl->dd/dt、header、footer、nav、article、section、aside、address...

  建议：不要将块级元素嵌套在行内元素中。

 行内元素

    特点：

• 与其他行内元素共享一行空间

• 宽高由自身决定

• 由于不用来搭建网页结构，所以也无需通过css指定其宽度

• 行内元素中不可以嵌套块元素

  元素：span、a、img、strong、b、i、em、sub、sup...

 3.基础标签的使用

h标签 标题标签

        h1~h6 有六级标题标签 ，h1的最重要，h1的重要性仅仅次于title，搜索引擎检索完title会立即查看h1中的内容

<h1>h1标签</h1>

p标签 段落标签

        独占一行，并且段与段之间会有一个间距

<p>p标签中的文字，会独占一行，并且段与段之间会有一个间距</p>

 br标签

        br标签 表示换行标签

 hr标签

        hr标签 可以在页面中生成一个分割线 

字符实体

空格   
  <  &lt;
  >  &gt;
  “  &quot;
  &  &amp;
  ‘  &apos;

img标签

<img src="图片的url或本地路径地址" alt="" width="200px" height="200px" title="">

src:设置一个图片的路径（绝对路径和相对路径，最好使用相对路径）

alt:可以用来设置在图片不能显示的时，对图片的描述 img标签的其他属性

width:设置图片的宽

height:设置图片的高

title：用于告诉浏览器，鼠标悬停的时候，需要弹出的描述框中显示什么内容。

 注意：

1.  px 像素，相对长度单位，使用广泛。
2. 未设置img的宽高时，图片会按照默认的样式显示
3. 为避免图片失真，通常只设置宽度或者高度中的一个，另外一个会等比例调整。
4. 一般除了自适应的页面，不建议设置width和height。
5. img标签不会独占一行

 a标签

        a标签控制页面与页面之间的跳转

<a href="https://www.baidu.com" target="_blank" title="百度">百度一下</a>

 target 属性:

 使用 Target 属性，你可以定义被链接的文档在何处显示。

 _self:用于当前的选项卡中进行跳转，也就是不新建页面跳转，默认就是_self

_blank:用于在新的选项卡中进行跳转，也就是新建页面跳转

注意：

1. a标签必须有一个href属性，指定需要跳转的目标界面
2. a标签内可以是文本也可以是一幅图像，点击这些内容来跳转到新的文档或者当前文档中的某个部分。

 mailto链接

        mailto链接是一种html链接，能够设置你电脑中邮件的默认发送信息。

 使用方式：

<a href="mailto:name@email.com">Email</a>

 锚点

<a href="#center">跳转</a>
<br>
<br>
<br>
<p id="center">中部</p>
<br>

         通过a标签跳转到指定的位置,

        1.给目标位置的标签添加一个id属性

        2.告诉a标签你需要跳转到的目标标签的id

 em

        意为强调，突出文章重点

strong

        意为强调

b

        加粗

i

        斜体

u

        下划线

div

div是一个无语义的标签，就是一个纯粹的块元素，并且不会为它里边的元素设置任何的默认样式，div元素主要用来进行页面基本结构的搭建

<div class="header"></div>
<div class="content"></div>
<div class="footer"></div>

span

        span没有任何的语义，span标签专门用来选中文字，然后为文字来设置样式

 video(H5新增)

        <video> 是 HTML 5 中的新标签

        <video> 标签的作用是在 HTML 页面中嵌入视频元素

格式：

<video src=""></video>

src:告诉video标签需要播放的视频地址
autoplay:用于告诉video标签是否需要自动播放视频
controls:用于告诉video标签是否需要控制条
poster:用于告诉video标签视频没有播放之前显示的占位图片
loop:一般用于做广告视频，用于告诉video标签视频播放完毕之后是否需要循环播放
muted:静音
width/height: 和img标签中的相同

 由于视频数据非常非常的重要, 所以五大浏览器厂商都不愿意支持别人的视频格式, 所以导致了没有一种视频格式是所有浏览器都支持的，为了解决浏览器适配问题，所以推出了第二个video标签的格式 。

<video>
    <source src="" type=""></source>
    <source src="" type=""></source>
</video>

audio(H5新增)

 播放音频

格式：

<audio src=""></audio>
<audio>
    <source src="" type="">
</audio>

audio标签的使用和video标签的使用基本一样, video中能够使用的属性在audio标签中大部分都能够使用, 并且功能都一样（除了height/width/poster）

 HTML5新增语义化标签

header

 <header>是一种具有引导和导航作用的结构元素，通常用来放置整个页面或页面内的一个内容区块的标题，但也可以包含搜索表单或logo。

nav

<nav>是一个可以用作页面导航的链接组，其中导航元素链接到其他页面或当前页面的其他部分。

article

<article>代表文档，页面或应用程序中独立的，完整的，可以独自被外部引用的内容，也可以嵌套使用。可以是一篇博客或者报刊中的文章，一篇论坛帖子，一段用户评论或者独立的插件，或其他任和独立的内容。

section

<section>作为Html文档独立的功能。

aside

<aside>元素用来表示当前页面或文章的附属信息部分，它可以包含当前页面或主要内容相关的引用，侧边栏，广告，导航条，以及其他类型的有别于主要内容的部分。

footer

<footer>元素作为其上层父级内容区块或是一个根区块的脚注。footer通常包括其相关区块的脚注信息，如作者，相关阅读连接以及版权信息等。与header类似，一个页面中也未限定footer元素的个数。

address

 <address>元素用来在文档中呈现联系信息，包括文档作者或文档维护者名字，他们的网站链接，电子邮箱，地址，联系电话，以及跟文档相关的联系人的所有联系信息。

details

details元素是一种用于标识该元素内部的子元素可以被展开,收缩显示的元素。details元素内并不仅限于放置文字，也可以放置表单,插件或对于一个统计图提供的详细数据表格。

open属性

当该属性值为true时，该元素内部的子元素应该被展开显示；当该属性的值为false时，其内部的子元 素应该被收缩起来不显示。默认值为false。

summary子元素

summary元素从属于details，用鼠标单击summary元素中的内容文字时，details元素中的其他所有从 属元素将会展开或收缩。如果details元素内没有summary元素，浏览器会提供默认文字(详细信息)以供 单击。