初识HTML
1.HTML是什么？
HTML是计算机语言中的其中一种，是一种标签语言,全称叫超文本标签语言。
英语：HyperText Markup Language。
2.HTML中的基本骨架？
<!DOYTYPE html>
<html>
<head>
<meta charet="utf-8">
</head>
<body>
<h1>Hello HTML~</h1>
</body>
</html>3.HTML中的基本的语法？
A，HTML中不区分大小写。
B，对于单标签，最后的/，可加可不加。
C，属性值可以加引号，也可以不加。
4.HTML中的标签，属性，元素的概念？
<h1 class="box">Hello HTML~</h1>
标签：标签就是一个单词使用<>包含起来。<h1></h1>
属性：在开始标签中以xxx="xxx"形式的文本，叫属性（属性名+属性值）。class="box"
元素：开始标签+结束标签+属性+标签中的所有的内容。<h1 class="box">Hello HTML~</h1>
5.什么是HTML中标签的语义化？
不的标签所代表的含义是不一样。根据不同的语义使用不同的标签，也就是说什么样的标签干什么事。
一个网页的标签的语义化好了，也是有利于SEO。
DIV+SPAN是没有任何语义。DIV就是为了和CSS配合进行布局。
HTML5中提供了更有语义的DIV，如:header, footer, nav, seciton....
现在主流还是DIV。
6.web网页的三层结构？
结构层：由HTML提供的。核心是DIV。也就是内容层。
样式层：由CSS提供的，CSS的两大作用，布局（浮动布局，流式布局，层布局，flex布局），美化（盒子模型+其它属性）
行为层：由JS提供的。
表单相关的标签
表单：主要用于收集用户输入的内容。 有了表单我们就可以参与到一个网页的创建中了。
form标签：就是表单的意思，作用就是用来创建一个表单。
<form aciton="xxx" method="get"></form>
acition 表示把用户输入的内容提交到某个地方
method 表示提交数据的方式，通常有GET提交，和POST提交
form标签，块级标签，独占一行
input标签：表单元素，有多种形式，通过type就可以指定的形式。
女标签（特殊的女标签，和img一样），行内块，可以并排显示
直接使用input表单元素，也是OK，不需要使用form，不能提交
HTML4版本中常见的type:
<input type="text" /> 普通的文本框，用户名
<input type="password" /> 普通的密码框
<input type="redio" /> 单选框 如果有两个单选框，你要二选一，你需要加上name属性，name属性值需要一样。
<input type="checkbox" /> 复选框
<input type="file" /> 文件上传
<input type="submit" /> 提交按钮，具备提交的功能
<input type="button" /> 普通按钮，没有提交的功能
<input type="image" /> 图片按钮
<input type="hidden" /> 隐藏区域，看不见，传递数据
HTML5版本中常见的type: 有兼容性问题，在不同的浏览器下，长的不一样
<input type="email" /> 表示写的数据，需要符合邮箱的格式
<input type="url" /> 表示写的数据，需要符合网站的格式
<input type="number" /> 表示写的数据，必须是数字
<input type="range" /> 不是一个输入框，范围的选择器
<input type="search" /> 输入框后面多一个x
<input type="color" /> 不是一个输入框，颜色的选择器
select+option标签： 下拉菜单
<select>
<optin selected="true" value=" 0">1</optin> // value是往后端提交的数据，通常是数字或单词
</select> //selected="true" 默认选项，可以简写为selected
textarea标签：文本域 ，输入大量的文本，贴吧中的输入框，QQ空间中的输入框...
HTML中经常使用的标签
标题标签：
h1~h6
场景：新闻，博客，文章的标题 / 网站的logo
基本上任何一个网站都有，标题标签是有利于SEO。
块级标签，独占一行
图片标签：
img标签，格式：<img src=" " alt=" ">
场景：向网页插入一张图片。
属性：
src: 图片的路径（可以是绝对路径，也可以是相对路径）
alt:（1） 当图片路径出错时，显示提示内容 （2）有利于SEO
widht: 设置图片的宽度，单位默认px。（当只设置width时，height会等比例变化）
height:设置图片的高度，单位默认px。（当只设置height时，width会等比例变化）
一个图片也可以当成一个链接，进行点击。
女标签（特殊的女标签），行内块， 可以实现并排显示。
段落标签：
p标签，块级标签，独占一行
场景：语文中的段落， 使用它进行分隔内容
超连接标签：
a标签
./ ../ ./表示当前目录 ../表示上一级目录
站外链接 ：连接到其它网站。（当连接到其它网站，需要带上http://协议）
<a href="http://www.baidu.com">百度一下</a>
站内链接 ：同一个网站的不同页面间的跳转
<a href="./about.html">关于我们</a>
锚点连接：在同一个页面中不同位置进行跳转
使用：1）建立锚点，通过a标签 <a name="xxx"></a> (页面自动刷新)
2）连接到某个锚点 <a href="#xxx">连接到某个锚点</a>
注意：页面上有一个特殊的锚点，叫top， top可以不写（默认存在）
<a href="#">返回顶部</a>
重要的属性：
href: 表示一个连接的地址 href="http://www.baidu.com"
target: _blank 表示以一个新的选项卡打开链接
_self 表示在当前的选项卡中打开链接
name: 用于设置锚点
title: 任何一个标签上都有title属性，表示当鼠标放上去时显示提示内容。
HTML中列表相关的标签
分类：
无序列表：用的相当多，用来列表或导航，基本上任何一个网站都有列表
有序列表：用的比较少，只有在你强调语义化时，才会使用有序列表
自定义列表：对一个事件，时间，术语，名词解释时。
无序列表：
ul+li 默认情况下，每一个li前面有一个小黑点，在CSS中通常都会直接去掉
有序列表：
ol+li 默认情况下，会有一个标签，在CSS中也会去掉，通过自己设置标识
自定义列表：
dl+dt+dd 强调：新闻列表，电影列表，导航.....
HTML中表格相关的标签
场景：带有表格的网站，或者是后台管理系统。
表格相关标签：
table：表格 thead:表头 tr:行
th:表头中的单元格（列） tbody:表体
td:表体中的单元格（列）
表格中的相关属性：
border:设置边框
width：设置宽度
height ：设置高度
align：水平对齐 valign：垂直对齐
bgcolor：背景颜色
cellspacing：单元格之间的距离
cellpadding：单元格内容与单元格边框的距离
td和th上的两个重要属性：
rowspan：同一列中的多行，进行跨度，对同一列的第一行加上rowspan，跨度几行，rowspan的值就是多少，还需要把其它行删除
colspan：同一行中的多列，进行跨度，对同一行的第一列加上colspan，跨度几列，colspan的值就是多少，还需要把其它列删除
其它
快捷键：
shift+alt+向下箭头 复制上一行
ctrl+x 删除一行（剪切）
ctrl+z 撤销
ctrl+鼠标中键 改变字体大小
按住鼠标中键，向下拉，同时选中多行
ctrl+B 把项目结构视图隐藏（展开）
...
web前端开发环境：
编辑器+浏览器
编辑器：vscode, webstrom,hbuilder
浏览器：谷歌浏览器
程序员分类：
前端：web前端, android, ios, 游戏...
后端：java, php, python, c++...
emmet写法：
div#box+tab -----》<div id="box"></div>
div.test+tab -----》<div class="test"></div>
div>ul>li>p -----》 <div><ul><li><p></p></li></ul></div>
div+ul+p -----》<div></div>
<ul></ul>
<p></p>
开发者工具调试网页：
F12 鼠标检查
2172
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
