这篇博客介绍了HTML的基础知识，包括文档类型声明、字符集设置、SEO元信息，以及HTML5中的列表标签、多媒体标签、超链接、字体标签、表单标签和表格标签的使用方法。详细讲解了各种标签的属性和用法，是初学者入门HTML的好资料。
一、认识HTML
-
声明文档类型，html5 类型声明如下：
<!DOCTYPE html> -
html5 骨架
<html> <head> <meta charset="UTF-8"> <title>Html 初体验</title> </head> <body> <!-- 内容信息 --> </body> </html> -
<meta charset=”UTF-8">中charset是文档字符集设置，常见的有UTF-8、gb2312、gbk， 常用的是UTF-8；
还有seo搜索引擎相关的关键字及描述信息，如：
<meata name="Keywords" content="关键字信息">；
<meta name="Decription" content="网页描述"> -
<title>标题</title>设置网页标题，会显示在网页标题栏； -
<body>内容</body>书写网页内容，浏览器展示其内容信息。
二、列表标签
-
无序列表标签：
<ul></ul>
示例：<ul> <li>牛奶</li> <li>面包</li> <li>鸡蛋</li> </ul>效果：
属性：
type属性(H5中已废弃)，设置列表前导符号样式：
disc：默认值，实心圆；
circle：空心圆；
square：实心方块 -
有序列表标签：
<ol></ol>
示例：<ul> <li>牛奶</li> <li>面包</li> <li>鸡蛋</li> </ul>效果：
属性：
1）type属性(H5中已废弃)，设置列表前导符号样式：
a：小写英文字母编号；
A：大写英文字母编号；
i：小写罗马数字编号；
I：大写罗马数字编号；
1：默认值，数字编号；
2）start属性，指定列表编号的起始值，且值为阿拉伯数字，必须是整数；
3）reversed属性，指定列表中的项目是否为倒序，无值。
注意：<ul></ul>，<ol></ol>内部必须是<li></li>标签；
<li></li>标签内还可以嵌套<ul></ul>，<ol></ol>标签；
<li></li>标签不能单独使用。 -
定义列表标签：
<dl></dl>
子元素只能是 ：<dt></dt>，<dd></dd>
<dt></dt>：定义列表中的项目；
<dd></dd>：定义列表项目的描述；
示例：<h1>前端技术简介</h1> <dl> <dt>HTML</dt> <dd>超文本标记语言</dd> <dt>CSS</dt> <dd>层叠样式表</dd> <dt>Javascript</dt> <dd>js交互</dd> </dl>效果：
三、多媒体标签
- 图片标签：
<img src="图片地址" alt="" />
src：填写图片对应的地址
alt：图片缺失时，显示的提示文字
属性：
width，height设置图片的宽高，单位时像素，书写时可以忽略单位，亦可以只写width属性， 自动缩放
格式支持：bmp、gif、jpg、png、svg、webp。 - 音频标签：
<audio src="音频地址"></audio>
属性：
controls：显示播放器控件；
look：是否循环播放；
autoplay：是否自动播放；
格式支持：mp3、ogg。 - 视频标签：
<video src="视频地址"></video>
属性：
controls：显示播放器控件；
look：是否循环播放；
autoplay：是否自动播放；
格式支持：mp4、ogv、webm。
四、超链接
- 超链接文本：
<a href="地址" ></a>
属性：
href：跳转后的地址；
title：鼠标悬停显示的文本；
target：是否打开新标签页
1）_blank新页面打开链接
2）_self当前页面打开链接
3）_top整个窗口打开新链接
4）_paraent在父页面打开链接
五、字体标签
<h1>主题</h1>主题标签（h1~h6），逐层减小；<b>加粗</b>字体粗体;<strong></strong>粗体字(强调);<i>倾斜</i>字体倾斜；<em>倾斜</em>斜体字(强调)；<br>换行;<p></p>段落；<hr>分割线。
六、表单标签
<form action=""></form>
属性：
action：设置接收提交地址；
method: 提交请求类型<input>文本标签
属性：
value：文本框的值；
placeholder：文本框提示文本；
disabled：文本框禁止交互；
type: 根据值设置对应类型的文本框
1）text默认值，文本输入框；
2）password密码输入框；
3）radio单选框；
4）checkbox复选框；
5）color颜色选择控件；
6）date日期选择控件；
7）time时间选择控件；
8）number数字输入控件；可以通过min、max控制最大最小值
9）email电子邮件输入控件；
10）file文件选择控件；
11）range拖拽条；
12）search搜索框；
13）url地址输入控件；
14）button普通按钮，等同于<button></button>；
15）submit提交按钮；
16）reset重置按钮。<select name="" id=""></select>下拉列表
<option></optin>标签为内部选项
selected为默认选中<textarea name="" id="" cols="30" rows="10"></textarea>多行文本框
属性：
clos行数；
rows列数
七、表格标签
<table></table>表格
内部含有标签<tr><th></th><td></td></tr>；
属性：
1）border边框；
2）width宽；<tr></tr>表格行数<td></td>表格列数<th></th>表格内小主题名
属性：
1）colspan横向合并单元格；
2）rolspan纵向合并单元格<caption></caption>表格主题名<thead></thead>定义表格表头<tbody></tbodey>定义表格核心内容<tfoot></tfoot>定义表格表脚，通常作为汇总行
属性：
1）cellpadding定义两个单元格之间的大小
2）cellspacing表格单元格内容和边框之间的空距
先整理到这里，后续再添加～～～
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
