HTML基础（超文本标记语言）

特点

无编译，浏览器直接执行
文本文件
文件后缀为html/htm
大小写不敏感，HTML=html

基本结构=头部信息+网页内容

总体以<html>开始，以</html>结束。
头部信息以<head>开始，以</head>结束。显示在网页标题。
网页内容以<body>开始，以</body>结束。显示在网页内。

<html>
<head>
    <title>标题</title>
</head>
<body>
    网页主题内容
</body>
</html>

标签属性

<标签名属性名1= “属性值” 属性名2=“属性值” …> … </标签名>

例如：

<p> 段落
<title> 标题
<hr>/<hr/>平行线（无需结尾）
<body bgcolor="red"> 网页背景颜色为红色
 注释

文档类型声明

<!DOCTYPE>声明必须放在HTML文档第一行，以示浏览器此代码用HTML语言编写。

网页编码设置

当在代码body中输入汉字而在页面中出现乱码时，在<head>``</head>标签之间添加<meta http-equiv=" Content" content="text/html;charse=utf-8"/> 还可用GB2312、gbk等编码替代utf-8

文字和段落标签

<h1></h1>~<h6></h6> 段落标签。数字越大，文字在网页中显示越小。
<p></p>段落标签。
<br/>换行标签。
<pre></pre>直接显示代码中的内容。
<i></i> <em></em>斜体。
<b></b> <strong></strong>加粗。
<sub>下标
<sup>上标
<ins>下划线
<del>删除线
align对齐属性

值	描述
right	右对齐内容
left	左对齐内容
center	居中对齐内容
justify	对行进行伸展

<hr/>水平线标签。

属性	描述
width	设置水平线宽度，可以像素或百分比
color	设置水平线颜色
align	设置水平线居中对齐
noshade	设置水平线无阴影

注：特殊符号

属性	显示结果	描述
`<`	<	小于号或显示标记
`>`	>	大于号或显示标记
`®`		已注册
`©`		版权
`™`		商标
` `	Space	空格

无序列表

<ul type="值">
    <li>列表项</li>
    <li>列表项</li>
    ……
</ul>

值	描述
disc	圆点
square	正方形
circle	空心圆

有序列表

<ol type=“值”>
    <li>列表项</li>
    <li>列表项</li>
    ……
</ol>

值	描述
1	数字1、2……
a	小写字母a、b……
A	大写字母A、B……
i	小写罗马数字i
I	大写罗马数字I

列表标签

<dl>
    <dt>定义列表项</dt>
    <dd>列表项描述</dd>
    <dd>列表项描述</dd>
    <dt>定义列表项</dt>
    <dd>列表项描述</dd>
    ……
<>

查看网页代码

在网页处按F12即可弹出浏览器相对应的开发环境。

图像标签

<img src="" alt="" …… />

img属性：

属性	值	描述
src	URL	显示图像的URL
alt	文字	图象替代文本（鼠标放在链接上时显示的解释）
height	数值和百分比	图像的高
width	数值和百分比	图像的宽

例如

绝对位置<img src="E:/HTML/图像与超链接/img/1.jpg"/>
相对位置<img src="../1.jpg"/>

##超链接标签 <a href="">内容</a>

属性	描述
href	链接地址
target	连接目标窗口 _self _blank _top _parent
title	链接提示文字
name	链接命名

<a href="#锚名1">目录1</a>
<a href="#锚名2">目录2</a>
<a href="" name="锚名1">内容</a>
<a href="" name="锚名2">内容</a>

锚名只是用来在代码中显示链接位置，name可写在任意位置。

<a href="网页名称#锚名">……</a>
<a name="锚名">……</a>

表格

表格基本句法结构

<table>
    <caption>……</caption>
    <tr>
        <th>……</th>
        <td>……</td>
        ……
    </tr>
    <tr>
        <td>……</td>
    </tr>
</table>

<table>表格
<tr>行
<td>单元格
<th>表格头，内容居中加粗显示
<caption>表格标题，居中显示。

<table>
    <caption>……</caption>
    <thead>
        <tr>
            <th>表头</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>主体</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>脚注</td>
        </tr>
    </tfoot>
</table>

表格属性

属性	值	描述
width	pixels、%	规定表格宽度
align	left、center、right	表格相对周围元素的对齐方式
border	pixels	规定表格边框的宽度
bgcolor	rgb(x,x,x)、#xxxxxx、colorname	表格的背景颜色
cellpadding	Pixels、%	单元边沿与其内容之间的空白
cellspacig	Pixels、%	单元格之间的空白
frame	属性值	规定外边侧边框的哪个部分是可见的
rules	属性值	规定内边侧边框的哪个部分是可见的

值	描述
void	不显示外侧边框
above	显示上部的外侧边框
below	显示下部的外侧边框
hsides	显示上部和下部的外侧边框
vsides	显示左边和右边的外侧边框
lhs	显示左边的外侧边框
rhs	显示右边的外侧边框
box、border	在所有四个边上显示外侧边框

跨列、行属性

跨列

<table>
    <tr>
        <td colspn="值">……</td>
        <td>……</td>
        ……
    </tr>
    <tr>
        <td>……</td>
    </tr>
</table>

-跨行

<table>
    <tr>
        <td>……</td>
        <td rowspan="值">……</td>
        ……
    </tr>
    <tr>
        <td>……</td>
    </tr>
</table>

注：值为要跨的行、列数目。

块级元素和内联元素

块级：

内联：

HTML基础笔记