HTML学习笔记

1.浏览器内核

2.网页中web标准三层组成

结构(structure):用于对网页元素进行整理和分类(html)
表现(presentation):用于设置网页元素的版式,颜色,大小等外观样式(css)
行为(behavior):网页模型的定义及交互的编写(javascript)

3.html超文本标记语言(Hyper text markup language)

用来描述网页,不是编程语言,是标记语言,标记语言是一套标记标签(markup tag)。

4.html作用

网页是由网页组成的,这些元素是利用html标签描述出来,然后通过浏览器解析,就可以现实给用户了。

5.超文本

超文本即超越文本限制,可以有图片链接音频等。不仅如此,它还能从一个文件跳转到另一个文件,于世界各地主机的文件连接(超级链接文本)。

6.html骨架标签

html标签、头部标签、网页标题标签、主体标签


    
        
    
    
    

7.html元素标签分类

常规标签(双标签(开始标签,结束标签))


  内容

空元素(单标签)


8.html标签关系

嵌套关系(包含关系、父子集关系)


    

并列关系(兄弟姐妹关系)



9.开发工具

sublime text生成html骨架结构快捷键:输入!或者html:5然后按tab键。

10.html模版

版本号
语言
字符集
常用字符集:
gb231 简单中文,包括6763个汉字
BIG5 繁体中文,港澳台等用
GBK 包含全部中文字符,是GB2312的扩展,加入对繁体字的支持,兼容GB2312
UTF-8 基本包含全世界所有国家要用到的字符。(注意格式,大写和连字符)

11.html标签的语义化

所谓标签语义化,就是指标签的含义
标签语义化目的:根据标签的语义,在合适的地方给一个最为合理的标签,让结构更加清晰。
优点:
方便带吗的阅读和维护。
让浏览器或者网络爬虫可以更好地解析,从而更好分析其中的内容。
使用语义化标签会具有更好的搜索引擎化。

12.html常用标签

1.排版标签:网页布局中最常用的标签,显示网页结构的标签,主要和css搭配使用

1)标题标签 h (共有6级)

一级标题文本

二级标题文本

三级标题文本

四级标题文本

五级标题文本
六级标题文本

2)段落标签 p

第一段文本

第二段文本

第三段文本

3)水平线标签 hr (是单标签)


4)换行标签 br(单标签)


5)div和span标签
没有语义,就是个盒子用来装元素的
特点:一行一个div,多个span在一行。

内容
内容
2.文本格式化标签:对文字设置粗体,斜体,下划线等

1)粗体
: b只是加粗,strong除了加粗还有强调的意思,语义更强烈。
2)斜体
:后面语义更强烈
3)删除线
:后面语义更强烈
4)下划线
:后面语义更强烈
补充: 标签属性

<标签名 属性1="属性一" 属性2="属性二" ...> 内容 
3.图像标签

图像标签的标签属性:



注:如果要使图片等比例缩放,width和height改一个即可,另一个会等比变化。

4.链接标签:a,anchor的缩写
 文本或图像 

注意
1)外部链接:需要添加例如 http:// www.baidu.com
2)内部链接:直接链接内部页面名称即可,如
3)空链接:如果当前没有确定链接目标,通常将链接目标设置为“#”,即href=“#”
4)不仅可以创建文本超链接,在网页中各种网页元素,如图像、表格、音频、视频等都可以添加超链接,如:

  

5)target标签属性:用于指定页面的打开方式,值为self或_blank,self为默认值,表示在当前页面打开(覆盖当前页面),_blank表示在新的页面打开。

5.注释标签

6.路径

1)相对路径:以引用文件的网页的当前位置为参考基础而建立出来的文件路径。因此,当保存于不同目录的网页引用同一个文件时,所使用的路径将不相同,故称为相对路径。

2)绝对路径:文件的完整本地位置(不推荐),或文件的完整网络地址

13.锚点定位

通过创建锚点定位,用户能够快速定位到目标内容。
步骤:
1.用id名标注跳转目标的位置。(要跳转到的)

第二集

2.创建链接文本。(被点击的)

 

14. base标签

设置整体链接打开方式




    
    
    Document
    


     百度 
     搜狐 
     新浪 
     网易 


15.预格式化文本
保留空格和换行符




    
    
    Document


    
        白日依山尽,
        黄河入海流。
        欲穷千里目,
        更上一层楼。
    

16.特殊字符

17.表格table

1.标签:

表格标签

、行标签、单元格标签
基本语法


    ...
  
  ...
单元格内的文字
2.表格属性
姓名 年龄 性别
张三 17
里斯 50
3.表头单元格标签 th

表头单元格内文字居中加粗

姓名 年龄 性别
张三 17
里斯 50
4.表格标题 caption
个人信息表
姓名 年龄 性别
张三 17
里斯 50
5.合并单元格

跨行合并:rowspan="合并单元格个数"
跨列合并:colspan="合并单元格个数"
合并单元格顺序:先上后下,先左后右。
合并单元格三部曲:
1)先确定是跨行还是跨列
2)根据先上后下,先左后右的顺序去找目标单元格,然后写上合并方式和要合并的单元格数量,比如:
3)删除多余的单元格

个人信息表
姓名 年龄 性别
张三 17
里斯 50
6.注意

1)表格定义了html中定义表格数据的方法,(不能用来做页面布局)。
2)表格由行和行中的单元格组成(没有列),列的个数取决于每行中单元格的个数。
3)表格不要纠结于外观,那是css的作用。

7.表格划分结构

thead、tbody、tfoot




  
  
  Document


  
个人信息表
姓名 年龄 性别
张三 17
里斯 50
信息地址 白塔堡

18.列表标签

表格是用来显示数据的,列表就是用来布局的,因为非常整齐和自由。
列表概念:容器里面装载着结构、样式一致的文字或图表的一种形式,叫列表。
列表特点:列表的最大特点就是整齐、整洁、有序,跟表格类似,但是他可组合自由度会更高。

1.无序列表 ul(重点)

无序列表的各个列表项之间没有没有顺序级别之分,是并列的。其基本语法格式如下:
!!!ul标签里面只能有li,不能有其他任何标签。li只有在ul里才有意义。li里面可以放任何标签。

  • 列表项1
  • 列表项2
  • 列表项3
2.有序列表 ol

所有特性基本与ul一致,但是实际中比无序列表用得少很多。

  1. 列表项1
  2. 列表项2
  3. 列表项3
3.自定义列表 dl

定义列表常用于对术语或名词进行解释和描述。定义列表的列表项前没有任何项目符号,其基本语法如下

沈阳
和平区
浑南区
铁西区
大东区
北京
昌平区
海淀区
大兴区
东城区

19.表单标签

作用:为了收集用户信息

在html中,一个完整的表单通常由表单控件(也称表单元素)、提示信息和表单域三个部分构成。
1.input标签

1)type属性:设置不同的属性值用来指定不同的控件类型。
除了type属性还有别的属性。



2)value属性:为默认的文本值(input框里的提示文字)。
3)name属性:name是表单控件的名称,后台可以通过name这个属性找到对应的表单。一组radio或一组checkbox的name是相同的。


  性别:
    男 
  爱好:
    爬山 
    睡觉 
    足球 

4)checked属性
定义选择空间默认被选中的项


  性别:
    男 
  爱好:
    爬山 
    睡觉 
    足球 

5)button普通按钮


6)submit提交按钮


7)reset重置按钮


8)图片提交按钮
必须包含src属性


9)文件域
用来上传文件


2.lable标签

概念:lable标签为input元素定义标注
作用:用于绑定一个表单元素,当点击lable标签的时候,被绑定的表单元素就会获得输入焦点。
如何绑定?
1)第一种方法就是用lable直接包裹input表单。适合单个表单选择。


2)第二种用法用for属性和id规定lable与哪个表单元素绑定



3.文本域 textarea

双标签
多行文本输入框
cols="每行中的字符数" rows="显示的行数"实际开发中不会用,直接用css设置。


4. select下拉列表

实际开发中用得比较少(可用div和li代替),因为select在不同浏览器的显示可能不同,而且select样式局限比较丑。
select中至少包含一个option。
在option中定义select="selected"时,当前选项即为默认选中项。

  

20.form表单域

通过form表单域将收集到的信息传递给服务器。




你可能感兴趣的:(HTML学习笔记)