HTML快速入门
目录
1.前端开发三种语言
HTML5 网页的结构
CSS3 网页的表现
JavaScript 网页的行为
2.前端开发三种框架
VUE.JS React Angular
3.HTML含义
HTML是英文HyperText Markup Language的缩写，即超文本标记语言。
4.HTML5特性
- 良好的语义特性
- 强大的绘图功能
- 增强的音视频播放和控制功能
- HTML5的数据存储和数据处理的功能
- 获取地理位置信息
- 提高页面响应的多线程
- 文件API
5.HTML5开发工具简介
文档编辑工具Nodepad++等
可视化网页开发软件Dreamweaver CS6
集成开发环境WebStorm和IntelliJ IDEA
vscode（推荐）
二、HTML5的文档结构元素
1.HTML元素
HTML元素指的是从开始标记（start tag）到结束标记（end tag）的所有代码。其内容是开始标记与结束标记之间的内容。
2.HTML元素的属性
属性用来说明元素的特征，属性的格式通常为“属性/值”对。
3.HTML的字符实体
字符实体有三部分：一个符号 (&)，一个实体名称，以及一个分号 (;)
空格  ； 小于号<； 大于号>；
4.HTML标记的书写规范
所有标记要用尖括号（< >）扩起来；
标记和属性名不区分大小写，建议统一小写；
空格和回车是无效的，需要使用HTML实体；
标记中不能有空格，如把<title>写成<title>；
采用标记嵌套方式可以为同一个内容应用多个标记；
书写注释，方便程序开发。<!-- -->
5.HTML文档的基本结构元素
<!DOCTYPE html><html><head>....</head><body>....</body></html>
<!DOCTYPE> 文档类型声明，作用就是告诉浏览器使用哪种HTML版本来显示网页。
<!DOCTYPE html>即当前页面采取的是 HTML5 版本来显示网页.
<html>和</html>标记表示该文档是HTML文档。
<head> 和</head>标记表示文档头部信息。
<body>和</body>标记是网页的主体信息
1.头部内容
<head>标记是所有头部标记的容器，它是开始标签<html>后出现的第一个标签，以<head>开始，以</head>结束，开始和结束之间可以包含标题信息、元信息、定义CSS样式和JavaScript脚本代码等。
<head>标记中的内容，一般不会显示在网页上。以下是<head>中所包含的标记。
1.标题<title>标记
<title>只能包含关于网页标题的文本
<title> 网页标题</title>
2.元信息<meta>标记
<meta>标记可提供相关页面的元信息(meta-information)，有以下4种使用方法
- 字符集charset属性
规定 HTML 文档应该使用哪种字符编码
<meta charset=“UTF-8”/> - 关键字描述
向搜索引擎说明网页的关键字
<meta name=“keywords” content= “关键字1，关键字2”/>- 页面描述
对一个网页概括的描述
<meta name= “description” content= “网页的简介”/>- 页面跳转
<meta http-equiv= “Refresh” content= “时间间隔的秒数；url=要跳转的网站”3.<base>标签
为页面上的所有链接规定默认地址或默认目标
<basehref= “http://www.baidu.com”></base><base target= “_blank”/>4.<link>标签
链接外部文件，例如样式表等
<head><link rel= “stylesheet” type= “text/css” href= “index.css”></head>2.主体内容
即body元素包含文档的所有内容（比如文本、超链接、图像、表格和列表）等等。HTML 5增加了article、section、nav、aside、header、footer等布局元素，以实现更好的语义解释。
三、HTML5的基本页面元素
1.文本元素
段落标记<p>和换行标记<br/>
段落标记<p>来描述段落。网页显示时，包含在<p></p>标记对中的内容会显示在一个段落里。另起一行使用换行标记<br/>。
标题标记<hn>
n取1-6，h1最大，h6最小
块标记<div>和<span>
<div>是一种块（block）容器，默认的状态是占据一行，而<span>是一个行间(inline) 容器，其默认状态是行间的一部分。
2.列表元素
有序列表标记<ol>
<ol type="" start=""> <li>列表信息</li> <li>列表信息</li> <li>列表信息</li> <li>列表信息</li> ... </ol>type属性可以修改有序列表序号的样式
属性值 说明
1 数字1、2…
a 小写字母a、b…
A 大写字母A、B…
i 小写罗马数字i、ii、iii…
I 大写罗马数字Ⅰ、Ⅱ、Ⅲ…
start属性可以设置列表序号的起始值。
无序列表标记<ul>
<ul type=""> <li>列表信息</li> <li>列表信息</li> <li>列表信息</li> <li>列表信息</li> ... </ul>无序列表的每个列表项目前默认显示黑色实心圆点。type属性修改无序列表符号的样式，disc实心圆点（默认），square方形，circle空心圆圈
自定义列表<dl>
<dl> <dt>关注我们</dt> <dd>新浪微博</dd> <dd>官方微信</dd> <dd>联系我们</dd> </dl>它是一系列项目和它们的解释。自定义列表以<dl>标记开始，自定义列表项目以<dt>开始，自定义列表的解释以<dd>开始。
3.超链接元素<a>
超链接属性
target属性可取下表所列各值：
超链接类型
1.内部链接
将超链接标记<a>中href属性的URL值设置为相对路径，就可以在HTML文件中定义内部超链接。
2.外部链接
外部链接指网页中的链接标题可以链接到网站外部的文件，需要定义外部链接时，在超链接标记<a>中，将其href属性的URL值设置为绝对路径即可。
3.书签链接
如果有的网页内容特别多，页面特别长，需要不断翻页才能看到想要的内容，这时，可以在页面中（一般是页面的前部）定义一些书签链接。
超链接路径
1.绝对路径
绝对路径指文件的完整路径，包括文件传输的协议HTTP、FTP等，一般用于网站的外部链接。http://www.baidu.com
2.相对路径
相对路径是指相对于当前文件的路径，它包含了从当前文件指向目的文件的路径，适用于网站的内部链接。
🍑同一目录
直接输入要链接的文档名 index.html
🍑链接上一目录
先输入“../”，再输入目录名 ../images/pic1.jpg
🍑链接下一目录
先输入目录名，后加入“/” videos/v1.mov
3.根路径
根路径的设置以“/”开头，后面紧跟文件路径，例如：/download/index.html。
基准URL标签<base>
如果一个页面中<a>、<img>、<link>、<form>等标签的绝大部分的链接URL的前面部分都是一样或<a>、<form>等标签的链接目标窗口大部分相同时，可以将URL这个公共的部分或公共的目标窗口提取出来放到<base>中进行设置，而不必分别在每个标签中一一设置。
基准URL设置语法：
<base href=”URL公共部分” target=”公共窗口名”/>
4.图像元素和多媒体元素
| 标签 | 功能 |
|---|---|
| <marquee> | 设置文字在页面中的滚动效果 |
| <img> | 在网页中嵌入图像 |
| <embed> | 在网页中嵌入Flash动画、音频和视频等多媒体内容 |
| <audio> | 在网页中嵌入音频 |
| <video> | 在网页中嵌入视频 |
图像标记<img>
利用<img>标记插入图像是网页中最常用的图像插入方式。<img>标记并不是在网页中插入图像，而是从网页上链接并显示一幅图像。
| 属性名 | 说明 |
|---|---|
| src | 图像地址 |
| title | 提示文本，鼠标放到图片上时提示的文字 |
| alt | 替换文本,图像显示不出来时的文字 |
| width/height | 设置图像宽度/高度 |
| border | 设置图像边框 |
| align | 设置图像对齐方式 |
多媒体文件标记<embed>
src url地址
autostart 自动播放
loop 循环播放
滚动文字设置<marquee>
基本语法
<marquee>滚动文字</marquee>
主要有direction和behavior属性
direction属性值有：
up 设置文字向上滚动
down 设置文字向下滚动
left 设置文字向左滚动(默认方向）
right 设置文字向右滚动
behavior属性值有：
| behavior属性值 | 意义 |
|---|---|
| scroll | 设置文字循环往复滚动（默认行为） |
| slide | 设置文字只进行一次滚动 |
| alternate | 设置文字交替进行滚动 |
| scrollamount | 设置某个数值n ，设置文字滚动速度，值越大越快，默认值为6 |
| scrolldelay | 设置某个数值n , 设置文字在每一次滚动后，延迟一段时间后再进行下一次滚动，单位为毫秒，值越小越快 |
5.表格元素
标签 说明
<table> 表格标记
<tr> 行标记
<td> 单元格标记
<th> 表头标记
<table>的属性
设置表格边框宽度——border
设置单元格跨列——colspan
设置单元格跨行——rowspan
- 点赞
- 收藏
- 关注作者
评论（0）