语义化标签
前端最重要的就是三个部分:结构,表现,行为
而HTML负责的就是结构,表现和行为由之后要学的CSS,JS负责,在编写HTML文档的时候,最需要注重的就是结构,至于它的表现和行为,我们暂时不需要关心(但我们在编写HTML文档的时候也要考虑到之后的CSS和JS,尽可能让HTML写得简洁,标准,这对之后的CSS和JS编写工作有很大的帮助)
在编写HTML文档时,需要注重的是HTML标签的语义,而不是它的表现形式,它在浏览器中渲染出来的效果是如何的与我们暂时无关。
HTML区块元素
在HTML中,有两种元素:块级元素或内联元素
块级元素指的是在网页中独占一行的元素,比如<h1>~<h6>,<p>等都是。
还有一种元素:内联元素,它指的是在网页中不会独占一行的标签,比如<em>、<b>等文本格式化的标签都是。
HTML分组
前面提到了,在编写HTML文档的时候要为后面的CSS做准备,比如说,我们要为HTML的标签分好组,这样我们需要介绍到几个看似没什么用,但在写CSS的时候会帮到大忙的标签
比如说:<div>
HTML <div> 元素是块级元素,它可用于组合其他 HTML 元素的容器。
如果与 CSS 一同使用,<div> 元素可用于对大的内容块设置样式属性。
什么意思呢,意思就是,你可以把在内容上属于一类的标签用<div>标签包裹起来,当然,这并不会有什么明细的效果,但是这意味着你给它们确立了分组,这个分组在后面的CSS会有很大的帮助,你可以在CSS中直接对这一分组的样式进行修改,而不是一个个的慢慢改。
还有一个元素:<span>,它和<div>差不多,但是<span>是内联元素,<div>是块级元素。
当与 CSS 一同使用时,<span> 元素可用于为部分文本设置样式属性。
标签 | 描述 |
---|---|
<div> | 定义了文档的区域,块级 (block-level) |
<span> | 用来组合文档中的内联元素(inline) |
其实除此之外,我们还可以使用<table>进行分组,但是一般建议使用<div>,<div>的好处是简洁明了,<table>则要写很多布局的代码,后期维护是很头疼的事情。(<table>一般是用来做表格的,之后会讲到)
HTML 表格
表格由 <table> 标签来定义。每个表格均有若干行(由 <tr> 标签定义),每行被分割为若干单元格(由 <td> 标签定义)。字母 td 指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
<table border="1">
<tr>
<th> 前端</th>
<th> 后端</th>
</tr>
<tr>
<td>HTML</td>
<td>Java</td>
</tr>
<tr>
<td>CSS</td>
<td>PHP</td>
</tr>
<tr>
<td>JS</td>
<td>Python</td>
</tr>
</table>
前端 | 后端 |
---|---|
HTML | Java |
CSS | PHP |
JS | Python |
在<table>标签内,<tr>表示表格的一行,<th>表示表格的表头,<td>表示表格的内容
并且注意,写表格时,是一行一行写的(从左往右),而不是一列一列写(从上往下)(尽管这更符合习惯)
可以看到,实例中的<table>标签还有一个border属性,它的值是正整数,是用来控制边框的,这个数值越大,表格的边框越厚,颜色越深,越明细。如果这个值是0,或者没有写这个属性,那就默认没有边框。
HTML列表
HTML列表分为有序列表,无序列表和自定义列表
有序列表 | 无序列表 |
---|---|
|
|
代码(使用了<table>标签排版格式):
<table align="center">
<tr>
<th>有序列表</th>
<th>无序列表</th>
</tr>
<tr>
<td>
<ol>
<li>马克思</li>
<li>恩格斯</li>
<li>列宁</li>
<li>斯大林</li>
<li>毛泽东</li>
</ol>
</td>
<td>
<ul>
<li>马克思</li>
<li>恩格斯</li>
<li>列宁</li>
<li>斯大林</li>
<li>毛泽东</li>
</ul>
</td>
</tr>
</table>
Tips:<table>标签有一个align属性,它是用来居中的,不需要管。
无序列表
无序列表是一个项目的列表,此列项目使用粗体圆点(典型的小黑圆圈)进行标记。
无序列表使用 <ul> 标签,每个列表项始于 <li> 标签。
有序列表
有序列表也是一个项目的列表,此列项目使用阿拉伯数字进行标记。
有序列表使用 <ol> 标签,每个列表项始于 <li> 标签。
自定义列表
自定义列表不仅仅是一列项目,而是项目及其注释的组合。
自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的注释以 <dd> 开始。
- Coffee
- – black hot drink
- Milk
- – white cold drink
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
- 最新
- 最热
查看全部