Closed Wscats closed 2 years ago
超文本标记语言（HyperText Markup Language），在浏览器上运行的一种标记语言； HTML 不是一种编程语言，而是一种标记语言； 标记语言是一套标记标签 ，HTML 使用标记标签来描述网页 。
必须是小写字母开头，后接下划线、数字、字母，不可使用中文或特殊字符作为文件名。
<html>
<b>
</b>
<br/>、<img/>
（1）<!DOCTYPE>标签
<!DOCTYPE>
注意：每个页面都必须设置一个doctype，如果不设置，浏览器会默认开启quirks mode（怪异模式）解析（quirks mode是浏览器为了兼容很早之前针对旧版本浏览器设计、并未严格遵循 W3C 标准的网页而产生的一种页面渲染模式）。 （2）<html>告知浏览器这是一个html文件
（3）<head>标签管理所有头部元素的容器 可以存放：<base>, <link>, <meta>, <script>, <style>以及 <title> （4）<title>标签定义文档的标题 title中的文本在SEO中占有很大的权重。（不可少） （5）<meta>标签 作用：设置页面描述信息，设置页面关键字，设置页面的编码格式
<head>
<base>, <link>, <meta>, <script>, <style>
<title>
<meta>
例如：
<meta charset=UTF-8">
Charset（字符集格式）常见：
注意：一个页面只能有一个h1标签。
a：超链接，锚链接。
补充：<base target=“blank”>为页面上所有a标签设置跳转方式（一般放在titile标签下面）
<base target=“blank”>
a标签的其它用法：
href=”#”
<p id=”mubiao”>这是目标</p>
<a href="1.zip">下载那个神奇的文件</a>
涉及到的路径问题： 第一种：绝对路径 带有盘符的路径：C:\上课内容\上课视频\firstday\源代码\wscat.jpg 缺点：可移植性不强，一般情况下不直接使用绝对路径。 第二种：相对路径 a.如果页面与图片在同一目录下面：
C:\上课内容\上课视频\firstday\源代码\wscat.jpg
b.如果页面在图片一上级目录：
c.如果图片在页面的上一级目录：
总结：平时开发一般都是用相对路径：因为相对路径的可移植性要强。
（1）b , u , i , s：视觉要素
没有语义的标签，<i></i>标签经常会用于不需要语义化的位置，例如放一个小图标
<i></i>
（2）strong,em,del,ins：表达要素
可以作为语义化标签使用
（3）sub、sup标签
HTML 输出空格
早期网站开发中，人们喜欢作用表格布局，使用非常的泛滥。到了2008年之后，人们意识到表格的局限性，所以改为用div+css模式。2002.Sina.com.cn、2004.sina.com.cn 作用：用来将数据以表格形式显示出来。 最简单的表格格式：
2002.Sina.com.cn、2004.sina.com.cn
完整的表格格式：
<table border="1" width="800" height="400" cellspacing="0" cellpadding="0">
（1）无序列表(ul)：(重点)
注意：
（2）有序列表(ol)：（用的很少）
注意：有序列表中的所有数据都是顺序的
（3）自定义列表(dl)
注意：一个dl中可以有多个dt和多个dd。
1.表单标签（<form></form>）
<form></form>
<form> ... input 元素 ... </form>
属性：
2. 表单元素（注册页面上能够填写的内容） 作用：用来收集用户的信息，将来提交到服务器。
checked=”checked”
selected="selected"
往网页中输入特殊字符，需在HTML代码中，转变成以&开头的字母组合或以&#开头的数字，浏览器会用HTML命令对这些特殊代码进行翻译。常见的如：
（1）代表标签：a,span,b,u,i,s,strong,em,ins,del （2）特点：
a,span,b,u,i,s,strong,em,ins,del
（3）属性：display: inline（显示方式：行内元素）
display: inline
（1）代表标签：p,h1-h6,div,ul,li,ol,dl,dt,dd （2）特点：
p,h1-h6,div,ul,li,ol,dl,dt,dd
（3）属性： display:block（显示方式：块级元素）
display:block
（1）代表标签：img,input,textarea （2）特点：
img,input,textarea
（3）属性：display:inline-block 4.元素之间显示方式切换：修改display属性，使用浮动（后面会讲）
display:inline-block
1.搜索引擎（网络爬虫）负责收集页面信息，对我们的页面进行一个归类排序。 2.搜索引擎（百度）是如何对页面进行搜索排序的？
一、前端开发做什么
二、HTML要点
HTML简介
1.什么是HTML？
超文本标记语言（HyperText Markup Language），在浏览器上运行的一种标记语言； HTML 不是一种编程语言，而是一种标记语言； 标记语言是一套标记标签 ，HTML 使用标记标签来描述网页 。
2.html的文件命名
必须是小写字母开头，后接下划线、数字、字母，不可使用中文或特殊字符作为文件名。
HTML的结构
1.HTML标签的规范
<html><b>和</b><br/>、<img/>2.Html标签结构初体验（标签、属性、元素、注释）
3.结构中的每个标签的含义
（1）
<!DOCTYPE>标签注意：每个页面都必须设置一个doctype，如果不设置，浏览器会默认开启quirks mode（怪异模式）解析（quirks mode是浏览器为了兼容很早之前针对旧版本浏览器设计、并未严格遵循 W3C 标准的网页而产生的一种页面渲染模式）。 （2）
<html>告知浏览器这是一个html文件（3）
<head>标签管理所有头部元素的容器 可以存放：<base>, <link>, <meta>, <script>, <style>以及<title>（4）<title>标签定义文档的标题 title中的文本在SEO中占有很大的权重。（不可少） （5）<meta>标签 作用：设置页面描述信息，设置页面关键字，设置页面的编码格式例如：
Charset（字符集格式）常见：
HTML标签详解
h系列的标签
注意：一个页面只能有一个h1标签。
p段落标签
hr标签
br标签
a标签
a：超链接，锚链接。
补充：
<base target=“blank”>为页面上所有a标签设置跳转方式（一般放在titile标签下面）a标签的其它用法：
href=”#”<p id=”mubiao”>这是目标</p><a href="1.zip">下载那个神奇的文件</a>img
涉及到的路径问题： 第一种：绝对路径 带有盘符的路径：
C:\上课内容\上课视频\firstday\源代码\wscat.jpg缺点：可移植性不强，一般情况下不直接使用绝对路径。 第二种：相对路径 a.如果页面与图片在同一目录下面：b.如果页面在图片一上级目录：
c.如果图片在页面的上一级目录：
总结：平时开发一般都是用相对路径：因为相对路径的可移植性要强。
文本格式化标签
（1）b , u , i , s：视觉要素
没有语义的标签，
<i></i>标签经常会用于不需要语义化的位置，例如放一个小图标（2）strong,em,del,ins：表达要素
可以作为语义化标签使用
（3）sub、sup标签
预格式文本
HTML 输出空格
表格
早期网站开发中，人们喜欢作用表格布局，使用非常的泛滥。到了2008年之后，人们意识到表格的局限性，所以改为用div+css模式。
2002.Sina.com.cn、2004.sina.com.cn作用：用来将数据以表格形式显示出来。 最简单的表格格式：完整的表格格式：
<table border="1" width="800" height="400" cellspacing="0" cellpadding="0">列表：显示数据
（1）无序列表(ul)：(重点)
注意：
（2）有序列表(ol)：（用的很少）
注意：有序列表中的所有数据都是顺序的
（3）自定义列表(dl)
注意：一个dl中可以有多个dt和多个dd。
表单：收集信息
1.表单标签（
<form></form>）属性：
2. 表单元素（注册页面上能够填写的内容） 作用：用来收集用户的信息，将来提交到服务器。
注意：
checked=”checked”selected="selected"字符实体
往网页中输入特殊字符，需在HTML代码中，转变成以&开头的字母组合或以&#开头的数字，浏览器会用HTML命令对这些特殊代码进行翻译。常见的如：
行内元素+块级元素+行内块级元素
行内元素(行内不可置换元素)：
（1）代表标签：
a,span,b,u,i,s,strong,em,ins,del（2）特点：（3）属性：
display: inline（显示方式：行内元素）块级元素：
（1）代表标签：
p,h1-h6,div,ul,li,ol,dl,dt,dd（2）特点：（3）属性：
display:block（显示方式：块级元素）行内块级元素(行内可置换元素)：
（1）代表标签：
img,input,textarea（2）特点：（3）属性：
display:inline-block4.元素之间显示方式切换：修改display属性，使用浮动（后面会讲）三、SEO
1.搜索引擎（网络爬虫）负责收集页面信息，对我们的页面进行一个归类排序。 2.搜索引擎（百度）是如何对页面进行搜索排序的？