Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

HTML入门必备 #1

Closed
Wscats opened this issue Dec 29, 2016 · 0 comments
Closed

HTML入门必备 #1

Wscats opened this issue Dec 29, 2016 · 0 comments
Labels

Comments

@Wscats
Copy link
Owner

Wscats commented Dec 29, 2016

一、前端开发做什么

  • 传统前端:html+css+js
  • HTML5大前端:各种端的兼容开发、Ajax+服务器端的开发、高级设计模式和框架、网站安全、SEO优化、测试、源代码管理、移动APP和移动站点的开发

二、HTML要点

HTML简介

1.什么是HTML?

超文本标记语言(HyperText Markup Language),在浏览器上运行的一种标记语言;
HTML 不是一种编程语言,而是一种标记语言;
标记语言是一套标记标签 ,HTML 使用标记标签来描述网页 。

2.html的文件命名

必须是小写字母开头,后接下划线、数字、字母,不可使用中文或特殊字符作为文件名。

HTML的结构

1.HTML标签的规范

  • HTML 标签是由尖括号包围的关键词,比如<html>
  • HTML 标签通常是成对出现的,比如 <b></b>
  • 标签对中的第一个标签是开始(开放)标签,第二个标签是结束(闭合)标签
  • HTML也存在单标签,例如<br/>、<img/>

2.Html标签结构初体验(标签、属性、元素、注释)

image

3.结构中的每个标签的含义

(1)<!DOCTYPE>标签

<!DOCTYPE>
  • 声明位于文档中的最前面的位置,处于 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范
  • 文档类型:
文档类型 分类 备注
HTML HTML Strict DTD 请求比较严格的html类型
HTML Transitional DTD 相对而言比较规范不太严禁
HTML Frameset DTD 框架级的类型
xHTML HTML Strict DTD 请求比较严格的html类型
xHTML HTML Transitional DTD 相对而言比较规范不太严禁
xHTML Frameset DTD 框架级的类型
HTML5

注意:每个页面都必须设置一个doctype,如果不设置,浏览器会默认开启quirks mode(怪异模式)解析(quirks mode是浏览器为了兼容很早之前针对旧版本浏览器设计、并未严格遵循 W3C 标准的网页而产生的一种页面渲染模式)。
(2)<html>告知浏览器这是一个html文件

属性值 作用
lang属性 设置这个页面的主要语言

(3)<head>标签管理所有头部元素的容器
可以存放:<base>, <link>, <meta>, <script>, <style>以及 <title>
(4)<title>标签定义文档的标题
title中的文本在SEO中占有很大的权重。(不可少)
(5)<meta>标签
作用:设置页面描述信息,设置页面关键字,设置页面的编码格式

  • Description:设置页面描述信息【关键信息的比重(前升排名的一种方式。)】
  • Keywords:设置页面关键词。【关健词的比重(前升排名的一种方式。)】
  • 设置页面的编码格式:

例如:

<meta charset=UTF-8">

Charset(字符集格式)常见:

  • UTF-8:国际通用字符集
  • gb2312:亚洲国家使用字符集

HTML标签详解

h系列的标签

image

h系列的标签(Header) 作用
h1,h2,h3,h4,h5,h6 把页面上的文字加上标题的语义,其中h1定义标题的语义化最重

注意:一个页面只能有一个h1标签。

p段落标签

image

p段落标签 作用
p 给页面的上一段文字加上段落的语义

hr标签

image

p段落标签 作用
hr 在页面显示一条横线,默认占整行。hr 元素可用于分隔内容

br标签

image

br段落标签 作用
br 换行

a标签

a:超链接,锚链接。

  • 作用:跳转页面;
  • a标签属性:
属性 属性值
href a标签的跳转目标地址
target 设置连接的跳转方式:target设置连接的跳转方式(1)_blank:保留原始页面,再进行跳转(2)_self:在当前页面进行跳转

补充<base target=“blank”>为页面上所有a标签设置跳转方式(一般放在titile标签下面)

a标签的其它用法

  • 可以不跳转(跳转到当前页面)href=”#”
  • 可以跳转到另外的页面
  • 可以在当前页面进行定位
    设置a标签的href属性为“#id名”
    在页面的指定位置加入一个目标标签(可以是任意标签)
    必须给这个标签设置一个id名:<p id=”mubiao”>这是目标</p>
  • 在跳转的页面进行定位。
  • 可以进行下载(强烈不推荐使用)<a href="1.zip">下载那个神奇的文件</a>

img

标签 作用
img 在页面显示一张图片
属性 属性值
src 图片显示的路径
alt 若图片加载不出来,显示出来文字
title 鼠标上移显示的文字(介绍图片)

涉及到的路径问题
第一种:绝对路径
带有盘符的路径:C:\上课内容\上课视频\firstday\源代码\wscat.jpg
缺点:可移植性不强,一般情况下不直接使用绝对路径。
第二种:相对路径
a.如果页面与图片在同一目录下面:
image
image

b.如果页面在图片一上级目录:
image
image

c.如果图片在页面的上一级目录:
image
image

总结:平时开发一般都是用相对路径:因为相对路径的可移植性要强。

文本格式化标签

(1)b , u , i , s:视觉要素

标签 作用
b(Bold) 加粗
u (Underlined) 下划线
i(Italic) 倾斜
s(Strikethrough) 删除线

没有语义的标签,<i></i>标签经常会用于不需要语义化的位置,例如放一个小图标

(2)strong,em,del,ins:表达要素

标签 作用
strong 加粗,加强语气
ins 下划线
em 倾斜
del 删除线

可以作为语义化标签使用
image

(3)sub、sup标签

标签 作用
sub 定义下标字
ins 定义上标字

预格式文本

HTML 输出空格

  • 当显示页面时,浏览器将所有连续的空格或换行都会被算作一个空格。
  • pre标签:预格式文本,保留原本的结构,保留空行和空格

表格

早期网站开发中,人们喜欢作用表格布局,使用非常的泛滥。到了2008年之后,人们意识到表格的局限性,所以改为用div+css模式。2002.Sina.com.cn、2004.sina.com.cn
作用:用来将数据以表格形式显示出来。
最简单的表格格式:
image

完整的表格格式:
image

常用属性 作用
border 给表格加上了边框
width 给表格设置宽
height 给表格设置高
cellspacing 规定单元格之间的空白
cellpadding 规定单元边沿与其内容之间的空白
align:center,left,right 设置table上,决定表格显示的位置
例如 <table border="1" width="800" height="400" cellspacing="0" cellpadding="0">

列表:显示数据

(1)无序列表(ul):(重点)

标签 作用
ul 显示一列没有排列顺序的数据

image

注意

  • ul标签是用来管理li标签,所以ul中只能出现li
  • li标签是一个容器,可以放其它标签

(2)有序列表(ol):(用的很少)

标签 作用
ol 显示一段有顺序的数据

注意:有序列表中的所有数据都是顺序的
image

(3)自定义列表(dl)

标签 作用
dl,dt,dd 显示一段数据,格式自己定义

image

注意:一个dl中可以有多个dt和多个dd。

表单:收集信息

1.表单标签(<form></form>

<form>
...
  input 元素
...
</form>

属性

  • action="url地址" ,用于指定接收并处理表单数据的服务器程序的url地址
  • method="提交方式" ,设置表单数据的提交方式,其取值为get或post
  • name="表单名称" ,用于指定表单的名称,以区分同一个页面中的多个表单

2. 表单元素(注册页面上能够填写的内容)
作用:用来收集用户的信息,将来提交到服务器。

image

标签 作用 属性
input type text:文本框
input type password:密码框
input type button:按钮
input type reset:重置
input type image:图片提交
input type submit:提交
input type hidden:隐藏域
input type radio:单选框
input type checkbox:多选框
input type hidden:隐藏域
input type submit是提交按钮 起到提交信息的作用
input value 给文本和按钮(text,password,button)用于设置默认值
select option 下拉框
textarea 文本域

注意

  • 如果想要多个radio或者checkbox组成一个选择集合,那么必须给每个radio以及checkbox都设置相同的name属性。
  • 如何给radio,checkbox设置默认值:checked=”checked”
  • 给下拉框设置默认值:selected="selected"

字符实体

往网页中输入特殊字符,需在HTML代码中,转变成以&开头的字母组合或以&#开头的数字,浏览器会用HTML命令对这些特殊代码进行翻译。常见的如:
image

行内元素+块级元素+行内块级元素

行内元素(行内不可置换元素):

(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.搜索引擎(百度)是如何对页面进行搜索排序的?

  • 花钱买排名
  • 页面的优化(SEO)
    实现SEO,最主要是做到标签语义化,在合适的地方使用合适的标签
    发外链(网站就越受欢迎,将来被用户搜索出来的机会就要大)
@Wscats Wscats changed the title HTML First Day HTML详解 Dec 30, 2016
@Wscats Wscats changed the title HTML详解 HTML入门必备 Mar 18, 2017
@Wscats Wscats added the 笔记 label Apr 10, 2017
@Wscats Wscats closed this as completed Dec 20, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

1 participant