HTML基础知识：标签、结构与新特性详解,-CSDN博客

html

标题标签：h1-h6

<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>

段落标签

<p></p>

换行标签：

<br/>

文本格式化标签

粗体 <strong></strong>、<b></b>
斜体 <em></em>、<i></i>
删除线 <del></del>、<s></s>
下划线 <ins></ins>、<u></u>

div和span标签

<div></div>
<span></span>

图片标签

 <img src="" alt="替换文本" title="提示文本" width="200" height="200" border="10"/>

属性	属性值	说明
src	图片路径	必须属性
alt	文本	替换文本。图像不能显示的文字
title	文本	提示文本。鼠标放到图像上，显示的文字
width	像素	设置图像的宽度
height	像素	设置图像的高度
border	像素	设置图像的边框粗细

路径

目录文件夹（普通文件夹）和根目录（打开目录文件夹的第一层）

相对路径

同一级路径直接填入文件名字；例如： src=“1.jpg”
下一级路径 /；
上一级路径 …/；其中…/表示跳出当前文件夹

绝对路径

指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径。

超链接标签 anchor

<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>

属性	作用
href	用于指定链接目标的url地址，必须
target	用于指定链接页面打开的方式，_self为默认值，_blank为新窗口打开

链接类型：外部链接、内部链接、空连接#、下载链接

锚点链接 #id名

注释标签和特殊字符

```

```
特殊字符

特殊字符	字符代码
空格符	&nbsp
小于号	&lt
大于号	&gt
和号	&amp
版权	&copy
注册商标	&reg

表格标签

<table>
    <thead>
        <tr>
            <th>表头单元格</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>普通单元格</td>
        </tr>
    </tbody>	
</table>

 表格属性：align、border、cellpadding、cellspacing、width、height。
 表格结构标签 <thead></thead>、<tbody></tbody>
 合并单元格
    跨行合并：rowspan="合并单元格的个数"
    跨行合并：colspan="合并单元格的个数"

列表标签

无序列表

<ul>
	<li></li>
	<li></li>
	<li></li>
</ul>

有序列表

<ol>
	<li></li>
	<li></li>
	<li></li>
</ol>

自定义列表

<dl>
    <dt>关注我们</dt>
    <dd>新浪微博</dd>
    <dd>官方微信</dd>
</dl>

表单标签

<form action="" method="" >
<!-- input输入表单元素-->
	<!-- type="属性值": text,password,radio,button,checkbox，file,hidden,image,reset,submit,text-->
	<label for="text">用户名</label><input type="text" name="username" value="请输入用户名" maxlength="6" id="text"></input>
	<input type="password" name="password" value="请输入密码" maxlength="6"></input>
	<!--单选按钮-->
	<input type="radio" name="sex" value="男" checked="checked"></input>
	<input type="radio" name="sex" value="女" ></input>
	<!--复选框-->
	<input type="checkbox" name="hobby" value="吃饭" id="nan"><label for="nan">男</label></input>
	<input type="checkbox" name="hobby" value="睡觉" checked="checked"></input>
	<input type="checkbox" name="hobby" value="打豆豆" ></input>
	<!--文件域-->
	上传文件：<input type="file"></input>
    <input type="file"></input>
    <input type="button" value="发送短信验证码"></input>
    <input type="reset" value="点击提交"></input>
	<input type="submit" value="点击提交"></input>
<!-- 下拉表单元素-->
	<select>
         <option selected="selected">河北</option>
         <option>天津</option>
         <option>北京</option>
	</select>
<!-- textarea文本域表单元素-->
	<!-- cols:每行多少字符，rows:几行-->
	<textarea cols="50" rows="4"></textarea>
</form>

注：学会查阅文档推荐网址

百度、W3school（https://www.w3school.com.cn/）、MDN（https://developer.mozilla.org/zh-CN）

HTML5的新特性

新增的语义化标签

<header></header>
<nav></nav>
<article></article>
<section></section>
<aside></aside>
<footer></footer>

video视频标签：支持mp4、webM、Ogg格式，尽量使用mp4格式

属性	值	描述
autoplay	autoplay	视频就绪自动播放（谷歌浏览器需要添加muted来解决自动播放问题）
controls	controls	向用户显示播放控件
width	pixels	设置播放器宽度
height	pixels	设置播放器高度
loop	loop	循环播放
preload	auto(预先加载视频) none(不应加载视频)	规定是否预加载视频，如果有了autoplay,就忽略该属性
src	url	视频url地址
poster	imgurl	封面图片
muted	muted	静音播放

audio音频标签：支持mp3、wav、ogg格式

常见属性：autoplay、controls、loop、src。用法与video标签一致

input表单

属性值：email、url、date、time、month、week、number、tel、search、color
新增的表单属性
required（必填）
placeholder（提示信息）
autofocus（自动聚焦属性）
autocomplete（需要与name一起使用，值为off或者on）
multiple（可以多选文件提交）