HTML标签笔记总结（归纳）

这篇文章主要集合了容易忘记的一些常用的标签和属性.

1.文本格式化标签

标签	表头
<b> <strong>	加粗
<i> <em>	斜体
<s> <del>	删除线
<u> <ins>	下划线

img标签属性

属性	描述
src	图像的路径
alt	图片无法显示时候替换文本
title	鼠标悬停时显示的内容
border	图片边框的高度

base标签

新建标签页打开链接页面,只需在head里面添加这段代码
<base target=" blank">

常用特殊字符

字符	描述	代码
©	版权	©
&	和	&
	空格	 

列表

无序列表 ul li

在一些导航布局当中也会经常用到

属性	结果
list-style-type:circle;
list-style-type:square;

开发中我们会经常清除ul li默认样式:

ul,li{ padding:0;margin:0;list-style:none}

有序列表 ol li

CSS样式

属性	结果
list-style-type:upper-roman;
list-style-type:lower-alpha;

自定义列表

 <dl>
            <dt>hello</dt>
            <dd>hello world</dd>
            <dd>hello world</dd>
            <dd>hello world</dd>
        </dl>

一般在footer底部介绍菜单分类中用的比较多

表格

表格一般不用来布局，用来显示数据；

<table>
           <tr>
               <th>表头</th>
               ...
           </tr>
           <tr>
               <td>内容</td>
               ...
           </tr>
           ...
       </table>

表格属性

属性名	含义	常用属性值
border	边框	像素
cellspacing	单元格之间的空白间距	像素
cellpadding	单元格的内间距padding	像素
width	宽度	像素
height	高度	像素
align	表格在网页中的水平对齐方式	left center right

表格结构

如果用表格进行布局，将表格划分为头部，主体和页脚

<thead></thead>:定义表格头部：一般包含logo和导航等信息

<tbody></tbody>：定义表格的主体

表格标题

<caption></caption会居中显示在表格上

合并单元格

跨行(竖着)：rowspan

跨列(横着)：colspan

input控件

属性	属性值	描述
type	text	文本
type	password	密码
type	radio	单选（input要是同一个name）
type	checkbox	复选
type	button	按钮
type	submit	提交
type	reset	重置
type	image	图片按钮，配合src使用
type	file	文件域（上传文件）
name	用户自定义	控件的名称
value	用户自定义	input默认的文本值
size	正整数	input控件的显示宽度
checked	checked	定义选择控件默认被选择的项
maxlength	正整数	允许输入的最多的字符

label标签

作用：绑定一个表单元素，当点击label标签的时候，被绑定的表单元素会获取输入焦点

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

textarea控件

  <textarea cols="每行中的字符数" rows="显示行数"></textarea>

下拉菜单

<select name="" id="">
            <option value="">选项1</option>
            <option value="">选项2</option>
            <option value="" selected="selected">选项3</option>
        </select>

selected="selected"用于设置默认选中的那项

表单域

在HTML中，form被用于定义表单域，实现收集传递用户信息，form中的所有内容都会被提交给服务器

 <form action="url地址" method="提交方法" name="表单名称"></form>

属性	作用
action	收集信息传递给服务器进行处理，action指定接收并处理表单数据的服务器程序的url地址
method	用于设置表单数据的提交方式，其取值为get和post
name	名称

常用新增标签

语义化标签header nav footer article section aside

datalist ：配合input使用，输入时会提示关键词

 <input type="text" placeholder="请输入明星" list="star">
       <datalist id="star"> 
            <option>杨超越</option>
            <option>刘德华</option>
            <option>那英</option>
            <option>姚贝娜</option>
            <option>钢铁侠</option>
       </datalist>

fliedset 将表单内的相关元素分组，打包

 <fieldset>
           <legend>用户登录</legend>
           用户名：<input type="text" name="" id=""><br>
           密码：<input type="password" name="" id="">
       </fieldset>

input type新增属性值：

**类型	使用示例**	含义**
email	<input type="email">	输入邮箱格式
tel	<input type="tel">	输入手机号码格式
url	<input type="url">	输入url格式
number	<input type="number">	输入数字格式
search	<input type="search">	搜索框（体现语义化）
range	<input type="range">	自由拖动滑块
time	<input type="time">	小时分钟
date	<input type="date">	年月日
datetime	<input type="datetime">	时间
month	<input type="month">	月年
week	<input type="week">	星期 年

常用新属性

1. placeholder：输入时候提示文字消失
2. autofocus:让input表单加载页面时默认被选中
3. multiple：多文件上传（默认的file是单个文件上传）
4. required:必填项；内容不能为空
5. accesskey:规定激活（使元素获得焦点）元素的快捷键，采用alt+S的形式

多媒体标签

embed:标签定义嵌入的内容,可以用来插入Midi,wav,AIFF,AU,MP3等格式，url是音频或视频文件及其路径；

1. audio:播放音频
2. autoplay自动播放
3. controls是否显示不播放控件
4. loop循环播放（loop或loop="-1"无限循环）

多浏览器支持的方案

 <audio src="">
            <source src="...">
            <source src="...">
            您的浏览器不支持HTML音频播放功能
 </audio>

video:播放视频

  <video src="..." controls></video>

1. autoplay自动播放
2. controls是否显示控件
3. loop循环播放
4. width设置窗口宽度
5. heigh设置窗口高度

多浏览器支持的方案和audio类似