HTML标签笔记总结（归纳）

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

1.文本格式化标签

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

img标签属性

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

base标签

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

常用特殊字符

字符描述代码
©版权&copy;
&和&amp;
空格&nbsp;

列表

无序列表 ul li

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

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

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

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

有序列表 ol li

CSS样式

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

自定义列表

 <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控件

属性属性值描述
typetext文本
typepassword密码
typeradio单选（input要是同一个name）
typecheckbox复选
typebutton按钮
typesubmit提交
typereset重置
typeimage图片按钮，配合src使用
typefile文件域（上传文件）
name用户自定义控件的名称
value用户自定义input默认的文本值
size正整数input控件的显示宽度
checkedchecked定义选择控件默认被选择的项
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是音频或视频文件及其路径；

多浏览器支持的方案

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

video:播放视频

  <video controls></video>

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

以上是 HTML标签笔记总结（归纳） 的全部内容， 来源链接： utcz.com/a/40207.html

回到顶部