一、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的块级元素和行内元素的区分很简单,但是这是前端启程的第一步。学好他,为成为前端工程师的第一步。