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
涉及到的路径问题: 第一种:绝对路径 带有盘符的路径:
![image](https://cloud.githubusercontent.com/assets/17243165/21560471/b3b1062a-ce9a-11e6-87fc-4e973ef1ecd6.png)
C:\上课内容\上课视频\firstday\源代码\wscat.jpg
缺点:可移植性不强,一般情况下不直接使用绝对路径。 第二种:相对路径 a.如果页面与图片在同一目录下面:b.如果页面在图片一上级目录:
![image](https://cloud.githubusercontent.com/assets/17243165/21560478/c9bcda70-ce9a-11e6-90ba-16a2b760abf6.png)
c.如果图片在页面的上一级目录:
![image](https://cloud.githubusercontent.com/assets/17243165/21560491/faf3e84a-ce9a-11e6-95b1-b43d4b0208c5.png)
总结:平时开发一般都是用相对路径:因为相对路径的可移植性要强。
文本格式化标签
(1)b , u , i , s:视觉要素
没有语义的标签,
<i></i>
标签经常会用于不需要语义化的位置,例如放一个小图标(2)strong,em,del,ins:表达要素
可以作为语义化标签使用![image](https://cloud.githubusercontent.com/assets/17243165/21560675/91d1d19e-ce9d-11e6-823d-5384d52284cb.png)
(3)sub、sup标签
预格式文本
HTML 输出空格
表格
早期网站开发中,人们喜欢作用表格布局,使用非常的泛滥。到了2008年之后,人们意识到表格的局限性,所以改为用div+css模式。![image](https://cloud.githubusercontent.com/assets/17243165/21560680/9e869ab4-ce9d-11e6-8c9d-f2aa12c3dd81.png)
2002.Sina.com.cn、2004.sina.com.cn
作用:用来将数据以表格形式显示出来。 最简单的表格格式:完整的表格格式:![image](https://cloud.githubusercontent.com/assets/17243165/21560682/a7f9b126-ce9d-11e6-9689-a2dc756d32fe.png)
<table border="1" width="800" height="400" cellspacing="0" cellpadding="0">
列表:显示数据
(1)无序列表(ul):(重点)
注意:
(2)有序列表(ol):(用的很少)
注意:有序列表中的所有数据都是顺序的![image](https://cloud.githubusercontent.com/assets/17243165/21560996/b286b040-cea1-11e6-92f4-83cfa097a45e.png)
(3)自定义列表(dl)
注意:一个dl中可以有多个dt和多个dd。
表单:收集信息
1.表单标签(
<form></form>
)属性:
2. 表单元素(注册页面上能够填写的内容) 作用:用来收集用户的信息,将来提交到服务器。
注意:
checked=”checked”
selected="selected"
字符实体
往网页中输入特殊字符,需在HTML代码中,转变成以&开头的字母组合或以&#开头的数字,浏览器会用HTML命令对这些特殊代码进行翻译。常见的如:![image](https://cloud.githubusercontent.com/assets/17243165/21561423/5ed59618-cea7-11e6-8ca4-46a068d1f47e.png)
行内元素+块级元素+行内块级元素
行内元素(行内不可置换元素):
(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-block
4.元素之间显示方式切换:修改display属性,使用浮动(后面会讲)三、SEO
1.搜索引擎(网络爬虫)负责收集页面信息,对我们的页面进行一个归类排序。 2.搜索引擎(百度)是如何对页面进行搜索排序的?