前端之路--①超级基础的HTML5

目录

 

一、基础知识

1.浏览器内核

2.Web标准

二、HTML（上）

1.语法规范

2.基本结构标签

 

3.开发工具

4.HTML常用标签

5.注释和特殊字符

 

三、HTML（下）

1. 表格标签--展示数据

2.列表标签--整理布局

3.表单标签--收集用户信息

---

一、基础知识

1.浏览器内核

• 浏览器内核（渲染引擎）：负责读取网页内容，整理讯息，计算网页的显示方式并显示页面。

浏览器	内核	备注
IE	Trident	IE、猎豹安全、360极速、百度
firefox	Gecko	火狐
Safari	Webkit	apple浏览器
chrome/Opera	Blink	谷歌、欧朋，Blink为Webkit分支
国内	Webkit/Blink	360、UC、QQ、搜狗等

2.Web标准

• 由W3C组织和其他标准化组织制定的一系列标准的集合。W3C（万维网联盟）是国际最著名的标准化组织。

a).浏览器不同，显示页面或排版有差异；

b).好处：广泛的设备访问；广阔web发展前景；易被搜索引擎搜索；降低网站流量费；易于维护；提高浏览速度；

• Web标准的构成

a). 主要包括结构（Structure）、表现（Presentation）和行为（Behavior）三个方面

标准	说明
结构	用于对网页元素进行整理和分类，现阶段主要为html
表现	用于设置网页元素的板式、颜色、大小等外观样式，主要指CSS
行为	指网页模型的定义及交互的编写，现阶段主要是JavaScript

b). 最佳体验方式：结构、样式、行为相分离

结构写在HTML文件中，表现写在CSS文件中，行为写到JavaScript文件中

 

二、HTML（上）

1.语法规范

• 基本语法概述

a). 尖括号

b). 成对出现为双标签

c). 单个出现
为单标签

• 标签关系

a). 双标签关系分为包含关系和并列关系

 

2.基本结构标签

• 骨架标签

标签名	定义	说明
	HTML标签	根标签
	文档头部	必须要设置title
	文档标题	页面的网页标题
	文档主题	包含文档的所有内容，页面内容

 

3.开发工具

• DW、Sublime、WebStorm10、Builder、Visual Studio Code

a). vscode 创建html文件，快捷键“！”可以直接生成骨架标签（！+tab）；

ctrl+加号：放大，ctrl+剪号：缩小

b).VScode生成骨架新增代码：标签、lang语言、charset字符集

• 文档类型声明标签

a). 告诉浏览器使用哪种HTML版本来显示网页

b). 不属于html标签

• lang语言种类

a). 定义当前文档显示语言

b).en为英语网页

c). zh-CN为中文网页

d).对内容无影响，对某些浏览器可能会引起翻译功能

• 字符集

a). 字符集是多个字符的集合，以使计算机能够识别和存储各种文字

b).在标签内，可通过标签的charset属性来规定HTML文档应该使用哪种字符编码

c)UTF-8 万国码，基本包含了全世界所有国家需要用到的字符（必须写，否则会乱码）

 

4.HTML常用标签

• 标题标签

  ——

  ，独占一行。

• 段落和换行标签

a).

段落：会根据窗口大小自动换行，段落之间保有空隙。

b).
换行：无缝隙。

• 文本格式化标签

语义	标签	说明
加粗	或者	推荐strong
倾斜	或者	推荐em
删除线	或者	推荐del
下划线	或者	推荐ins

• 和标签

div	span
大盒子	小盒子
独占一行	一行可以有多个span

• 图像标签和路径

a). 图像标签

属性	属性值	说明
src	路径	必须属性
alt	文本	图像不显示的文字提示
title	文本	鼠标悬浮在图片上显示的文字
width	像素	图像宽度
height	像素	图像高度
border	像素	图像边框粗细

b). 路径

相对路径	绝对路径
以引用文件所在位置为参考基础而建立出的目录路径（图片相对于HTML的路径）	目录下的绝对位置，通常是从盘开始的。（或者图片存在网络中，引用网址）
同级、下一级（/）、上一级（../）

 

• 超链接标签

a).

属性	作用
href	指定链接目标的url地址（必须属性），超链接功能
target	指定链接页面的打开方式，其中_self为默认值，_blank为在新窗口中打开方式。

b). 外部链接/内部链接/空链接（#）/下载链接（压缩包或文件等）

c). 锚点链接：点击链接可快速定位到页面的某个位置。

· href属性中设置属性值为 #名字

· 在目标位置标签中加一个id属性=名字

 

5.注释和特殊字符

• 注释

 

快捷键ctrl+/

• 特殊字符

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

 

三、HTML（下）

1. 表格标签--展示数据

• 表格

    

        
单元格内的文字
    

定义表格，定义行， 表格头部 ，表格主体

c). 放在table标签中

• 合并单元格

a). 跨行合并： rowspan="合并单元格个数"，最上侧为目标单元格

b). 跨列合并： colspan="合并单元格个数"，最左侧为目标单元格

 

2.列表标签--整理布局

• 无序列表

    
列表项1
    
列表项2

a). ul中只能放li标签，不能直接输入文字或其他标签

b). li相当于一个容器，可以放任何标签

c). 无序列表带有自己的样式属性（小黑点），实际开发中会用CSS设置

 

• 有序列表

    
列表1
    
列表2

a). ol中只能放li标签，不能直接输入文字或其他标签

b). 无序列表带有自己的样式属性（1,2,3），实际开发中会用CSS设置

 

• 自定义列表

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

a).无任何样式

b). dl中只能有dt和dd

c).可以有多个dt或dd，经常是一个dt对应多个dd

 

3.表单标签--收集用户信息

• 表单的组成

表单域、表单控件（表单元素）、提示信息三个部分组成

• 表单域

a). 表单域是一个包含表单元素的区域

b).

定义单元格 表头单元格 a). 一般位于表格第一行或第一列，加粗居中显示 b).	标签表示表格的表头部分 姓名 表格属性 a). 不常用，后续通过CSS设置 属性名 属性值 描述 align left、center、right 表格相对周围元素对齐方式 border 1或"" 表格是否有边框 cellpadding 像素值 规定单元边沿与其内容之间的空白，默认为1像素 cellspacing 像素值 规定单元格之间的空白，默认为2像素。 width 像素值或百分比 表格宽度 b). 写在table标签中 表格结构标签 a). 适用于长表格，分为表格头部和表格主体； b).

属性	属性值	作用
action	url地址	指定接收并处理表单数据的服务器程序的url地址
method	get/post	设置表单数据的提交方式，其取值为get或post
name	名称	指定表单的名称，区分同页面多表单

• 表单控件-input

属性值	描述
button	点击按钮（多数情况通过Javascript启动脚本）
checkbox	复选框
file	输入字段和“浏览”按钮，供文件上传
hidden	隐藏的输入字段
image	图像形式的提交按钮
password	密码字段，字段被掩码
radio	单选
reset	重置，清除表单所有数据
submit	提交，把表单数据发到服务器
text	输入字段，默认宽度为20字符

a) 除了type以外，input还有其他属性：

属性	属性值	描述
name	由用户自定义	input的名称
value	由用户自定义	input的值
checked	checked	规定此input首次加载时应当被选中（主要针对单选和复选按钮）
maxlength	正整数	规定输入的字符最大长度

· name和value是每个表单元素都有的属性值，主要给后台人员使用

· name要求单选按钮和复选框要有相同的name值

 

 b). 标签

· 为input元素定义标签（标注）

· 用于绑定一个表单元素，当点击标签内文本时，浏览器就会自动将焦点（光标）转到或者选择对应的表单元素上，用来增加用户体验

用户名

• 表单控件--select

    选项1
    选项2

a). 默认选中：selected="selected"

• 表单控件--teaxtarea

内容较多的情况，利用，例如留言板、评论</p> <pre class="has"><code class="language-html"><textarea rows="3" cols="20"> 文本内容

a). cols="每行中的字符数",rows="显示行数"，实际开发中不会使用，使用css