真么在网站里搜索/爱站网 关键词挖掘
目录
一、软件的初始化，和html的初始结构分析
一个真实项目的构建(文件夹规范)：
打开一个项目：
一个网页的组成：
网页基本结构：
网页基本结构的翻译：
HBuilderX代码在浏览器中运行：
二、html的标签：
title标签：
编写页面时注意事项:
body标签里都可以放什么？
标题标签 h1 h2 h3 h4 h5 h6---要成对出现,如
文字标签
段落标签p
页面布局标签 div
p标签和div标签差异:
span标签:
无序列表ul li --- 必会（常用），嵌套写
有序列表ol li --- 简单了解即可，嵌套写
列表项 dl dt dd
img标签 --- 图片
行内标签和块级标签区别：
strong标签: 一般用于对文字进行强调
· 标签的嵌套规则：
form基础表单:
面试常考:post与get提交方式的区别
换行
三、快捷键
注释的方法：
四、html知识点的思维导图
一、软件的初始化，和html的初始结构分析
之前是用sublime和Visual Studio Code学习的前端，现在要重新使用HBuilderX来练习，因为HBuilderX可以开发微信小程序。
VS Code中html的建立框架结构快捷方法：输入html:5按回车键
HBuilderX中html的建立框架结构快捷方法：左上角文件->新建->html文件->选default
-
一个真实项目的构建(文件夹规范)：
- 右键新建一个文件夹写上英文的项目名(命名必须英文的，后面的图片和文件夹也必须均用英文命名，不然容易乱码)
- 文件夹里包含html(网页文件夹)、css(样式文件夹)、img(图片文件夹)。
- html文件夹里index.html主页
- css文件夹里style.css样式表
-
打开一个项目：
把文件夹直接拖拽到打开的VS code编译器的中间黑色内容屏幕。
-
一个网页的组成：
html------网页内容
css-------操作网页的样式
javascript--------实现页面中一些动态的交互效果
-
网页基本结构：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head>
<body></body>
</html>
-
网页基本结构的翻译：
<!DOCTYPE html> ---声明当前网页类型
<html lang="en">---
html---一个页面的 根 节点
lang属性设置或返回元素的语言
"lang"的意思就是“language”语言的意思，
“en”即表示english，
如果是中文页面，可将其改为<html lang="zh">zh即表示中文
<meta charset="UTF-8">---字符集编码,格式是utf-8
(必须三码合一，只有三码合一，才能保证当前我们浏览的页面不会出现乱码)
三码指:
(1)标签内charset的编码是不是UTF-8
(2)编译器右下角显示的编码是不是UTF-8
(3)把html文件用记事本打开，记事本内点文件另存为后显示的右下角的编码是不是UTF-8
-
HBuilderX代码在浏览器中运行：
选择自己有的浏览器，推荐安装火狐或谷歌。因为公司一般要求前端代码兼容谷歌浏览器。
二、html的标签：
-
title标签：
<title>html第一次课</title>-----网页的标题，
<title>艺淳的html寒训</title>
标签里面写的字显示在页面选项卡中。
-
编写页面时注意事项:
标签要成对出现（有开始标签，就会有结束标签）
-
body标签里都可以放什么？
标题标签，段落标签、页面布局标签、无序列表标签
body标签里写的内容都会在浏览器端呈现
-
标题标签 h1 h2 h3 h4 h5 h6---要成对出现,如<h1> </h1>
在一个页面中h1最多只能出现一次，如果出现多次，搜索引擎就会认为你是在作弊，严重情况下会k掉整个网站
h1 --- 一级标题（主标题）
h2 --- 副标题
h3 --- 副标题
h2--h6 (可以出现多次)
<!-- 标题标签（从百度里学习借鉴一下各个h的用法） --><h1>主标题</h1><h2>二级标题</h2><h3>三级标题</h3><h4>四级标题</h4><h5>五级标题</h5><h6>小标题</h6>运行效果：
特点:1.文字大小逐级变小 2.默认加粗 3.占一行自动换行
文字标签
<a></a>
默认的属性href --- 文字链接（指定跳转的页面）
target属性:如果没给target属性,默认就是在当前选项卡刷新显示href的链接所跳转的页面，等于target="_self"；如果给target="_blank"，那么在新的选项卡打开（推荐使用的）a标签特点：默认文字带有颜色，
浏览器默认的文字大小16px！
而12px是最小字号，不能比12px再小
<!-- 2.文字标签a --><!-- 在新的选项卡打开 --><a href="http://www.baidu.com" target="_blank">百度</a><!-- 在当前的选项卡打开 --><a href="http://jd.com" target="_self">京东</a>注意事项：标签内属性用 = 号。
段落标签p
<!-- 3.段落标签 --><p>段落标签</p>页面布局标签 div
<!-- 4.页面布局标签 --><div>页面布局</div>-
p标签和div标签差异:
div标签默认没有上下外边距；
p标签默认是有上下外边距(橙色区域margin)
span标签:
<!-- 5. span标签 --><span>小区域</span>正常如果不添加任何样式(style、css)，这个span是无意义的,
此标签需要与样式一起使用；
无序列表ul li --- 必会（常用），嵌套写
快捷方式：ul>li*n个需要的li
<!-- 6.无序列表 --><ul><li>淳淳</li><li>瑶瑶</li><li>琪琪</li></ul>运行结果：
特点：li标签自带样式----小黑色的圆圈
有序列表ol li --- 简单了解即可，嵌套写
<!-- 7. 有序列表--><ol><li>淳淳</li><li>瑶瑶</li><li>琪琪</li><li>星星</li></ol>运行结果：
特点：li标签自带数字序号
列表项 dl dt dd
dt-----表的头
dd----对表头进行阐述和说明
<dl><dt>apple</dt><dd>意思是苹果</dd><dt>banana</dt><dd>意思是香蕉</dd>
</dl>运行结果
不是嵌套写，而是dl套dt和dd，dd在dt后面。
img标签 --- 图片
src属性----用于存放图片路径（相对路径和绝对路径）
相对路径： ../ (每次向上返回一层就用一个../)
向上返回两层 ../../
文件夹名/图片名+图片的格式
<!-- 相对路径 --><img src="../img/xcc.jpg" alt="">绝对路径：
(1) 带有硬盘盘符号
本地图片用浏览器打开后复制上面显示的地址
(2)带有域名（以http协议开头的）
网上的图片，右键，复制图片地址
<!-- 绝对路径：带有硬盘盘符号 -->
<img src="file:///C:/Users/Administrator/Desktop/ychx/img/xyy.jpg" alt=""><!-- 绝对路径：带有http协议 -->
<img src="https://www.baidu.com/img/pc_1c6e30772d5e4103103bd460913332f9.png" alt="">
alt属性---由于网络等因素导致图片无法正常加载，一般用文本替代图片（面试经常会问到的）
width属性
height属性
<!-- img的宽、高、alt属性 --><img src="../img/dyy.jpg" width="200px" alt=""><img src="../img/.jpg" width="200px" alt="喜欢"><img src="../img/dcc.jpg" width="200px" alt="">
img标签的宽度和高度设置一个即可，另一个就会等比缩放
行内标签和块级标签区别：
块级标签：独占一整行（纵向排列）
（可以进行宽度和高度数值的设定，可设）
h1----h6 p div li dl dt dd
行内标签: 在一行内显示，不会另起一行（横向分布)
(设置宽度和高度是无效的)
a span strong
行内块标签:(本身自带宽度和高度的属性，可设)
img---行内块标签
strong标签: 一般用于对文字进行强调
<!-- strong强调标签 --><p>淳淳<strong>喜欢</strong>学习</p>运行结果：
· 标签的嵌套规则：
- 块级标签可以嵌套行内标签的，行内标签不可以套块标签。
不管乱不乱码！就是不能套！行业规范
- p标签(块)却不能套块属性标签！可以套a、span等行内标签。
乱码
- 嵌套的时候注意代码缩进。
form基础表单:
目标:熟悉常见input表单的使用方式
作用:用于将用户输入的数据提交到后台服务器
<!-- 表单 --><form action="http://www.baidu.com" method="get" name="ccdebiaodan"></form>name属性: 表单提交时的名称
action属性: 表单提交到的地址
method属性:提交表单的方式post与get
面试常考:post与get提交方式的区别
（建议用post方式提交）
1.数据提交的方式不同，get提交方式在地址栏中可以看到， post方式提交在地址栏中看不到
2. get一般用于提交少量数据，post用于提交大量的数据
3. get最多能提交1K数据，受浏览器的限制；
post理论上无限制，受服务器限制
4. get提交的数据在浏览器历史记录中依然存在，安全性不好。
input标签里的name 和 value----- 是用来提交到后台的，value值可以为空，也可以写值（name必须要有）
<!-- 文本 -->用户名：<input type="text" name="username" value="用户名"><!-- 密码 -->密码：<input type="password" name="pd" value="密码"><!-- 提交 -->提交：<input type="submit" value="表单提交"><!-- 单选按钮，name相同，value不同 -->男:<input type="radio" name="sex" value="0">女:<input type="radio" name="sex" value="1"><input type="submit" value="表单提交">单选按钮不给value值是不可以的，默认显示的是on-----后台开发人员不清楚我们前端选择了男还是女
- lable标签---没有实际意义提高用户体验，能绑定到input输入框上，它可以让input自动获取焦点（label的for属性必须等于input的id，才能绑定到一起）
<!-- 字也能点（提高用户体验）： --><input type="radio" name="x" id="girl" /><label for="girl">女</label><input type="radio" name="x" id="boy"/><label for="boy">男</label><br/><br/>换行
<!-- 默认提示信息 --><input type="text" placeholder="默认提示信息" value=""/><br/>头像：<input type="file"/><br/>保密：<input type="hidden" value="保密"/><br/>普通按钮：<input type="button" value="普通按钮"/><br/>多选：<input type="checkbox"/>吃<input type="checkbox"/>喝<input type="checkbox"/>玩<input type="checkbox"/>乐<br/>默认提示信息：<input type="text" placeholder="我爱你" value=""/><br/>重置：<input type="reset"/><br/>默认选择：<input type="radio" name="s" checked="checked" />是<input type="radio" name="s"/>否<br/>不许更改：<input type="text" value="" disabled="disabled" /><input type="text" value="" readonly="readonly"/><br/>输入框的长度设定：<input type="text" value="" size="50"/><br/>多行文本输入标签：<br/><textarea cols="10" rows="5"></textarea><br/>下拉菜单：<select><option>地点</option><option>长春</option><option>四平</option><option>延吉</option><option>杭州</option><option>北京</option><option>上海</option></select><br/>下拉菜单改列表：<br/><select multiple="multiple"><option>地点</option><option>长春</option><option>四平</option><option>延吉</option><option>大连</option></select><br/>下拉菜单加分标题：<select><optgroup label="吉林"><option>松原</option><option>长春</option><option>四平</option><option>延吉</option></optgroup><optgroup label="辽宁"><option>葫芦岛</option><option>秦皇岛</option><option>沈阳</option><option>大连</option></optgroup></select>三、快捷键
-
注释的方法：
Ctrl键 加 /键 --- 注释的代码不会呈现在浏览器端
- 撤回的方法：Ctrl键 加z键
- 浏览器中审查元素快捷：F12键,若与电脑快捷冲突Fn键加F12
四、html知识点的思维导图
