【记录】 HTML

鱿鱼子吃泡面

已于 2022-03-03 15:19:05 修改

阅读量478

点赞数

分类专栏：前端文章标签：前端 html

于 2022-01-21 11:45:22 首次发布

本文链接：https://blog.csdn.net/Youkirrr_/article/details/122618172

版权

前端专栏收录该内容

20 篇文章 0 订阅

订阅专栏

HTML

Hypertext Markup Language
超文本标记语言

【文档声明】

HTML5的文档声明<!doctype html>

不写文档声明，会导致浏览器进入怪异模式Quirks Mode，解析页面时会产生一些不可预期的行为，导致页面无法正常显示。

【head】

（1）title

（2）meta

<meta/>

自结束标签。
设置网页的元数据。
设置charset：<meta charset="utf-8"/>
设置关键字：<meta name="keywords" content="html5, 前端"/>
设置描述：<meta name="description" content="啥呀啥呀"/>
请求重定向：<meta http-equiv="refresh" content="5s;url=httpbaidu.com"/>

（3）style

内部样式<style type="text/css"> </style>

内联样式<div style=""></div>

外联样式<link rel="stylesheet" type="text/css" href="url"/>

【框架集】

<frameset row="30%, *, 30%">
	<frame src=""/>
</frameset>

使用框架集就不能再使用body标签。
frameset中还能再套frameset。

（1）row=“30%, *, 30%”：框架集中的框架一行一行排列，*表示剩余的给中间。
（2）cols=“50%, 50%”：框架集中的框架一列一列排列。
以上两个属性必须选择一个，并指出每一部分所占的比例大小。

【body】

注释


页面上看不见，源码看得见。
不能套娃。

标题

<h1></h1>
块元素。
h1最大，h6最小。
一般只用h1、h2、h3。

p

<p></p>
块元素。
每个p标签独占一段，段与段之间会有间隙。
不能包含任何块元素！！！！

div

<div></div>
块元素。
每个div元素独占一行。

span

<span></span>
内联（行内）元素。
每个span元素只占自身大小。

img

<img src="" alt=''' width="" height=""/>
内联元素。

src
当前目录下./：可以省略。
当前目录的父目录下…/：返回几级就写几个…/。
alt
图片不能显示时的图片描述。
width
height
一般使用px作为单位；只设置width和height其中一个时，会等比例缩放。

audio

<audio src="" controls autoplay loop></audio>

controls
未加该属性，默认用户不能自己控制播放停止。
autoplay
控制音频是否自动播放。
大部分浏览器不支持。
loop

<audio controls> 对不起，您使用的浏览器暂不支持该音频的播放。<source src=""> </audio>
使用该写法，音频不支持播放时会显示文字。
指定多个source和font-family类似，第一个不行换第二个。

ie8及以下不支持。解决方法：

<!-- 所有浏览器都支持 -->
<embed src="" type="audio/mp3" width="300" height="100">

<!-- 终极完美写法 -->
<audio controls>
	<source src="">
	<embed src="" type="audio/mp3" width="300" height="100">
</audio>

video

和audio基本相同，ie8不支持则使用embed标签。

ifame

<iframe></iframe>
内联框架。
内联元素。

src
width
height
name

a

<a></a>
超链接。
内联元素。
可以包含任何元素，除了它本身。

id
页面唯一性
href
（1）目的地址
（2）#：占位符/伪链接；回到顶部。
（3）#id
（4）mailto:邮箱地址：打开系统默认电子邮件系统，收件人为该邮箱地址。
target
规定在何处打开。
（1）_self：默认，在当前窗口打开（覆盖）。
（2）_blank：在新窗口打开。
（3）name（内联框架的名字）：在内联框架中打开。

list

块元素。
无序列表

<ul></ul>
type
（1）disc：默认，实心圆点。
（2）square：实心方块。
（3）circle：空心圆。

有序列表

<ol></ol>
type
（1）1：1.
（2）a：a.
（3）A：A.
（4）i：i.
（5）I：I.

列表项
<li></li>
定义列表
<dl> <dt>被定义的内容</dt> <dd>对定义内容的描述</dd> </dl>

通过css去除列表项前面的符号ul{ list-style: none; }

table

<table>
	<thead></thead>
	<tfoot></tfoot>
	<tbody></tbody>
	
	<tr>
		<th>表格头</th>
		<td>表格项</td>
	</tr>
</table>

在创建table时，如果只有tr没有tbody，会自动添加tbody并将tr放在tbody中。

form

<form action="index.html">
	<!-- for属性实现：点label就可以选中name为usrname的输入框。 -->
	<label for="usrname"></label>
	<!-- 输入框；
		value属性显示为文本框默认值。
		autocomplete="off" 关闭自动补全。可以用在form上。
		readonly 将表单项设为只读，数据会提交。
		disabled 将表单项设为禁读，数据不会提交。
		autofocus 设置表单项自动获取焦点。
	-->
	<input id="usrname" type="text" name="usrname" value="aaa"/>
	
	<textarea name="info"></textare>
	
	<input type="button"/>
	<!-- 提交按钮；
		提交后用户填写的信息会附在url地址后面以查询字符串的形式发送给服务器，如：url?val=111；
		value属性显示为按钮上的文字。
	-->
	<input type="submit" value="提交"/>
	<input type="reset"/>

	<!-- 更推荐使用这组按钮，使用更灵活，可以插入图片。 -->
	<button type="button">按钮</button>
	<button type="submit">提交</button>
	<button type="reset">重置</button>

	<input type="password" name="psw"/>
	
	<!-- 选取颜色；ie不支持 -->
	<input type="color"/>
	
	<!-- 单选框；
		同一组name相同；
		checked="checked"则该选项为默认值。 
	-->
	<input type="radio" name="gender" value="female"/>

	<!-- 多选框；
		同一组name相同；
		checked="checked"则该选项为默认值。 
	-->
	<input type="checkbox" name="hobby" value="football"/>

	<!-- 下拉列表；
		multiple="multiple"则可以多选；
		checked="checked"则该选项为默认值。
	-->
	<select name="drink">
		<optgroup label="茶">
			<option value="milktea">奶茶</option>
		</optgroup>
	</select>

	<!-- 表单项也可以分组。  -->
	<fieldset>
		<legend>组名</legend>
	</fieldset>
</form>

center

<center></center>
center标签中的内容，会默认在页面中居中显示。

br

换行。
xhtml <br/>
html <br>

hr

<hr/>
生成水平线。

em

<em></em>
语气强调（斜体）。

strong

<strong></strong>
内容强调（加粗）。

i

<i></i>
斜体。

b

<b></b>
加粗。

small

<small></small>
字体比父元素的字体要小。
一般用来写细则（合同中的小字，网站的版权声明）。

big

cite

<cite></cite>
一般用来引用书名、歌名、话剧名、电影名等（斜体）。

q

<q></q>
一般用来名言等短引用、行内引用（无法选中）。
内联元素。

blockquote

<blockquote></blockquote>
一般用来长引用、块级引用（单独一块）。

sup

<sup></sup>
设置上标。

sub

<sub></sub>
设置下标。

del

<del></del>
添加删除线。

ins

<ins></ins>
添加下划线，表示填入。

pre

<pre></pre>
预格式标签，保存代码中的格式，不会忽略多个空格。

code

<code></code>
表示代码块。
不会保存格式，一般和pre标签一起使用。<pre> <code></code> </pre>

title属性

当鼠标移入元素时，元素的title属性值作为提示文字显示。
可以给任何标签指定。

语义化标签

header
main：每个网页只能有一个
footer
nav
aside
article
section：上面的标签都不能表示时就用section

script

一般在body标签的最后引入外部的js文件。
<script type="text/javascript" src=""></script>

html

html中，字符之间写再多的空格/换行都会被当做一个空格解析。
html中，不区分大小写，一般都是使用小写。

网页

结构：HTML
表现：CSS
行为：JavaScript

字符集

ASCII

美国。
7位。

ISO-8859-1

欧洲。
8位。

GBK
GB2312

中文系统的默认编码。

UTF-8

万国码

ANSI

根据系统的默认编码来保存。

实体（转义字符串）

html中，某些特殊符号是不能直接使用的，如<和>。
语法

&实体名称;
&#实体编号;

例子

<表示<
>表示>
 表示空格（no break space）
©表示版权符号©

图片

JPEG

支持的颜色较多，可以压缩，不支持透明。

JPG
GIF

支持的颜色少，只支持简单的透明（直线边），支持动态图。

PNG

支持的颜色多，支持复杂的透明

webp

谷歌新推出的专门用来表示网页中的图片的一种格式。
具有其他图片格式的所有优点。
兼容性不佳。

base64

将图片使用base64进行编码。
直接把base64编码粘到src里就可以使用。
一般需要和网页一起加载的图片才会使用base64。