HTML结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
内容
</body>
</html>

布局标签

<nav>导航</nav>
<header>
头部区域
</header>
<section>
区块标签
</section>
<footer>
尾部区域
</footer>

figure 独立的流内容（图像、图表、照片、代码等等）。
article独立的文章内容
aside 侧边栏标签
div 块元素经常与 CSS 一起使用，用来布局网页

文本样式标签和转义字符

标题

<h1>1</h1>
	<h2>2</h1>
	<h3>3</h3>
	<h4>4</h4>
	<h5>5</h5>
	<h6>6</h6>

样式标签

<b>加粗</b>
<i>倾斜</i>
<s>删除线</s>
<u>下划线</u>
<font size=2>字体大小</font>
<font color="#fa8072">字体颜色</font>  
<hr> 水平线

格式化标签

<br/>         换行
<center> </center> 居中
<span></span> 行标签(没有换行) 
<kbd></kbd>   定义键盘码    
<p></p>       行标签(自带换行)
<pre></pre>   块标签不解析内容
<code></code> 行标签不解析内容   
<var></var>   定义变量

以上很多都是语义化的,需要自行定义样式

转义字符

<      &lt; 
>      &gt; 
空格   &nbsp; 
©     &copy; 
®     &reg; 
™     &trade;

列表标签和表格标签

列表

<!--无序列表-->
<ul>
    <li>a</li>
    <li>b</li>
</ul>
<!--有序列表-->
<ol>
    <li>a</li>
    <li>b</li>
</ol>
<!--自定义列表 没有圆点和需要-->
<dl>
    <dt>标题</dt>
    <dd>内容</dd>
    <dd>内容</dd>..
</dl>

表格

<!-- cellspacing属性是单元格之间的空隙 cellpadding属性是控制整个单元格的大小 border 是边框粗细 align="center" 居中 left左 right右 style="text-align: center" 字体居中 其他的就需要使用css来控制了 -->
<table cellspacing="0" style="text-align: center" border="1px" >
    <tr >
        <th>标题</th>
        <th>标题2</th>
    </tr>
    <tr>
        <td>1</td>
        <td >1</td>
    </tr>
    <tr>
        <td >1</td>
        <td>1</td>
    </tr>
</table>

表单标签

<form>     表单
<label>    聚焦
<input>    输入框
<select>   选择框(下拉框)
<textarea> 文本域

对表单更详细的介绍可以在我博客里找

内联框架标签

<iframe src=”地址” width=” ” height=”” ></iframe>
iframe常用属性:
1.frameborder:是否显示边框，1(yes),0(no)
2.height:框架作为一个普通元素的高度，建议在使用css设置。
3.width:框架作为一个普通元素的宽度，建议使用css设置。
4.name:框架的名称 
5.scrolling:框架的是否滚动。yes,no,auto。
6.src：连接页面的地址，可以使用本地址，也可以使用网络地址。
7.srcdoc , 用来替代原来HTML body里面的内容。但是IE不支持, 不过也没什么卵用
8.sandbox: 对iframe进行一些列限制，IE10+支持

简单来说就是在HTML内部在嵌套一个HTML

超链接和锚链接标签

超链接

<a href="https://home.firefoxchina.cn/">火狐</a>

_blank：另起一个窗口打开新网页；
_self：在当前窗口打开新的网页链接（默认）;
_parent：在iframe框架中使用，平时等同于_self ；
_top：等同于_self；
alt 图片加载失败显示
title 鼠标悬浮提示

说明：a标签除了href属性和target="_blank"属性这两个常用属性外，还有很多属性，比如：download、name、rel等等属性。不常用就不介绍了，有兴趣的朋友可以自行研究一下。

锚链接

什么是锚链接 ?

锚链接就是点击超链接跳转到指定位置

在简单来说就跟目录一样目录显示第2页 22行那么我就跳转到第二页22行

1.在本页面跳转

通过 href=/#xx 找到对应 <a id=xx 位置或者name=xxx

方法一.在本页面 定位准确 跳转
     [<a href="#reg"> 新用户注册帮助</a>]<br>
     [<a href="#du"> 用户登录帮助</a>]<br>
        <div style="width:100px;height: 500px;border: salmon solid 1px"> </div>
<h2><a id="reg">新用户注册</a></h2>
        <div style="width:100px;height: 500px;border: salmon solid 1px"> </div>
<h2><a id="du">用户登录</a></h2>
        <div style="width:100px;height: 500px;border: salmon solid 1px"> </div>

可以试试感觉

2.跳转到其他页面指定位置

index.html

[<a href="index_a.html#reg" target="_blank" > 新用户注册帮助</a>]<br>
     [<a href="index_a.html#du" > 用户登录帮助</a>]<br>

index_a.html

<div style="width:100px;height: 500px;border: salmon solid 1px"> </div>
<h2><a id="reg">新用户注册</a></h2>
		<div style="width:100px;height: 500px;border: salmon solid 1px"> </div>
<h2><a id="du">用户登录</a></h2>
		<div style="width:100px;height: 500px;border: salmon solid 1px"> </div>

可以试试感觉

3.跳转内联框架指定位置

通过 target页面跳转到指定name的内联框架中的锚链接

index.html

[<a href="index_a.html#reg" target="if_a" > 新用户注册帮助</a>]<br>
     [<a href="index_a.html#du" target="if_a"> 用户登录帮助</a>]<br>
<iframe name="if_a" src="index_a.html" width="700px" height="500px" ></iframe>

index_a.html

<div style="width:100px;height: 500px;border: salmon solid 1px"> </div>
<h2><a id="reg">新用户注册</a></h2>
<div style="width:100px;height: 500px;border: salmon solid 1px"> </div>
<h2><a id="du">用户登录</a></h2>
<div style="width:100px;height: 500px;border: salmon solid 1px"> </div>

可以试试感觉

图片音频视频标签

图片

<img src=”图片地址” alt=”图片不显示时候的提示语句” title=”鼠标悬停提示文字” width=”图片宽px” height=”图片高px”/>
如果宽高不写就默认原图片大小
img 的其他属性:   
hspace 和 vspace 属性可以设置图像周围的空间。   类似于设置外边距效果
hspace:左边和右边的文字与图像之间的间距  单位像素(px)
vspace:上面的下面的文字与图像之间的距离  单位像素(px)
align 属性定义了图像相对于周围元素的水平和垂直对齐方式。
align的值:left(左)、right(右)、top(上) 、middle(中) 和 bottom(下)。
left 和 right 值会把图像周围与其相连的文本转移到相应的边界中；
其余的三个值将图像与其相邻的文字在垂直方向上对齐

视频

controls提供播放暂停音量控制  必须有
autoplay 自动播放。 (一般不要设置 会增加页面的加载速度) 有的游览器会拦截
preload  视频在页面加载时进行加载，并预备播放。
	如果使用 "autoplay"，则忽略属性。属性值
	auto - 当页面加载后载入整个音频
	meta - 当页面加载后只载入元数据
	none - 当页面加载后不载入音频
    
(一般不要设置 会增加页面的加载速度)
loop   媒介文件完成播放后再次开始播放     重复播放
width=”宽度”  height=”高度”
muted   视频的音频应该被静音
<video width="320" height="240" controls >
    <source src="img/1.mp4" type="video/mp4">
    您的浏览器不支持 video 属性。
</video>
游览器的不同 显示的 视频 播放按钮的样式也是不同的
source支持写多个    游览器 从上到下 识别最适合他的  视频类型

音频

controls   向用户显示控件，比如播放按钮。
autoplay   自动播放。 (一般不要设置 会增加页面的加载速度) 有的游览器会拦截
loop     每当音频结束时重新开始播放   
preload  音频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。  属性值
	auto - 当页面加载后载入整个音频
	meta - 当页面加载后只载入元数据
	none - 当页面加载后不载入音频
	(一般不要设置 会增加页面的加载速度)
<audio controls autoplay loop>
    <source src="img/无羁.mp3" type="audio/mp3" >
    游览器不支持此播放器
</audio>
游览器的不同 显示的 视频 播放按钮的样式也是不同的
source支持写多个    游览器 从上到下 识别最适合他的  音频类型

视频和音频的js事件

play()播放

pause()暂停

load()重新加载

document.getElementsByTagName("audio")[0].play();

HTML常用标签大全

HTML结构

布局标签

文本样式标签和转义字符

列表标签和表格标签

表单标签

内联框架标签

超链接和锚链接标签

图片音频视频标签

相关文章

热门标签

最新文章

目录