【前端保姆级笔记】超详细的html笔记！！！（小柏出品）

136 阅读 0 评论 90 点赞

我是靠谱客的博主难过水池，这篇文章主要介绍【前端保姆级笔记】超详细的html笔记！！！（小柏出品），现在分享给大家，希望可以做个参考。

B站关注帅小柏，点波关注不迷路！！！

- - - html 骨架
    - html语法规则
    - 容器和文本级别标签
    - 标签属性
    - h系列标签
    - p标签
    - img标签
    - - 相对路径
        绝对路径
    - a 标签
    - - 锚点
    - 列表
    - 布局标签
    - 表格标签
    - 表单元素
    - - form标签
        文本框
        密码框
        单选按钮
        复选按钮
        按钮
        文本域
        下拉菜单
    - 其他杂碎的知识点
    - - 注释
        字符实体

html 骨架

基本骨架

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13

 <html>
 	<head>
 	    	<title>  </title>
 	</head>
	
 	<body>
 		
 	</body>
	
 </html>

完整骨架

复制代码

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>

	</body>
</html>

meta:元
属性：charset ：字符集
防止乱码

html语法规则

双标签：例：<p>这是一个双标签</p>
双标签 == 开始标签<p> + 结束标签</p>
单标签: <hr>,<br>

容器和文本级别标签

文本级别标签：p，span,img,表单标签等。

复制代码

1
2
3
* 网页显示内容一般只能插入文字，或者是==其他级别文本标签==。**不能嵌套相同文本标签**。
* 否则学习样式的时候，网页布局会收到影响。

容器级别标签：div ，h1,dl,dt,dd,ul,ol,li等.

复制代码

1
2
* 可以插入任意内容(文字，文字级别标签)， 或者其他容器标签。

标签属性

属性：包括属性名和属性值。对整个网页有影响。

例：<h1 class = "box" id="123"></h1>

h系列标签

可以显示 1~6级标题，h1~h6
是双标签，也是容器标签。(容器标签：可以插入任意内容)

复制代码

1
2
3
4
5
6
  <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：设置图片没有图像的时候，用文字代替。

复制代码

1
2
3
4
// 默认在body内部

<img src="web.jpg" width=500px height=500px title ="看什么看"  border =10px alt=“无法加载图片” />

相对路径

.注：…/：代表着当前文件，所在文件夹的上一级目录

复制代码

1
2
3
4
5
6
7
8
9
if(图片和 html文件 在同一文件夹下) 
	src = ”图片名字.后缀名“
 else {
     if(图片 在html文件 的下级)  // 也就是 装图片的文件夹imges 和 html文件同级，同一文件夹下。
         src = "imges/web.jpg"
  	 if(图片 在html文件 的上级) 
         src = "../web.jpg"
 }

绝对路径

就是一般的路径。（从盘符出发）。

a 标签

a : anchor 锚俗称：超链接
- 双标签，文本级别标签
- 常用属性
  - href ：跳转链接（相对路径，绝对路径），进入另一个网页
  - title：鼠标移动上去，提示文字。（可以是任意类型的字符）

复制代码

1
2
3
4
5
6
7
8
9
10
11
<a href="http://baidu.com">baidu</a>
<a href="http://baidu.com" target="_self">baidu</a>
<a href="http://baidu.com" target="_blank">baidu</a>
<!--
	href : 设置连接的地址。
	target ：设置目标进行跳转。
			_self : 表示当前页面。
			_blank : 表示打开新页面进行跳转。

-->

锚点

两个位置进行跳转

href的属性值：# + id

复制代码

1
2
3
4
5
6
<p id="mao">xxxxxxxxxxxxxxxxxxxxxxx</p>
// 假装中间有很多东西。

<a href="#mao"> 锚点链接</a>
// 一点锚点链接 ，跳转到第一个p

列表

无序列表
- 作用：可以在网页中搭建一个没有顺序的列表。
- 需用两个标签配合使用：ul和li。
- ul :unorder list 表示容器
- li : list item 表示容器
- li 需嵌套在ul 里面，不能单独使用，另外，ul的里面只能放li
- li 里面可以放任意内容。

复制代码

1
2
3
4
5
6
7
8
9
10
<ul>
	<li>xxxxxxxxxxx</li>
	<li>
        <h2>llll</h2>
        <ul>   ....   </ul>
    </li>
    
    <li></li>
</ul>

有序列表
- 作用：可以在网页中搭建一个有顺序的列表。
- 需用两个标签配合使用：ol和li。
- ul :order list 表示容器
- li : list item 表示容器
- li 需嵌套在ol 里面，不能单独使用，另外，ol的里面只能放li
- li 里面可以放任意内容。

复制代码

1
2
3
4
5
6
7
8
9
10
<ol>
	<li>xxxxxxxxxxx</li>
	<li>
        <h2>llll</h2>
        <ol>   ....   </ol>
    </li>
    
    <li></li>
</ol>

定义列表
- 复制代码定义：一个自定义标题和内容列表。
```
1
2
定义： 一个自定义标题和内容列表。
```
- 复制代码使用要求： `dl,dt,dd` 三个标签一起使用。
```
1
2
使用要求： `dl,dt,dd` 三个标签一起使用。
```
- 复制代码dl：definition list 相当于列表最外层容器，大结构。
```
1
2
dl：definition list      相当于 列表最外层容器，大结构。
```
- 复制代码dt：definition term 表示列表主题或者术语。
```
1
2
dt：definition  term   表示列表主题或者术语。
```
- 复制代码dd：definition description 表示对于主题，术语的一个解释。
```
1
2
dd：definition description 表示 对于主题，术语 的 一个解释。
```
- 复制代码dl 的内部放 dt 和 dd ，（dt和 dd 是并列的。）
```
1
2
dl 的内部 放 dt 和  dd ，（dt和 dd  是并列的。）
```
- 复制代码dt 后面可以有多个dd (可以有多个解释，没毛病)
```
1
2
dt 后面 可以有 多个dd  (可以有多个解释，没毛病)
```
- 复制代码==dt和dd 都属于容器级别标签，里面什么都可放==
```
1
2
==dt和dd 都属于容器级别标签 ，里面什么都可放==
```

复制代码

1
2
3
4
5
6
7
8
<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

复制代码

1
2
3
4
5
6
7
8
9
10
11
<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 : 设置默认值（自定义内容）

复制代码

1
2
3
4
<form>
    <input type=test value =小柏最帅/>
</form>

效果：

密码框

只需要把 type 设置为 password 即可

复制代码

1
2
3
4
<form>
    密码：<input type=password value =输入密码 />
</form>

效果：

密码：

单选按钮

只需要把 type 设置为 radio(收音机) 即可
- 单选框：成组出现，而且有可能是互斥的。
- 设置互斥的方法：
  - 同时添加 name属性并且为相同值。

复制代码

1
2
3
4
5
6
7
8
<form>
    <p>
    	性别：
        <input type=radio  name=sex/> 男
         <input type=radio  name=sex/> 女
    </p>
</form>

效果：

性别：男女

复选按钮

只需要把 type 设置为 checkbox（多选）即可

复制代码

1
2
3
4
5
6
7
8
9
10
<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：提交按钮，将数据提交给服务器。

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
  <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 ：列设置文本域显示的列数（宽），属性值是数字

复制代码

1
2
  <textarea name="" id="" rows=5 cols=10>默认文字</textarea>

效果

默认文字

下拉菜单

下拉菜单：需要用 select和option 两个标签嵌套结合使用。
- select 和 option 都是 双标签，文本级别标签。
- 嵌套关系： select–> option
- select : 表示搭建下拉菜单的整体结构。
- option：表示下拉菜单中的每一项。

注：下拉菜单默认显示的是第一个选项。

如果想让某一项作为默认显示，则需要给这个option标签添加一个selected属性。属性值为selected

复制代码

1
2
3
4
5
6
7
   你的选择是：
    <select name="" id="">
        <option value="">小姐姐1号</option>
        <option value="" selected="selected">小姐姐2号</option>
        <option value="">小姐姐3号</option>
    </select>

效果：

你的选择是：

小姐姐1号小姐姐2号小姐姐3号

其他杂碎的知识点

注释

写法：

复制代码

1
2
<!-- 这里写注释  -->

字符实体

  : 全称：non-breaking space 空格、

< ：全称 : less-than 小于号 <

> : 全称: greater-than 大于号 >

字符实体：以 & 开头，以；结尾。

最后

以上就是难过水池最近收集整理的关于【前端保姆级笔记】超详细的html笔记！！！（小柏出品）的全部内容，更多相关【前端保姆级笔记】超详细内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。

本文分类：前端笔记
浏览次数：136 次浏览
发布日期：2023-10-18 09:41:12
本文链接：https://www.kaopuke.com/article/k-p-k_13_u_23_o_26_f2_12__23__10_z.html

【前端保姆级笔记】超详细的html笔记！！！（小柏出品）

B站关注帅小柏，点波关注不迷路！！！

html 骨架

html语法规则

容器和文本级别标签

标签属性

h系列标签

p标签

img标签

相对路径

绝对路径

a 标签

锚点

列表

布局标签

表格标签

表单元素

form标签

文本框

密码框

单选按钮

复选按钮

按钮

文本域

下拉菜单

其他杂碎的知识点

注释

字符实体

最后

评论列表共有 0 条评论

发表评论取消回复

【前端保姆级笔记】超详细的html笔记！！！（小柏出品）

B站关注帅小柏，点波关注不迷路！！！

html 骨架

html语法规则

容器 和文本级别标签

标签属性

h系列标签

p标签

img标签

相对路径

绝对路径

a 标签

锚点

列表

布局标签

表格标签

表单元素

form标签

文本框

密码框

单选按钮

复选按钮

按钮

文本域

下拉菜单

其他杂碎的知识点

注释

字符实体

最后

相关文章

评论列表共有 0 条评论

发表评论 取消回复

微信扫一扫：分享

容器和文本级别标签

发表评论取消回复