常用HTML标签及其属性

 什么是HTML？

HTML，超文本标记语言（Hyper Text Markup Language)。不是编程语言，是一种标记语言，用来描述网页。HTML是各种类型网页开发的基础性语言。

用来展示字体效果的标签及属性

<h1>...</h1>标题字

<h2>...</h2>标题字

<h3>...</h3>标题字

<h4>...</h4>标题字

<h5>...</h5>标题字

<h6>...</h6>标题字

注：<h1>到<h6>数字越大，网页中显示的字体越小

<strong>...</strong>粗体字（给文字加粗）

<em>...</em>斜体字（使文字倾斜）

font-style字体风格      normal  默认值，标准文档样式         italic  斜体

font-weight字体粗细       bold 定义粗体字符,   100-900 定义由细到粗的字符

font-size字体大小      像素：px

font-family字体类型       “隶书”  “楷体” 其他

color字体颜色        三种表示方式

HTML注释

<!--注释内容-->   作用：1、方便代码的阅读  2、在代码调试中可以暂时注释掉一些不必要的代码   3、当浏览器遇到注释时会自动忽略注释内容

特殊符号

空格              HTML源代码：&nbsp;

大于号          HTML源代码：&gt;

小于号          HTML源代码：&quot;

引号             HTML源代码：&reg;

注册商标      HTML源代码：&lt;

区段标记

<hr>带水平线的换行    在网页中加入平行线用来区分上下文

<br>直接到新行   

<p>...</p>段落      在网页中描述具有一个相对完整的内容。

连结方式

<a href="#aaa"></a>  锚链接                    <a name="锚点名称">...</a>锚标记

超链接<a href="链接地址" ></a>     target="目标窗口位置"    _self：自身窗口   _blank：新建窗口

<form  method="post" action="xxx.html"></form>       发送表单数据的方式  标签属性：method 常用值：get  | post          向何处发送表单数据   标签属性：action

图片标签

img   标明引入图片

src  引用图片的路径     

alt  在图片不能正常加载时候显示的提示语         

title  鼠标划上去显示的内容     

width/height  设置图片的宽度和高度

视频标签

video 标明是一个视频

src  引用视频的路径

controls   显示播放器控件

autoplay   自动播放

loop   循环播放

width/height     设置视频外观的宽和高

音乐标签

audio   标明是一段音频

src   引用音频的路径

controls   显示播放器控件

autoplay   自动播放

loop   循环播放

路径

相对路径：不带有盘符，通常是以HTML网页文件为起点，通过层级关系描述目标图像的位置。

绝对路径：一般是指带有盘符的路径或完整网络地址。（因为每个人电脑内容不同，不会用）

列表分类

1、无序列表

<ul>用来声明无序列表。

<li>用来表示列表项。

<ul></ul>标签表示一个无序列表的开始和结束，<li>表示这是一个列表项。在一个无序列表中可以包含多个列表项。

<ul>标签和<li>标签配合使用，不能单独使用。

type属性，用于控制列表项符号。可以改变type属性值来调整列表项符号。

常用type属性：disc 默认值，实心圆“●”   circle 空心圆“○”   square 实心正方形“■”   none 没有符号 

2、有序列表

<ol>用来声明有序列表。

<li>用来表示列表项。

有序列表的各个列表项是有顺序的。有序列表从<ol>开始，到</ol>结束，中间的列表项是<li>标签内容。

<ol>标签和<li>标签是配合使用，没有单独使用，而且<ol>标签内部不能存在任何其他标签，一般情况下只能存在<li>标签。

type属性，用于控制列表项符号。可以改变type属性值来调整列表项符号。

常用type属性：

type属性值：1        数字1、2、3…...

type属性值：a/A    小/大写英文字母

type属性值：i/I    小/大写罗马数字

3、自定义列表

<dl>用来声明自定义列表。

<dt>用来表示列表标题。

<dd>用来表示列表内容

<dl>标签和<dt><dd>标签是配合使用，没有单独使用，而且<dl>标签内部不能存在任何其他标签。

表格基本语法

跨行跨列：rowspan跨行   属性规定单元格可横跨的行数。  colspan跨列     colspan 属性规定单元格可横跨的列数。

<td> 标签：每行被分割为若干单元格使用td定义

<tr> 标签：表格均有若干行组成使用tr定义

<table> 标签：定义表格

表头单元格：<th> 标签：定义 HTML 表格中的表头单元格。

表格美化：borde 设置边框； bgcolor 设置背景颜色； align 设置表格在网页中的对齐方式； width/height 表格的宽度/表格高度； cellspacing 设置单元格与单元格之间的距离； cellpadding 设置文字与单元格之间的距离。

表单元素属性

文本输入：属性值：text,password    作用：text,表单中键入字母、数字等内容。  password，输入密码字段。

文件选择：属性值：file    作用：file,定义文件选择。

按钮：属性值：button    作用：button,定义普通按钮。

选择：属性值：checkboxes,radio      作用：checkboxes,表单复选框。   radio,表单单选框。

提交按钮：属性值：submit，image     作用：submit,定义提交按钮。   image,定义图片提交按钮。

重置按钮：属性值：reset     作用：reset,定义了重置按钮。

size属性：元素的宽度，当 type 为 text 或 password时。

<maxlength>标签：type为text 或 password 时，输入的最大字符数。

<checked>标签：type为radio或checkbox时，指定按钮是否是被选中。

下拉列表：<select> 标签  select 标签用于声明下来列表      option 标签用于声明列表项

表单的多行文本域

可见行数：标签属性：rows       rows 属性规定 textarea 的可见高度。

可见宽度：标签属性：cols        cols 属性规定 textarea 的可见宽度。

最大长度：标签属性：maxlength         maxlength 属性规定文本区域的最大长度（以字符计）。

名称：标签属性：name        name 属性为文本区规定名称。

表单的高级应用

隐藏域 type="hidden”     1、 隐藏域在页面中对于用户是不可见的，在表单中插入隐藏域的目的在于收集或发送信息。  2、处理表单的程序所使用。浏览者点击发送按钮发送表单的时候，隐藏域的信息也被一起发送到服务器。   3、隐藏只是在网页页面上不显示输入框，但是虽然隐藏了，还是具有form传值功能。

只读 readonly=“readonly”       禁用 disabled="disabled" 

语义化表单

域： 使用<fieldset>来定义。将一组表单元素放到域中。

域标题： 使用<legend>。所谓的域标题就是给创建的域设置个标题。

表单元素标注

对表单元素进行标注，这样做的目的是为了增强鼠标的可用性。创建<label>标签写入相关内容。在<label>标签中加入 for 属性实现 label 绑定到哪个表单元素。对应在input中加入 id 属性进行关联。