【前端保姆级笔记】超详细的html笔记！！！（小柏出品）
B站关注帅小柏，点波关注不迷路！！！
-
-
-
- html 骨架
- html语法规则
- 容器 和文本级别标签
- 标签属性
- h系列标签
- p标签
- img标签
-
-
- 相对路径
- 绝对路径
-
- a 标签
-
-
- 锚点
-
- 列表
- 布局标签
- 表格标签
- 表单元素
-
-
- form标签
- 文本框
- 密码框
- 单选按钮
- 复选按钮
- 按钮
- 文本域
- 下拉菜单
-
- 其他杂碎的知识点
-
-
- 注释
- 字符实体
-
-
-
html 骨架
- 基本骨架
- 完整骨架
DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>title>
head>
<body>
body>
html>
meta:元
属性：charset ：字符集
防止乱码
html语法规则
- 双标签： 例：
这是一个双标签 - 双标签 == 开始标签
+ 结束标签 - 单标签:
容器 和文本级别标签
文本级别标签：p，span,img,表单标签等。
* 网页显示内容一般只能插入文字，或者是==其他级别文本标签==。**不能嵌套相同文本标签**。
* 否则学习样式的时候，网页布局会收到影响。
容器级别标签：div ，h1,dl,dt,dd,ul,ol,li等.
* 可以插入任意内容(文字，文字级别标签)， 或者其他容器标签。
标签属性
-
属性：包括属性名 和 属性值。对整个网页有影响。
例：
h系列标签
- 可以显示 1~6级标题 ，h1~h6
- 是双标签，也是容器标签。(容器标签：可以插入任意内容)
<h1>啦啦啦h1>
<h2>哈哈哈h2>
//....
<h6>呵呵呵h6>
// 只能并列，不能嵌套其他h标签。 一个网页 只能有一个 h1 标签
p标签
- p：paragraphs
- p：双标签，文本级别标签
- 在网页显示一个段落
- 注 ： 文本级别标签：网页显示内容，可以是文字，其他类型文本级别标签，但是不能插入容器级别标签。
img标签
- img: image.
- 常见格式：jpg，png，gif
- 级别：文本级别标签 ，单标签 ，“”当文字使用“”。
- 常用属性：
- src：source 设置路径
- width：设置宽度
- height：设置高度
- title： 鼠标移到到图片上 显示标题（提示文字）。
- border： 设置图片外层边框的宽度。
- alt：设置 图片没有图像的时候，用文字代替。
// 默认在body内部
<img src="web.jpg" width=500px height=500px title ="看什么看" border =10px alt=“无法加载图片” />
相对路径
.注：…/：代表着 当前文件，所在文件夹的上一级目录
if(图片和 html文件 在同一文件夹下)
src = ”图片名字.后缀名“
else {
if(图片 在html文件 的下级) // 也就是 装图片的文件夹imges 和 html文件同级，同一文件夹下。
src = "imges/web.jpg"
if(图片 在html文件 的上级)
src = "../web.jpg"
}
绝对路径
- 就是一般的路径。（从盘符出发）。
a 标签
- a : anchor 锚 俗称 ：超链接
- 双标签 ，文本级别标签
- 常用属性
- href ：跳转链接（相对路径，绝对路径），进入另一个网页
- title：鼠标移动上去 ，提示文字。（可以是任意类型的字符）
<a href="http://baidu.com">baidua>
<a href="http://baidu.com" target="_self">baidua>
<a href="http://baidu.com" target="_blank">baidua>
锚点
两个位置进行跳转
href的属性值 ：# + id
<p id="mao">xxxxxxxxxxxxxxxxxxxxxxxp>
// 假装中间有很多东西。
<a href="#mao"> 锚点链接a>
// 一点锚点链接 ，跳转到第一个p
列表
- 无序列表
- 作用：可以在网页中搭建一个没有顺序的列表。
- 需用两个标签配合使用 ：
ul和li。 ul :unorder list表示容器li : list item表示容器li需嵌套在ul里面 ，不能单独使用，另外，ul的里面只能放lili里面可以放任意内容。
<ul>
<li>xxxxxxxxxxxli>
<li>
<h2>llllh2>
<ul> .... ul>
li>
<li>li>
ul>
- 有序列表
- 作用：可以在网页中搭建一个有顺序的列表。
- 需用两个标签配合使用 ：
ol和li。 ul :order list表示容器li : list item表示容器li需嵌套在ol里面 ，不能单独使用，另外，ol的里面只能放lili里面可以放任意内容。
<ol>
<li>xxxxxxxxxxxli>
<li>
<h2>llllh2>
<ol> .... ol>
li>
<li>li>
ol>
- 定义列表
-
定义： 一个自定义标题和内容列表。 -
使用要求： `dl,dt,dd` 三个标签一起使用。 -
dl：definition list 相当于 列表最外层容器，大结构。 -
dt：definition term 表示列表主题或者术语。 -
dd：definition description 表示 对于主题，术语 的 一个解释。 -
dl 的内部 放 dt 和 dd ，（dt和 dd 是并列的。） -
dt 后面 可以有 多个dd (可以有多个解释，没毛病) -
==dt和dd 都属于容器级别标签 ，里面什么都可放==
-
<dl>
<dt>长城dt>
<dd>长城（The Great Wall），又称万里长城，是中国古代的军事防御工事，是一道高大、坚固而且连绵不断的长垣，用以限隔敌骑的行动。长城不是一道单纯孤立的城墙，而是以城墙为主体，同大量的城、障、亭、标相结合的防御体系。dd>
<dt>北京故宫dt>
<dd>北京故宫是中国明清两代的皇家宫殿，旧称紫禁城，位于北京中轴线的中心。北京故宫以三大殿为中心，占地面积约72万平方米，建筑面积约15万平方米，有大小宫殿七十多座，房屋九千余间。dd>
dl>
效果：
长城
长城（The Great Wall），又称万里长城，是中国古代的军事防御工事，是一道高大、坚固而且连绵不断的长垣，用以限隔敌骑的行动。长城不是一道单纯孤立的城墙，而是以城墙为主体，同大量的城、障、亭、标相结合的防御体系。
北京故宫
北京故宫是中国明清两代的皇家宫殿，旧称紫禁城，位于北京中轴线的中心。北京故宫以三大殿为中心，占地面积约72万平方米，建筑面积约15万平方米，有大小宫殿七十多座，房屋九千余间。
布局标签
-
布局标签：
div和span, 俗称 ：”盒子“。 -
div：division 区域
- div是双标签，容器级别标签。
- 作用：划分页面区域，辅助页面布局。
-
span：小区域，小跨度。
- span是双标签，经典的文本级别标签。
- 作用 ： 在不影响整体布局的时候，可以用于局部的调整。
表格标签
- 至少需要3个标签
table：本身含义即表格，可以理解为最外围的框架tr: table rows (表行) ，定义的是表格内部的行td：table dock （表格单元格），定义的是 每一行 的单元格 数目th：table header 表头单元格 ，默认样式：字体居中，字相对较大,可以替换td
- 嵌套关系 ：
table -> tr -> td
<table border = 1px>
<tr>
<td>第一行第一列td>
<td>第一行第二列td>
tr>
<tr>
<td>第二行第一列td>
<td>第二行第二列td>
tr>
table>
效果：
| 第一行第一列 | 第一行第二列 |
| 第二行第一列 | 第二行第二列 |
表单元素
- 表单元素 就是 输入框。
form标签
- form：表单
- form标签 不是一个 结构性标签 ，而是 一个功能性 标签。
- 全部表单元素一般需要书写在form标签内部。
- 作用 ： 可以设置表单元素 收集数据提交给谁，设置提交数据方式。
- 重要属性：
- method：设置提交数据方式， get 或者 post方式
- action: 设置收集到列表单 数据 提交给谁 的路径。
文本框
- input ：表单元素
- 单标签 ， 相当于一个特殊文字。
- 重要属性
- type ： 可以创建不同的表单元素
- value : 设置默认值 （自定义内容）
<form>
<input type=test value =小柏最帅/>
form>
效果：
密码框
- 只需要 把 type 设置为 password 即可
<form>
密码：<input type=password value =输入密码 />
form>
效果：
密码：单选按钮
- 只需要 把 type 设置为
radio(收音机) 即可- 单选框 ：成组出现，而且有可能是互斥的。
- 设置互斥的方法：
- 同时添加
name属性 并且为相同值。
- 同时添加
<form>
<p>
性别：
<input type=radio name=sex/> 男
<input type=radio name=sex/> 女
p>
form>
效果：
性别： 男 女
复选按钮
- 只需要 把 type 设置为
checkbox（多选）即可
<form>
<p>
你会哪几种语言：
<input type=checkbox name=hobby/> cpp
<input type=checkbox name=hobby/> java
<input type=checkbox name=hobby/> python
<input type=checkbox name=hobby/> GO
p>
form>
效果：
你会哪几种语言： cpp java python GO
按钮
- 通过input标签，还可以获得三种不同类型的按钮
- button ： 普通按钮
- reset ： 重置按钮 （按后，form标签内部的全部表单元素恢复起始状态、）
- submit：提交按钮 ，将数据 提交给服务器。
<form>
密码：
<input type=text value=“输入密码” />
<p>
性别：
<input type=radio name=sex/> 男
<input type=radio name=sex/> 女
p>
<p>
<input type="button" value="点我点我">
<input type="reset" value="重置">
<input type="submit" value="提交">
p>
form>
效果：
密码：性别： 男 女
文本域
- 文本域 可以让用户在多行输入文本内容。
textarea: 双标签 ，文本级别标签 。可以当做一个文字显示即可。- 常用属性：
- rows：行 设置文本域显示 的行数 （超出行数 会有滚动条出现），属性值 是数字
- cols ： 列 设置文本域显示 的列数 （宽），属性值 是数字
<textarea name="" id="" rows=5 cols=10>默认文字textarea>
效果
默认文字
下拉菜单
- 下拉菜单 ： 需要用
select和option两个标签嵌套结合使用。- select 和 option 都是 双标签，文本级别标签。
- 嵌套关系： select–> option
- select : 表示搭建下拉菜单的整体结构。
- option： 表示下拉菜单中 的 每一项。
注：下拉菜单默认显示的是第一个选项。
如果想让某一项作为 默认显示 ，则需要 给这个option标签添加一个selected属性。属性值为selected
你的选择是：
<select name="" id="">
<option value="">小姐姐1号option>
<option value="" selected="selected">小姐姐2号option>
<option value="">小姐姐3号option>
select>
效果：
你的选择是：
小姐姐1号 小姐姐2号 小姐姐3号其他杂碎的知识点
注释
- 写法：
字符实体
: 全称：non-breaking space 空格、
< ： 全称 : less-than 小于号 <
> : 全称: greater-than 大于号 >
© : 全称：copy-right 版本符号 @
- 字符实体： 以 & 开头 ， 以 ； 结尾。