html入门

一、概念

1.1 超级文本

超文本是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本。

1.2 标记

<div>hello world</div>

div标记“hello world”为一个块级元素的内容

1.3 语言

标记语言：html、xml
编程语言：
- java、c、python（强类型编程语言）
- js、php（弱类型编程语言）

二、本质

html本质是一个在互联网上传递信息的载体的协议，这个协议规定了我们如何定义网页，程序员根据这个协议编写网页代码，浏览器根据这个协议解析程序员编写的代码。

三、结构

<!DOCTYPE html>
    <html>
           <head>
                <meta>
                <title></title>
            </head>
            <body>
            </body>
    </html>

<!DOCTYPE html> 表示⽂档类型声明，说明该⽂档为Html5⽂档，告知浏览器以何种方式渲染文档。
<html> 表示html⽂件的根标签，所有的html标签应该位于html标签内部
<head> 表示html的头部，head内部标签主要⽤于设置或者导⼊外部⽂件，⼀般不直接显示在浏览器视⼝中，常⽤的⼦标签为 meta 、title、link、script，分别表示元信息设定、⽂档标题、css、js
<body> 表示html的体部，其内部主要放⽹⻚内容，其内容会显示到浏览器视⼝中

四、语法

4.1 注释

 html有且只有这一种注释方式

4.2 元素

按标签个数
- 单标签元素
- 双标签元素
按元素性质
- 块元素
- 行内元素
按元素功能

4.3 属性

<u>属性名不区分大小写，属性值区分大小写，且可以用引号引起来</u>

核心属性
绝大多数标签都拥有的属性
自有属性
某标签特有的属性

五、单标签元素

<meta>
<br>
<hr>
<img>
<u>alt</u> 属性：图片显示错误时，在图片位置显示的文字。实质是通过文字代替图片的内容。
<u>title</u> 属性：图片正常显示时，鼠标悬停于图片上显示的文字。实质是对图片的一种注释或描述。

六、块元素

作用：搭建网页结构
特点：

独占一行空间
默认宽度占父元素的100%
高度由子元素或内容决定
可以通过css为其指定宽高

实例：

div（无意义的块元素）/html / body / h1~h6 标题 / p / ul>li / ol>li / dl>dt,dd

七、行内元素

作用：在结构中填充网页内容
特点：

与其他行内元素共享同一行的空间
宽高由自身决定
不能通过css为其指定宽高
设置浮动后可以设置宽高，即变为类似行内块级元素

实例:
span / a / video / audio / img（特殊的行内元素）

八、功能元素

8.1 table

格式：

<table>
    <caption></caption>
    <thead>
        <tr>
            <td\th></td\th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td\th></td\th>
        </tr>
    </tbody>
    <tfoot>
    </tfoot>
</table>

属性：

border / cellspacing（单元格之间的间距）/ rowspan / colspan

8.2 form

input
- 单行文本框 type=text
- 密码框 type=password
- 单选按钮 type=radio
- 复选框 type=checkbox
- 附件 type=file
select
textarea
button

8.3 iframe包含另外一个文档的内联框架

九、语义化

9.1 概念

语义化是指对文本内容的结构化（内容语义化），选择合乎语义的标签（代码语义化），便于开发人员阅读、维护、编写出更优雅的代码，同时辅助搜索引擎的有效爬取。

9.2 作用

丢掉css样式时可以让页面也呈现出清晰的结构。
和搜索引擎建立良好沟通，有助于爬虫爬取更多有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重。
方便其他设备以标签意义解析网页。
便于团队开发和维护，使代码更具有可读性，减少差异化。

9.3 html5中的语义化标签

<header> 定义文章的介绍信息：标题，logo，slogan；包裹目录部分，搜索框，一个nav或者任何相关的logo；一个页面中<header>的个数没有限制，可以为每个内容块添加一个header；
<nav> 定义文章导航栏，链接等;nav一般和u、li配合做导航栏；
<main> 定义文章的主要内容main标签在一份文档中是唯一的，其后代元素常常包括<article>；
<article> 定义文档中可以脱离其他部分，一份独立的内容，通常带有标题，当article内嵌article时，里外层的内容应该是相关的，比如一篇微博和它的评论；
<section> 与article的差别在于，它是整体的一部分，或者是文章的一节，一般来说section也会带有标题；
<aside> 侧边栏（与article并列存在）或者嵌入内容（在article内），通常认为是独立拆分出来而不受整体影响的一部分，作为主要内容的附属信息，如索引，词条列表，或者页面及站点的附属信息，如广告，作者资料介绍等；
<footer> 页脚，通常包含作者、版权信息或者相关链接等；
来源--简书