HTML第一天

Web 标准

主要包括: 结构(HTML) 、表现(CSS)、 行为(JavaScript)

HTML 指的是超文本标记语言

HTML 不是一种编程语言,而是一种标记语言

标记语言是一套标记标签

总结: HTML 作用是标记标签来描述网页,把网页内容在浏览器中展示出来.

HTML骨架:

 //文档类型,告诉我们使用的哪个HTML版本.h5
 // 英文(可不带)

    // 字符集,UTF-8则包含全世界所有国家需要用到的字符,以后统一使用UTF-8字符串.
    


    

HTML标签分类:

  双标签

 单标签 

快速生成HTML骨架:

在页面输入以下2个中任意一个:
1. html:5
2. !
  在sublime里面然后按下tab键即可生成HTML骨架

HTML标签语义化:

遵循的原则: 先确定语义的HTML,再选合适的CSS

HTML常用的标签:

排版标签

标题标签(熟记) :

h1 h2 h3 h4 h5 h6 共六个

小技巧: 按住滚轮向下拉可实现多行统一编辑.(sublime)

段落标签(熟记) :

我是一个段落

水平线标签(认识) :

 是单标签,在网页中显示默认样式的水平线

换行标记(熟记)

 是单标签,换行用

div span 标签(重点)

div 和 span :

div span 是没有语义的,是我们网页布局主要的2个盒子

div 就是division的缩写,分割、分区的意思,其实有很多div来组合网页.

span,跨度、跨距、范围

布局用,独占一行
  布局用,可共用一行

文本格式化标签(熟记)

标签	显示效果
和	文字以 粗体 方式显示(XHTML推荐使用 strong)
和	文字以 斜体 方式显示(XHTML推荐使用 em)
和	文字以 加删除线 方式显示(XHTML推荐使用del)
和	文字以 加下划线 方式显示(XHTML不赞成使用u)

b i s u 只有使用,没有强调的意思 ; strong em del ins 语义更加强烈

图像标签img(重点)

img 是单标签,说明如下 :

链接标签(重点)

a标签给图片、表格、音频、视频等添加超链接,用来跳转到外部链接(URL)或者内部链接(内部页面) :

链接文字

锚点定位(难点)

通过创建锚点链接,用户能够快速定位到目标内容.

创建锚点链接分为两步:

1.使用"a herf ="#id名"链接文字/a"创建链接文本.

2.使用相应的id名称标注跳转目标的位置.

页面滚动到下面诗句位置 
.....

酒醒只在花前坐，酒醉还来花下眠；半醒半醉日复日，花落花开年复年。 

base 标签

base标签是单标签,可以统一设置页面内链接的打开方式,self 和 blank两种 :

特殊字符标签

HTML为这些特殊字符准备了专门的替代代码:

特殊字符	描述	字符的代码
	空格符
<	小于号	<
>	大于号	>
&	和号	&
¥	人民币	¥
©	版权	©
®	注册商标	®
°	摄氏度	°
±	正负号	±
✖️	乘号	×
➗	除号	÷
²	平方2(上标2)	²
³	立方3(上标3)	³

注释标签

路径(重点、难点)

相对路径:

1.图像文件和HTML文件位于同一文件夹:只需输入图像的名称即可,如:

2.图像文件位于文件的下一级文件夹:输入文件夹名称和文件名,之间用"/"隔开,如:

3.图片文件位于HTML文件的上一级文件夹:在文件名之前加入"../",如果是上两级,则需要使用"../../",以此类推,如:

绝对路径:

1.本地绝对路径(没人用)

2.网址绝对地址路径(网址地址)

列表标签

1.无序列表 ul (重点) : (无顺序符号)

 //ul标签里只能放li标签
    
列表1
 //li标签里可以放其他标签
    
列表2
    
列表3
    
列表4
    

        
水果蔬菜
        
西红柿
    

2.有序列表 ol (了解) : (有顺序符号)常用于排行榜

 //ol标签里只能放li标签
    
中国
 //li标签里可以放其他标签
    
美国
    
英国
    
法国
    
俄罗斯

3.自定义列表 (理解) : 常用于对术语或名词进行解释和描述

    
名词1
    
名词1解释1
 //dd标签围绕dt标签来说明
    
名词1解释2

    
名词2
    
名词2解释1
    
名词2解释2