HTML学习-CFANZ编程社区

IDE 集成开发环境/高级代码编辑器

代码编辑、关键词高亮、智能感应、智能纠错、格式美化、版本管理

HTML（Hyper Text Markup Language 超文本标记语言）

HTML5特性

空白折叠现象

文字与文字间的多个空格、换行会被折叠成一个空格

标签内壁和文字之间的空格会被忽略

转义字符

常见转义字符：

转义字符	意义
`<`	小于号
`>`	大于号
` `	空格（不会被折叠）
`©`	版权符号

HTML的文档类型声明

HTML文件第一行必须是DTD（文档类型声明）

不写会引发浏览器兼容问题

html5 <!document html>

HTML注释

注释语法

快捷键Crtl + /

HTML标签对

<head>标签是对网页的配置信息

<body>标签是网页内容

meta标签

<meta>元标签单标签表示网页基础配置

字符集

charset='UTF-8'

字符集UTF-8包含所有字符，一个汉字占3字节

字符集gb2312(gbk)只有汉字英文,一个汉字占2字节

网页关键词和页面描述

name 表示设置描述的名字

content 设置网页关键词或者页面描述，也是搜索引擎显示的简介词语

name='Keywords'表示网页关键词

name='Description'表示页面描述

可以设置多个name content 但一个meta标签只能设置一组

`title`标签

<title> </title>表示网页名称

标题标签

h1~h6

h1标签一般只能放一个

段落标签

p标签

只有在p标签中显示内容才能换行

p标签中不能嵌套p标签或者h标签，h标签也不能嵌套p标签

`div`标签

用来将相关内容组合到一起，以与其他内容分割。

结合CSS使用实现网页布局。

容器/盒子　　可嵌套

可添加class属性表示类名，类名服务于CSS

区域	类名
页头	header
logo	logo
导航条	nav
横幅	banner
内容	content
页脚	footer

列表标签

无序列表

适合导航栏，新闻栏之类

<ul> </ul> 和<li> </li>配合使用，要注意缩进

<li>不能单独使用

<ul>的子标签只能是<li>

<li>标签是容器，内部可以放其余标签

<ul>
    <li>面包
        <p>
            面包真不错
        </p>
    </li>
    <li>牛奶</li>
</ul>

type属性 circle-空心圆 disc-实心圆（默认） square-实心方块

但是在HTML5中已经废弃，建议使用CSS代替。

有序标签

适合排行榜

<ol></ol>和<li> </li>标签配合使用

使用和<ul>类似

type属性

属性值	意义
a	小写英文字母编号
A	大写英文字母编号
i	小写罗马数字编号
I	大写罗马数字编号
1	表数字标号（默认）

start属性必须是一个整数（不管编号类型），表示列表编号起始

reversed属性指定列表的条目是否倒叙排列。该属性不需要值只需要写该单词即可。<ol reversed> </ol>

定义列表

适合构成定义关系的文字

<dl> </dl>是定义列表标签，内容交替出现<dt> </dt> 、<dd> </dd>标签。

dd是解释dt的内容的标签。

dt,dd是同级标签，必须放在dl中使用

也允许dt，dd不交替出现而是处于不同的定义列表标签dl中

<dl>
    <dt>HTTML</dt>
    <dd>超文本标记语言</dd>
</dl>

`img`标签

单标签

用来在网页中引入图片，图片必须在项目文件夹中，一般存在images子文件夹中

src属性（source）：图片存储目录和完整文件名

相对路径、绝对路径

../ 表示上一文件夹 ./ 表示同级文件夹，可省略

alt属性（alternate）：对图像的文本描述，用于在无法加载图形的情况下，浏览器会在页面上显示alt属性中的备用文本，网页朗读器也会朗读alt中文本。

width、height属性：设置宽度高度，单位是像素，但不用写单位，若只设置了一个属性，则表示按原始比例缩放图片。

`a`标签

<a>标签制作超级链接

超级链接是将网页和网页连接在一起的方法

<a href='www.baidu.com' title='哈哈哈哈' targer='blank'>百度</a>

href属性支持相对路径和绝对路径

title属性用于设置鼠标的悬停文本

target属性规定在何处打开网页设置为blank，即可在新标签页中打开网页(HTML4代，blank之前有一个下划线)

图片也可以变为超级链接

<a href='www.baidu.com'>
	<img src='...'>
</a>

页面内锚点

在a标签上设置id属性后，在设置href属性中的网址后加#id即可直接跳转到该锚点部分（无网址只有#id则是该页面中的锚点）

下载链接

指向exe、zip、rar等文件格式的链接，自动成为下载链接

邮件链接、电话链接

有mailto:前缀的链接是邮件链接，系统将自动打开Email相关软件

有tel：前缀的链接是电话链接，系统自动打开拨号盘

`audio`标签

在浏览器中加入音频兼容到IE9

<audio controls autoplay loop src='音频地址'>audio标签</audio>

controls属性没有值加上controls表示显示播放控件

src属性音频地址

autoplay属性没有值声明后音频会自动播放，但常用浏览器为了不打扰用户，可能不允许自动播放，必须用户点击后播放

loop属性声明后将循环播放音频

常用音频格式：mp3、ogg、wav格式

`video`标签

在浏览器中加入视频兼容到IE9

<video controls autoplay loop src='视频链接' width='300'>video标签</video>

常见格式：mp4、ogv、webm、avi等格式

controls、autoplay、loop属性跟audio标签一致

HTML5区块标签

区块标签	说明
`<section>`	文档区域，语义比div大
`<article>`	文档的核心文章内容，会被搜索引擎抓取
`<aside>`	文档的非必要相关内容，如广告
`<nav>`	导航条
`<header>`	页头
`<main>`	网页核心部分
`<footer>`	页脚
`<address>`	地址

`span`标签

包裹文本，用于CSS设置

不会换行

`<b> <u> <i>`标签

标签	说明
`<b>`	加粗
`<u>`	下划线
`<i>`	倾斜

`<strong> <em> <mark>`标签

标签	说明
`<strong>`	代表特别重要的文字
`<em>`	代表强调的文字
`<mark>`（HTML5）	代表一段高亮的文字

`<figure> <figcaption>` 标签

<figure>标签代表一段独立内容，与说明<figcaption>配合使用，他是一个独立的引用单元

`<form>`标签

所有HTML表单都以一个<form>元素开始。

action属性表示表单要提交到的后台程序的网址

method属性表示表单提交方式，有get或者post(大小写都可)

<form action="",method="POST">
    
</form>

单行文本框

使用type属性为text的<input>元素可以创建单行文本框，他是一个单标签。

value属性表示已经写好的值

placeholder属性表示提示文本，将以浅色文字卸载文本框中，并不是文本框中值。

disabled属性不用值表示用户不能与该文本框交互，即“锁死”

<input type="text" value="123" placeholder="请输入姓名" disabled>

单选按钮

使用type属性被设置为radio的<input>元素可以创建单选按钮，互斥的单选按钮应该设置name属性相同

value属性，向服务器提交的就是value值

checked属性单选按钮有checked属性表示默认选中

<p>
    性别：
    <input type="radio" name="sex" value="男" checked>男
    <input type="radio" name="sex" value="女">女
</p>

`label`标签

label标签用来绑定文字和单选按钮，用户单击文字时也视为点了单选按钮。

<form>
    <P>
        性别：
    </P>
    <label>
    <input type="radio" name="sex" value="男" checked>男
	</label>
	<label>
    	<input type="radio" name="sex" value="女">女
	</label>
</form>

HTML4时代，label是通过for属性和单选按钮进行绑定的，即label标签不能包裹单选按钮

<input type="radio" id="nan">
<label for="nan">男</label>

复选框

使用type属性为checkbox的<input>元素可以创建哎复选框，同组复选框的name为相同值。

value属性向服务器提交的就是value属性

<form>
    <P>
        请选择爱好：
    </P>
    <label>
		<input type="checkbox" name="hobby" value="足球">足球
	</label>
	<label>
		<input type="checkbox" name="hobby" value="篮球">篮球
	</label>
	<label>
		<input type="checkbox" name="hobby" value="游泳">游泳
	</label>
</form>

密码框

使用type属性设置为password的<input>元素可以创建密码框

<form>
    <p>
        请输入密码：
        <input type="password">
    </p>
</form>

下拉菜单

<select>标签表示下拉菜单，<option>是内部选项

下拉菜单默认选中是为<option>标签中添加selected属性

<select>
    <option value="alipay" selected>支付宝</option>
    <option value="wx">微信</option>
    <option value="bank">网银</option>
</select>

<option>不能单独放置，<select>中只能用<option>

多行文本框

<textarea> <textarea>表示多行文本框

row和cols属性，用于定义多行文本框的行数列数

三种按钮

表单中常见的三种按钮，也都是input标签，type属性值不同

value值是按钮上的值。

用<button>时按钮上的值在 <button>按钮上的值</button>

当<button>设置了type属性后，<button>就不具备提交功能了

<button>起始标签和闭合标签之间不仅可以写文字，还可以写其他内容，比如设置一张图片。

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

而<input>的两个标签则无法实现。

<button>和<input type="submit">按钮点击后，在谷歌浏览器上，浏览器顶部的刷新按钮会转一下，而<input type="button">则没有这个效果。

type属性值	按钮种类
`button`	普通按钮，可以简写为<button>``</button>
`submit`	提交按钮
`reset`	重置按钮

HTML5中新增的`<input>`种类

type属性	控件
`color`	颜色选择控件
`data、time`	日期、时间选择控件
`email`	电子邮件输入控件
`file`	文件选择控件
`number`	数字输入控件
`range`	拖拽条
`search`	搜索框
`url`	网址输入控件

required属性设置必填

type为 number、range时可设置的min和max属性，表示上下限

type为search时，并不能直接实现搜索功能，需要后台实现，与文本框的区别在于，输入内容后会出现 **× ** 来直接清除内容

type为email、url时，点击提交表单会检查这两者格式规范

`<datalist>`控件

<datalist>为输入框提供备用选项，当用户内容与备选文字相同时，会智能感应显示

<input type="text" list="province-list">
<datalsit id="province-list">
	<option value="山东">山东</option>
    <option value="陕西">陕西</option>
    <option value="上海">
    <option value="山西">    
</datalsit>

表格标签

<table> 表格标签，用来包裹 <tr> <td>

<tr> 即table row表格行

<td>即table data表格数据

<th>表示表格的标题小格，和<td>同一层级

border属性，表示表格边框粗细，要设置在<table>才会生效

width属性，调整表格宽度，不设置时宽度由内容撑开，<table>、<td>标签可以设置该属性，而<tr>标签设置时无效

height属性，通常用于<table>、<tr>标签来调整高度

width和height属性单位默认px可省略；

width和height`属性只有设置的比默认宽度、高度大时才会生效

align属性可以调整table整体水平位置，属性值分别为：left、center、right代表水平居左、居中、居右显示

给<tr>设置align属性可以设置该行所有<td>中的内容的水平对齐方式

caption属性是表格的标题，他常常作为<table>的第一个子元素出现

<!-- 如图即为三行三列表格,边框宽度为1像素，表格总宽度为100像素，且第一行为标题 -->
<table border="1" width="100">
    <caption>表格标题</caption>
    <tr>
        <th>第一列</th>
        <th>第二列</th>
        <th>第三列</th>
    </tr>
    <tr>
        <td>A</td>
        <td>A</td>
        <td>A</td>
    </tr>
    <tr>
        <td>B</td>
        <td>B</td>
        <td>B</td>
    </tr>
</table>

单元格合并

<colspan>属性用来设置<td>或者<th>的列跨度

colspan="2"代表该小格占两个列跨度

colspan="3"代表该小格占三个列跨度

<table border="1" width="100">
    <caption>表格标题</caption>
    <tr>
        <th>第一列</th>
        <th>第二列</th>
        <th>第三列</th>
        <th>第四列</th>
    </tr>
    <tr>
        <td colspan="2">A</td>
        <td>A</td>
        <td>A</td>
    </tr>
    <tr>
        <td>B</td>
        <td colspan="3">B</td>
    </tr>
    <tr>
        <td>D</td>
        <td>D</td>
        <td>D</td>
        <td>D</td>
    </tr>
</table>

<rowspan>属性用来设置<td>或者<th>的行跨度

rowspan="2"代表该小格占两个行跨度

rowspan="3"代表该小格占三个行跨度

<rowspan> <colspan>可以同时存在

表格其他特性

<thead>标签定义表头

<tbody>标签定义表核心内容

<tfoot>标签定义表脚，通常是汇总行

表格可以嵌套，嵌套的表格要写在<td>中

转义字符	意义
`<`	小于号
`>`	大于号
` `	空格（不会被折叠）
`©`	版权符号

转义字符	意义
`<`	小于号
`>`	大于号
` `	空格（不会被折叠）
`©`	版权符号

HTML学习