HTML
- html：超文本标记语言（Hyper Text Markup Language）（html结构）（css表现）（js行为）
<!DOCTYPE html>
<!-- 声明文档类型 让浏览器以html的格式解析 -->
<html lang="en">
<head>
<meta charset="utf-8">
<!-- char字符 set设置 设置字符集（编码格式为utf-8）用于解决乱码问题 -->
<meta name="description" content="介绍">
<!-- description 描述 用于描述网站，利用搜索引擎优化，提高网页排名-->
<meta name="keywords" content="关键词,6-8个">
<title>网页标题</title>
<link rel="icon" href="../iconfont.icon" type="image/x-con" />
<!-- 网页小logo 格式.icon 大小16*16px居多 -->
</head>
<body>
</body>
</html>
- HTML
- 图标
- 文件命名
- VScode快速生成HTML结构
- 运行html
- 注释
- 标签
- 标题标签
- 段落标签
- 加粗
- 文本倾斜
- 上标&下标
- 下划线
- 删除线
- 分割线
- 换行符
- 文字标签
- 小段文本
- div盒子
- 图片
- 无序列表
- 有序列表
- 自定义列表
- 超链接
- 表单
- 特殊字符
- 表格
- 浮动框架iframe
图标
-
Unicode是最原始的字体图标方式之一
（支持按字体方式调整大小和颜色，默认不支持多色）（设置图标大小失效可能原因是权重）
- 引入iconfont.css
- 写个标签，并给标签class="iconfont"
- 在标签里面写上unicode码（demo.html中复制）
-
font class是unicode的升级版，更直观知道图标的意思，使用最方便的方式
-
引入iconfont.css
-
给标签设置class名，其中一个类名固定为iconfont，另一个类名根据要显示的图标从demo.html中复制对应类名
-
<span class="iconfont icon-shouji">手机</span>
-
-
symbol方式
（支持多色图标了，不再受单色限制。
通过一些技巧，支持像字体那样，通过font-size, color 来调整样式。
兼容性较差，支持IE9+， 及现代浏览器。
浏览器渲染SVG 的性能一般， 还不如png。
未来可能会成为主流。）
-
引入js文件和css文件
-
<sVg class="icon" aria-hidden="true"><use xlink:href=" #icon-Xxx"></use> </svg> 修改里面的#icon-xxx
-
文件命名
- 小写英文开始，由字母,数字,$,-,_组成
- 可以用-和_连接
- 不得用空格，数字，汉字开头
VScode快速生成HTML结构
- html:5
- !+回车
运行html
- Alt+B
- Alt+O
注释
<--对代码解释说明，提高代码可读性，发布团队协作和后期可维护性，不会被浏览器解析-->
注释：<--内容-->
快捷键：CTRL+/
标签
标签=元素=标记=盒子=容器
单标签：
双标签：
<标签 属性="属性值" ></标签>（属性可以没有，也可以有多个）
双标签可以嵌套双标签 :
标题标签
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
- 取值范围1-6，数字越大字体越小
- 默认加粗效果和自动换行
- 注意：h1标签一个页面最多只使用一次用来装网页logo
段落标签
<p></p>
- 默认换行和行间距
- 快速复制文本到段落
-
按住alt键，选中每个p标签中间 -
复制段落（段落中间不用空白行） -
在p标签中粘贴
-
- 注意：复制段落必须和标签的个数相同才可以快速复制
加粗
<b></b>
<strong></strong>
文本倾斜
<i></i>
<em></em>
上标&下标
<sup></sup>
<sub></sub>
下划线
<u></u>
删除线
<del></del>
<s></s>
分割线
<hr>
<hr width='100px'size="20px" align="center" color='red' noshade='noshade'>
- width 宽度，可以是数值，也可以是百分比
- noshade 取消阴影，可以只写noshade
- align 水平对齐方式：center，left，right
- size 厚度，单位可带可不带
换行符
<br>
文字标签
<font></font>
<font color="red" face="宋体，楷体" size="1"></font>
- color="" 颜色
- face="" 字体。可以写多个字体，多个字体逗号隔开，从左往右识别，如果都不能显示就使用电脑默认字体
- size="" 大小。
- 1-7（数字越大，字体越大,不带单位）
小段文本
<span></span>
- 文字多用p；文字少用span
div盒子
<div></div>
- 装其他标签，布局常用它
图片
<img src="图片路径" alt="鼠标悬停显示文本" title="" width="" height="">
- 属性：
- width=""
- height=""
- alt="" 图片加载失败，显示文本；利于seo
- title=""鼠标悬停图片上，显示文本
- border=""
- src="" 资源
- 相对路径：
- ./1.png 同一级的图片1.png
- ../1.png 上一级的图片1.png
- ../../1.png 上上级的
- ../img/1.png 上一级img文件的图片1.png
- 绝对路径：
- 固定盘符
- 网址
- 相对路径：
无序列表
<ul type="none">
<li>列表项内容</li>
<li>列表项内容</li>
<li>列表项内容</li>
........
</ul>
- ul 属性
- type=""
- disc 实心圆
- circle 空心圆
- square 方块
- none 取消默认小圆点效果
有序列表
<ol type="A" start="1">
<li>列表项内容</li>
<li>列表项内容</li>
<li>列表项内容</li>
........
</ol>
-
ol属性：
-
type=""
- 1 数字顺序的有序列表（默认值）（1, 2, 3, 4）。
- a 字母顺序的有序列表，小写（a, b, c, d）。
- A 字母顺序的有序列表，大写（A,B,C,D)
- i 罗马数字，小写（i, ii, iii, iv）。
- I 罗马数字，大写（i, ii, iii, iv）。
-
start="" 定义列表符合开始的位置
- start="1"
- start里面必须是数字
自定义列表
<dl>
<dt></dt>
<dd></dd>
</dl>
- 通常情况下，一个dl里面放一组dt和dd；也可放多个
- 经典用法：dt里面放图片；dd放图片描述
超链接
<a></a>
<a herf="网址链接" target="跳转方式"title="鼠标悬停显示文本"></a>
扩展应用：锚点（从位置跳转到对应位置，参考：回到顶部）
先定义一个锚点<div id="锚点名"></div>
使用锚点<a href="#锚点名">
<a href="./超链接.html#锚点名">跨页面锚点跳转</a> 除了本页面跳转，还可以进行跨页面跳转位置
- target="" 跳转方式
- "#"占位不进行跳转
- _self 本窗口打开
- _blank 新窗口打开
- _parent 父级窗口打开
- _top 顶层打开
表单
<form action="https://www.jd.com/" method="post">
<input type="text" name="user" value="123">
<input type="password" name="psw" placeholder="输入密码" >
<input type="submit" value="login">
</form>
-
form属性：
- action="" 提交地址
- method="" 提交方式
- get 明文传参
- post 隐蔽传参
- name=”表单名称“
-
input属性：
-
type=""
-
text 文本框
-
password 密码框
-
input::-webkit-input-placeholder {
color: #fff;
text-align: center;
}设置提示文本的颜色
-
-
submit 提交按钮
-
reset 重置按钮
-
button 空按钮
-
file 文件上传
-
hidden 隐藏域
-
radio 单选 （单选按钮必须设置name且同组的name的值相同）
-
-
checkbox 多选
- 属性checked 默认选中
- 给后面文字用label标签套起来label的for属性值为前面多选框的id名(这样点击文字，也可以选中单/多选框)
表单属性：
- name="" 指定传参时的关键词
- value="" 默认值
- placeholder="" 提示文本
- maxlength：控制最多输入的字符数
- size：控制框的宽度（以字符为单位）
- disabled= 禁用
- readonly 只读（可以选中，不能更改）
- checked 默认选中 （radio+checked+readonly）
-
-
select>option*n 下拉菜单
- size 显示下拉的个数
- multiple 按住crtl+鼠标左键可选中多个
-
textarea 文本域
- cols=”数值“ 列 列越多元素就越宽
- rows 行 行越多元素越高
- resize：；是否可以拖拽
- both 可以拖拽（默认）
- none 不能拖拽
- horizontal 水平的
- vertical 垂直的
表单补充：
fieldset>legend 分组
-
fieldset 分组
-
legend 分组标题
特殊字符
- 空格  ；&emsp；(全角，空格会大一点)
- 版权 ©；
- 注册 ®；
- 商标 &trade；
- 大于 >；
- 小于 <
表格
table>tr>td（th）
-
width
-
height
-
bgcolor 背景颜色
-
border
-
bordercolor
-
cellspacing cell单元格 spacing间隙 单元格之间的间隙
-
cellpadding padding内填充 单元格和内容之间的距离
-
合并单元格属性(td)
- rowspan="要合并单元格的行数" 合并行 向下合并
- colspan 向右合并
-
align 表格整体的水平对齐方式 （center不能改变表格的位置） 这个属性不给table可以调整文字位置
- left
- right
- center
-
valign=""文字垂直对齐方式 不能给table
- top
- middle
- bottom
- baseline(基线);/
-
rules='rows横线/cols/both/none'
- rows 横线
- cols 竖线
- both
- none
-
外边框frame="above上/lhs左（left hand side）/rhs右/below下"
- above 上
- lhs 左（left hand side）
- rhs 右
- below 下
-
表格行分组
- thead 头部，一个表格只能有一个，使用后高度会降低
- tbody 主体，可有多个。如果没有tbody会创建一个tbody，把所有没有分组的tr都包进去
- tfoot尾部，一个表格只能有一个，使用后高度会降低
-
标题
- css属性可以控制标题的位置caption-size:top/bottom;
-
列分组：列分组 span写的是几，就是将几个分在一组
<colgroup span="数字“></colgroup>
浮动框架iframe
行内元素，应用场景：引入页面的头部和底部
<iframe src="" frameborder="0" scrolling='no'></iframe>