HTML 学习

一、基本标签

VSCode 默认快捷键
!
自动生成代码片段

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

1.1 文档声明 Doctype

< !docType html >

1.2 html标签对 html

其中lang=“zh-CN” 表示中文

1.3 head页头

head里标签	解释
title	标题
meta	为搜索引擎提供信息
link	引入外部css文件,js文件和设置logo rel=“stylesheet” type=“text/css” href=“mystyle.css”
style	css样式
script	js代码

meta中的

name

属性

属性值name	说明content
keywords	网页的关键字(可多个)
description	网页的描述
author	网页的作者
copyright	版权信息
viewport	网页视口大小比例

meta中的

http-equiv

属性

<!--定义网页所使用的编码-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<!--简写 （中文编码）-->
<meta charset="utf-8" />

定义网页自动刷新跳转

<!--表示当前页面6秒后跳转百度页面-->
<meta  http-equiv="refresh" content="6;url=http://www.baidu.com"/>
<!--30秒刷新当前页面-->
<meta http-equiv="refresh" content="30">

1.4 bod页身

注释快捷键 ctrl+/

二、文本 text

2.1 基本标签 (Basic Tags)

标签	说明
h	标题1~6
p	段落（段落与段落有一定间距）paragraph 会自动换行
br	换行（不会有间距）
hr	水平线
div	盒子标签（一行只能放一个大盒子）（小程序view）
span	盒子标签（一行可以放多个小盒子）

2.2 文本格式化（Formatting）

标签	说明
strong	粗体
em	斜体
sup、sub	上标和下标
s、u	中划线和下划线
big、small	大字号和小字号

标签可分为为一般标签和自闭标签

< meta /> 、< link/> 、< br />、< hr />、< img />、< input />

也可以分为块元素和行内元素

块元素（block）：独占一行，可容纳块元素和行内元素如div

行内元素（inline）：可同一行，不可容纳块元素，如span

2.3 特殊符号

空格符 &nbsp；(记住即可) 牛逼色胚

易输入的

特殊符号	说明	代码;
`"`	双引号（英文）	&quot
`‘`	左单引号	&lsquo
`’`	右单引号	&rsquo
`×`	乘号	&times
`÷`	除号	&divide
`>`	大于号	&gt
`<`	小于号	&lt
`&`	“与”符号	&amp
`—`	长破折号	&mdash
\|	竖线	&#124

难输入的

特殊符号	说明	代码;
`§`	分节符	&sect
`©`	版权符	&copy
`®`	注册商标	&reg
`™`	商标	&trade
`€`	欧元	&euro
`£`	英镑	&pound
`¥`	日元	&yen
`°`	度	&deg

三、列表 list

标签	说明
有序 ol (ordered list)	有顺序，只能包含li
无序 ul (unordered list)	无顺序，只能包含li
定义 dl (definition list)	dt用于添加要解释的名词，而dd用于添加该名词的具体解释。

HTML的精髓就在于标签的语义，要语义化

四、表格 table

<table alian=center border="1" cellpadding="10" cellspacing="0" width="300">
	<caption>考试成绩表</caption>
    <thead>    
    	<tr>
        	<th>姓名</th><th>语文</th><th>英语</th>
        </tr>
     </thead>
     <tbody>
     	<tr>
        	<td>小明</td><td>80</td><td>80</td>
        </tr>
        <tr>
        	<td>小红</td><td>90</td><td>90</td>
        </tr>
        <tr>
        	<td>小杰</td><td>100</td><td>100</td>
        </tr>
      </tbody>
      <tfoot>
      	<tr>
        	<td>平均</td><td>90</td><td>90</td>
        </tr>
      </tfoot>
    </table>

标题：caption

表头：th

表行：tr

单元格：td

用标签表示表格的头部区域，位于第一行
用标签表示表格的主体区域，主要是用于放数据本体
用位于最下行

4.1 表格属性

属性名	属性值	描述
align	left,center,right	规定表格相对周围元素的对齐方式
border	1或者” ”	规定表格单元是否拥有边框，默认为” “，表示没有边框
cellpadding	像素值	规定单元边沿于其内容之间的空白，默认1像素
cellspacing	像素值	规定单元格之间的空白，默认2像素
width	像素值或百分比	规定表格的宽度

4.2 合并表格

合并行：rowspan=“合并单元格的个数”
合并列：colspan=“合并单元格的个数”

五、图片 img

<img src="" alt="" />

绝对路径
相对路径

位图 jpg、png、gif

矢量图

六、超链接 link

<a href="链接地址" target="打开方式">文本或图片</a>

_self 在原来窗口打开(默认值)
_blank 在新窗口打开

跳转外部链接

跳转内部链接

跳转锚点链接

<a id="tips">提示部分</a>
<a href="#tips">跳到提示部分</a>

七、表单 form

<form action="url地址" method="提交方式" name="表单域的名称">
 
</form>

form属性

属性	说明
name	表单名称（以区分同页面多个表单）
method	提交方式（get或post）
action	提交地址（url地址）
target	打开方式（_blank）
anctype	编码方式（一般用于上传文件功能）

<input type="表单类型" />

type的属性值	说明
text	单行文本框
password	密码文本框
radio	单选框
checkbox	多选框
button、submit、reset	按钮
file	文件上传

7.1 单行文本框

<input type="text" value="单行文本框" size="50" maxlength="10"/>

value：值
size：长度
maxlength：最多可输入的字符数

7.2 密码文本框

<input type="password" />

与单行文本框相同，有value、size、maxlength

7.3 单选框

<input type="radio" name="gender" value="男" checked />男
<input type="radio" name="gender" value="女" />女

7.4 复选框

<input type="checkbox" name="fruit" value="苹果"/>苹果
<input type="checkbox" name="fruit" value="香蕉" checked/>香蕉
<input type="checkbox" name="fruit" value="西瓜"/>西瓜

7.5 按钮

<input type="button" value="普通按钮" />
<input type="submit" value="提交按钮"/>
<input type="reset" value="重置按钮" />
<button>按钮</button>

7.6 文件上传

<input type="file"/>

7.7 多行文本框

<textarea rows="行数" cols="列数" value="取值">默认内容</textarea>

7.8 下拉列表

<select>
    <option>选项内容</option>
    ……
    <option>选项内容</option>
</select>

select属性

属性	说明
multiple	设置下拉列表可以选择多项
size	设置下拉列表显示几个列表项，取值为整数

option属性

<option value="内容" selected>内容</option>

7.9文本标签lable

lable标签for属性与id属性相同

<lable for="sex"> 男 </lable>

八、框架 iframe

<iframe src="链接地址" width="数值" height="数值"></iframe>

<iframe src="https://www.itnanls.cn"></iframe>

九、HTML5

color

<input type="color" name="favcolor">

date

<input type="date" name="bday">

datetime

<input type="datetime" name="bdaytime">

datetime-local

<input type="datetime-local" name="bdaytime">

<input type="email" name="email">

month

<input type="month" name="bdaymonth">

number

<input type="number" name="quantity" min="1" max="5">

属性	说明
disabled	禁用
max	最大值
maxlength	最大字符长度
min	最小值
pattern	验证输入字段模式
readonly	输入值无法修改
required	输入值无法修改
size	输入字段可见字符数
step	输入数字间隔
value	输入字段默认值

range

<input type="range" name="points" min="1" max="10">

<input type="search" name="googlesearch">

tel

<input type="tel" name="usrtel">

time

<input type="time" name="usr_time">

url

<input type="url" name="homepage">

新属性

属性值	说明
autocomplete	自动提示以输入过的内容
autofocus	自动获取焦点
height、width	长、宽
min、max	小、大
pattern	正则
placeholder	提示
required	必须

HTML5图像

< canvas >
< svg >

原文链接：https://blog.csdn.net/Linlietao0587/article/details/129659221