一、HTML简介
HTML不是一个编程语言，它是一门超文本标记语言。很多才学习前端的小伙伴总是将html认为是一门编程语言。它的作用是在于告诉浏览器如何构造你的页面。它可以由一系列HTML元素组合成web开发人员想要的简单或者复杂的页面。“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。
HTML特点：
超文本标记语言文档制作不是很复杂，但功能强大，支持不同数据格式的文件镶入，这也是万维网 （WWW）盛行的原因之一，其主要特点如下：
1.简易性：超文本标记语言版本升级采用超集方式，从而更加灵活方便。
2.可扩展性：超文本标记语言的广泛应用带来了加强功能，增加标识符等要求，超文本标记语言采取子类 元素的方式，为系统扩展带来保证。
3.平台无关性：虽然个人计算机大行其道，但使用MAC等其他机器的大有人在，超文本标记语言可以使用 在广泛的平台上，这也是万维网（WWW）盛行的另一个原因。
4.通用性：另外，HTML是网络的通用语言，一种简单、通用的全置标记语言。它允许网页制作人建立文 本与图片相结合的复杂页面，这些页面可以被网上任何其他人浏览到，无论使用的是什么类型的电脑或浏览器。
二、HTML的块级元素
作用：搭建网页结构
特点：
-
独占一行空间
-
默认宽度为100%，（有父元素，宽度就相对于父元素，没有父元素，宽度相对于body（浏览器可视区域））
-
高度由子元素或内容决定（将元素撑起）
-
可以通过css指定其宽高。
-
块级元素可以包含块级元素或行内元素（有些特殊的块级元素除外）
元素：html、body、div、p、h1~h6、ul->li、ol->li、dl->dd/dt、header、footer、nav、article、section、aside、address...
建议：不要将块级元素嵌套在行内元素中。
| 元素 | 作用 | 已有CSS效果 |
|---|---|---|
| div | 无意义的块元素 | |
| h1~h3 | 标题标题 | margin font-size font-weight |
| p | 段落 | margin |
| ul,li | 无序列表 | margin padding list-style |
| ol,li | 有序列表 | margin padding list-style |
| dl,dt,dd | 定义列表 | dl - margin dd - margin |
| html | ||
| body | margin | |
| header | H5新增的语义化标签<br>(样式与div类似) | <div class="header"></div> |
| footer | <div class="footer"></div> | |
| nav | <div class="nav"></div> | |
| article | <div class="article"></div> | |
| section | <div class="section"></div> | |
| aside | <div class="aside"></div> | |
| address | <div class="address"></div> |
三、HTML行内块元素
作用：在结构中填充网页内容
特点：
-
与其他行内元素共享一行
-
宽高由自身决定
-
行内相对来说只能包含行内。
元素：span、a、img、strong、b、i、em、sub、sup...
四、特殊的块级元素
有一些特殊的块级标签，他们不建议包含块级元素或只包含指定的块级元素。
我们可以先把所有的块元素再次划分成几个级别的，我们已经知道<html>是在最外层，<html>下一级里面只会有<head>、<body>、<frameset>、<noframes>。而我们已经知道了可视的元素只会出现在<body>里，所以我们把<body>划在第一个级里面，接着，把不可以自由嵌套的元素划在第三个级，其他的就归进第二个级。所谓的不可自由嵌套的元素就是里面只能放内联元素的，它们包括有：标题标记的<h1>、<h2>、<h3>、<h4>、<h5>、<h6>、<caption>；段落标记的<p>；分隔线<hr>和一个特别的元素<dt>(它只存在于列表元素<dl>的子一级)。
注意！！！！：<ul>、<ol>、<dl>、<table>，它们的子一层必须是指定元素，<ul>、<ol>的子一级必须是<li>；<dl>的子一级必须是<dt>或者<dd>；<table>的子一层必须是<caption> 或<thead>、<tfoot>、<tbody>等，而再子一层必须是<tr> （<tr>只存在于<thead>、<tfoot>、<tbody>中），之后才是可放内容的<td>或者<th>。<p>标签不建议放入其他的块级元素，放入其他块级元素，会使一个p标签变成两个p标签。建议<p>标签放行内元素就可以了。
五、特殊的行内元素
<img> ,<input>他们虽然是行内元素，但是可以不通过css设置宽高。是比较特殊的一类行内元素。
六、总言
虽然HTML的块级元素和行内元素的区分很简单，但是这是前端启程的第一步。学好他，为成为前端工程师的第一步。
392
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
