HTML

结构

<!doctype html>		html5的文档声明（不区分大小写）
<html>根标签（根元素）
	<head>
        meta标签设置网页的元数据
        <meta charset="utf-8">	用charset设置网页的字符集
        <meta name="keywords" content="网上购物,网上商城,手机">	设置关键字
        <meta name="description" content="这是一个不错的网站">	设置页面描述
        <meta http-equiv="refresh" content="3;url=https://www.baidu.com">	3秒钟之后跳转到指定网站
        <title>标题</title>	该内容会作为搜索结果的超链接上的文字
        <link rel="icon" href="./favicon.ico">	网站图标
    </head>
    <body>
        
        <!--
			注释
		-->
       
        <img>或<img />		自结束标签
        <input>或<input />	自结束标签
        
        这是我的<font color="red" size='5'>第一个</font>网页		属性:写在开始标签或自结束标签里，空格隔开，名=值，值写在引号里（双引号或单引号都可以）
        
        实体（转义字符）（参见w3school.com）
        	&nbsp;	空格
        	&gt;	>
        	&lt;	<
    </body>
</html>

标签

<h1>一级标题</h1>
<h2>二级标题</h2>
<!-- 
	h1~h6 共6级标题；h1的重要性仅次于title，一般情况下h1只有一个；一般只会用到h1~h3
	标题标签是块元素（block element，独占一行）
-->

<hgroup>
	<h1>回乡偶书二首</h1>
	<h2>其一</h2>
</hgroup>
<!--
	hgroup标签用来为标签分组，可以将一组相关的标题放到hgroup中
-->

<p></p>
<!--
	p标签表示一个段落，是块元素
-->

<em></em>
今天天气<em>真</em>好！
<!--
	em标签用于表示语音语调的一个加重
	是行内元素（inline element，不会独占一行）
-->

<strong></strong>
你今天必须要<strong>完成作业</strong>
<!--
	strong标签表示强调重要内容
-->

<blockquote>
    世上本没有路，走的人多了，也便成了路。
</blockquote>
<!--
	blockquote表示长引用
-->

<q>学而时习之</q>
<!--
	q表示短引用
-->

<br>	<!--换行-->


布局标签（结构化语义标签）（一般可以嵌套）

<header></header>	头部
<main></main>		主体部分（一个页面中只有一个main）
<footer></footer>	底部
<nav></nav>			导航（栏）
<aside></aside>		和主题相关的其它内容（侧边栏）
<article></article>	一个独立的文章
<section></section>	独立的区块，以上不能用时用section

<div></div>			表示一个区块，可以代替上述
<span></span>		表示一个行内元素，一般用于在网页中选中文字

块元素和行内元素

<!--
块元素：进行网页布局
行内元素：用来包裹文字
	
	一般会在块元素中放行内元素，但不会在行内元素中放块元素；块元素中几乎什么都能放
	p元素中不能放任何块元素

浏览器在解析网页时，会自动对网页中不符合规范的内容进行修正
-->

列表

<!--无序列表-->
<ul>
    <li>aaa</li>
    <li>bbb</li>
    <li>ccc</li>
</ul>
<!--有序列表-->
<ol>
    <li></li>
    <li></li>
</ol>
<!--定义列表-->
<dl>
    <dt>结构</dt>
    <dd>结构规定哪里是标题</dd>
    <dd>结构规定哪里是段落</dd>
    <dt>xx</dt>
    <dd></dd>
    ......
</dl>

超链接

<a>名字</a>

行内元素，可以嵌套除它自身以外的任何元素

href属性：跳转到一个外部网站的地址或内部页面的地址
	<a href="https://www.baidu.com"></a>	跳转到外部网址
	<a href="./09.列表"></a>				跳转到内部网页
	<a href="#"></a>					跳转到页面顶部
	<a href="#id名"></a>					跳转到id所在位置
	<a href="javascript:;"></a>			什么都不发生

相对路径
./			当前文件所在目录（如果什么都不写，默认为./）
../			当前文件所在目录的上一级目录
例：<a href="../outer/taget.html">超链接</a>
../../		上上一级，以此类推

target属性：
	<a href="" target="_self"></a>		默认属性，在当前页面打开超链接
	<a href="" target="_blank"></a>		在一个新的页面中打开超链接

id属性（所有标签都有，唯一的）：
如：<p id="p1"></p>	<a id="abc"></a>

图片标签

<img src="" alt="" width="" height="">	自结束
属性
src：路径（同超链接）
alt：图片描述，默认情况下不会显示，有些浏览器会在图片无法加载时显示；搜索引擎会根据alt中的内容识别图片，不写则不会被识别
width：宽度 height：高度（像素）
	如果宽度和高度只修改一个，则另一个会等比例缩放；一般在pc端不建议修改图片大小；移动端经常缩放（大图缩小）

图片格式
jpg（jpeg）：颜色丰富，不支持透明，不支持动图；一般用来显示照片
gif：支持的颜色比较少，支持简单透明，支持动图；一般用于颜色单一的图片，动图
png：支持颜色丰富，支持复杂透明，不支持动图；一般用于颜色丰富，复杂透明图片
webp：具备其他图片格式的所有优点，且文件小，但兼容性不好
base64：将图片使用base64编码，这样可以将图片转换为字符，通过字符的形式来引入图片；一般是一些需要和网页一起加载的图片才会用（<img src="base64编码">）

内联框架

向当前网页引入一个其他页面
<iframe src="" width="" height="" frameborder=""></iframe>
src：网站路径
width,height：同图片标签
frameborder：边框。值为0：无边框；值为1：有边框（默认）

音视频

<audio src="" controls autoplay loop></audio>
src：路径
controls：是否允许用户控制（没有值；写controls就可以控制，不写就不能控制）
autoplay：是否自动播放音频（大部分浏览器不支持）
loop：是否循环播放

<!--写在auido标签内部，如果找到第一个有效音频文件就直接使用，第一个不行就继续找第二个……
如果能使用音频就不会显示auido标签内部的文字。如果浏览器不支持auido标签就会忽略此标签，但文字可以正常显示-->
<auido>
	对不起您的浏览器不支持播放音频，请升级浏览器！
    <source src="./文件1.mp3">
    <source src="./文件2.ogg">
</auido>

<!--使所有浏览器都支持（同理，如果当前音频可用就会忽略这之后的音频）-->
<auido>
    <source src="./文件1.mp3">
    <source src="./文件2.ogg">
    <embed src="./文件1.mp3" type="audio/mp3" width="200" height="50">
	<!--
	enbed标签：type表示文件类型，audio表示音频，mp3表示具体类型；必须指定宽高，不然会很小；音视频会自动播放
	-->
</auido>
视频同理
<video>
    <source src="./文件1.webm">
    <source src="./文件2.mp4">
    <embed src="./文件1.mp4" type="video/mp4" width="200" height="50">
</video>

引用其他网站的音视频
<iframe src="//player.bilibili.com/player.html?aid=77217003&bvid=BV1XJ411X7Ud&cid=132017557&page=26" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" height="XXX" width="XXX"></iframe>

表格

<table border="1">
    <tr>
        <!-- 所占行数 -->
        <td rowspan="2">A1</td>
        <td>A2</td>
        <td>A3</td>
    </tr>
    <tr>
        <!-- 所占列数 -->
        <td colspan="2">B2</td>
    </tr>
</table>
<!-- thead,tbody,tfoot写的顺序不影响表格中的顺序 -->
<table border="1">
    <thead>
        <th></th>	<!-- 表头的每一项可以用th -->
    </thead>
    <tbody>
        <tr>
        	<td></td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
        	<td></td>
        </tr>
    </tfoot>
</table>

表单

<form action="target.html">
    <input type="text" name="user">
    <input type="password" name="password">
    <input type="submit" value="注册">
    <input type="reset">
    <input type="button" value="按钮">

    <!-- 和上面的按钮功能一样 -->
    <button type="button">按钮</button>
    <button type="reset">重置</button>
    <button type="submit">提交</button>

    <input type="radio" name="hello" value="a">
    <input type="radio" name="hello" value="b" checked>

    <input type="checkbox" name="test" value="1">
    <input type="checkbox" name="test" value="2">
    <input type="checkbox" name="test" value="3" checked>

    <select name="hello">
        <option value="a">选项一</option>
        <option value="b">选项二</option>
        <option value="c" selected>选项三</option>
    </select>
</form>
<!-- autocomplete="off" 关闭自动补全 -->
<form action="target.html" autocomplete="off">
<input type="text" name="user" autocomplete="off">
    
readonly 	只读（会提交数据）
disable		禁用（不会提交数据）
autofocus	z
前端技术
#前端
HTML
https://shuusui.site/blog/2021/07/02/html/
作者
Shuusui
发布于
2021年7月2日
更新于
2021年7月2日
许可协议