0基础学html-2

表格标签 table

<table border="1px">
    <tr>
        <td>北京</td>
        <td>上海</td>
        <td>天津</td>
    </tr>
    <tr>
        <td>江苏</td>
        <td>浙江</td>
        <td>四川</td>
    </tr>
       <tr>
        <td rowspan="2" colspan="2">江苏</td>
        <td>浙江</td>
        <td>四川</td>
    </tr>
</table>

< tr>标签，table表格的行
< td>或者< th>标签，table表格的单元格
< th>标签中的内容默认有文字加粗效果，并且有文字水平居中效果
rowspan属性：改变标签所占行数，删除多余单元格
colspan属性：改变标签所占列数，删除多余单元格

表格标签 table 分区标签 标题标签

<table border="1px">
    <caption>城市</caption>
    <thead>
        <tr>
            <td>北京</td>
            <td>上海</td>
            <td>天津</td>
        </tr>
    </thead> 
    <tbody>   
        <tr>
            <td>江苏</td>
            <td>浙江</td>
            <td>四川</td>
        </tr>
    </tbody> 
    <tfoot>
        <tr>
            <td >江苏</td>
            <td>浙江</td>
            <td>四川</td>
        </tr>
    </tfoot> 
</table>

分区标签在< table>标签内，包含< tr>标签，给< tr>行标签进行分区
< thead>，包裹的< tr>，默认会显示在表格的最上方
< tfoot>，包裹的< tr>，默认会显示在表格的最下方
< tbody>，包裹的< tr>，没有显示位置的改变，只是表示分区内容
一个< table>表格只允许有一个< thead>标签和< tfoot>标签，允许有多个< tbody>标签
如果< table>表格中，没有设定< tbody>标签，会默认给所有的< tr>标签添加< tbody>分区标签
标题标签< caption>在< table>标签内，不要包裹< tr>，只包裹标题内容
默认会显示在< table>表格的最上方，并且水平居中

图片标签

<img src="1.jpg"> //图片在同一级目录
<img src="image/1.jpg"> //图片在下一级目录
<img src="../../1.jpg"> //图片在上两级目录
<img src="../image/1.jpg"> //图片在上一级目录下image文件夹内
<img src="httpL//www.baidu.com/1.jpg"> //图片在网络路径
<img src="1.jpg" width="200px" height="200px">//设定图片的宽高，

如果只设定一项，浏览器会根据图片宽高比例自动调整大小
< img>标签为图片标签，单标签
属性：src 指定需要显示的图片内容
alt 当图片显示失败时，替换显示内容

超链接标签

<a href="http://www.baidu.com">百度</a>

< a>标签为超链接标签，双标签
< a>标签href属性类似上面< img>标签的src属性
target属性决定超链接的打开方式
_self 当前窗口打开方式
_blank 新窗口打开方式
href属性支持的显示内容以及显示方式
完全支持的内容：
图片，其他html文件，文本文档
需要通过服务器运行程序，才可以支持的文件：
php文件
不同浏览器，支持效果不同：
音频，视频文件
完全不支持的文件，直接下载
压缩文件等

html注释

<!--
所有的计算机语言都有注释方式
不同计算机语言的注释语法不同
所有的计算机语言对于注释内容的处理方式都是相同的
注释内容只会存在于源代码中，不会被程序编译并且执行
-->

常用字符实体编码

空格   
&    &
<    &lt;
>    &gt:
"    &quot;
'    &#39;(低版本IE浏览器不支持单引号的字符实体格式，采用字符编码格式)
©    &copy;
®    &reg;    

html字符实体查阅网址：https://dev.w3.org/html5/html-author/charref

文本标签

<b>加粗标签</b>
<strong>加粗标签</strong>

< b>标签和< strong>标签显示效果为加粗效果
< strong>标签有语义化效果，表示内容为重点强调的内容，带有语义化的标签对于搜索引擎更加友好，默认搜索排名会靠前。

<i>斜体标签</i>
<em>斜体标签</em>

< i>标签和< em>标签显示效果为斜体效果
< em>标签有语义化效果，表示内容为重要的阅读内容

<s>删除线标签</s>
<del>删除线标签</del>

< s>标签和< del>标签显示效果为删除线效果
< del>标签有语义化效果，表示内容为不相关内容或者不准确或者删除的内容

<sup>上标标签</sup>
<sub>下标标签</sub>

< sup>为上标标签< sub>为下标标签

<p>段落标签</p>

< p>标签为段落标签，标签内容独占一行，并且垂直方向有上下间距

<div></div>
<span></span>

< div>标签和< span>标签没有任何样式小姑
< div>标签为典型的块元素标签，内容独占一行
< span>标签为典型的行内元素/内联元素标签，内容可以显示在一行之内
< br> 换行标签
< hr> 水平分割线标签

<h1>标题标签h1</h1>
<h2>标题标签h2</h2>
<h3>标题标签h3</h3>
<h4>标题标签h4</h4>
<h5>标题标签h5</h5>
<h6>标题标签h6</h6>

文字内容加粗
不同标签文字大小不同，一般情况下，< h4>标签与浏览器默认文字大小基本相同
垂直方向上下有间距