1.什么是html
超⽂本标记语⾔ ( H yper T ext M arkup L anguage) ，标准通⽤ 标记语⾔下的⼀个应⽤。 HTML 不是⼀种编程语⾔，⽽是⼀种 标记语⾔，是⽹⻚制作所必备的。 超⽂本标记语⾔：功能⽐⽂本强⼤ , 就是指⻚⾯内可以包含图 ⽚、链接，甚⾄⾳乐、程序等⾮⽂字元素。 超⽂本标记语⾔ : 语法由标签组成2.知识点-HTML结构和基本语法
2.1HTML的结构
⽂档结构介绍：
⽂档声明：⽤于声明当前 HTML 的版本，这⾥的 <!DOCTYPE html> 是 HTML5 的声明 html 根标签：除⽂档声明以外，其它内容全部要放在根 标签 html 内部 ⽂档头部配置： head 标签，是当前⻚⾯的配置信息， 外部引⼊⽂件 , 例如⽹⻚标签、字符集等 ⽂档显示内容： body 标签，⾥边的内容会显示到浏览 器⻚⾯上2.2HTML语法规范
扩展名是 html 或者 htm html 标签不区分⼤⼩写<p></p>
<P></P>
------
<p></P>
<P></p><p id="1">hello</p>
<br/>
2.3.标签属性
属性是属于标签的，修饰标签，让标签有更多的效果 属性⼀般定义在起始标签⾥⾯。 <font color='red'>hello</ font> 属性⼀般以 属性 = 属性值 的形式存在 属性值⼀般⽤ '' 或者 “ ” 括起来。 不加引号也是可以的 . ( 不建议使⽤ )3小结
1. HTML结构
<html>
<head></head>
<body></body>
</html>3.编写HTML代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--⻚⾯的标题-->
<title>第⼀个html⻚⾯</title>
</head>
<!--⻚⾯的内容-->
<body>
hello world......
</body>
</html>
第⼆章-HTML常⽤的标签
1.实现
1.1排版标签
字体标签
<font color="字体颜⾊" size="字体⼤⼩(1~7)"
face="字体⻛格">哈哈</font><hn>标题<hn> n取值1~6, 1是⼀级标题, 2是⼆级标题...<p>段落</p><b>内容</b><i>内容</i><hr/><br/>2.图片
图⽚的格式有很多种，例如： .jpg , .jpeg , .png , .gif 等等 在 html ⾥，所有图⽚都使⽤标签 <img/> 来显示2.1图⽚标签(重要)
img 标签中的 img 其实是英⽂ image 的缩写 , img 标签的作 ⽤ , 就是告诉浏览器我们需要显示⼀张图⽚语法:
<img src="图⽚路径" width="宽" height="⾼"
alt="图⽚描述" title="⽤于告诉浏览器, 当⿏标悬停在图
⽚上时, 需要弹出的描述框中显示什么内容"/><!--掌握: src属性: 图⽚的路径; width属性:指定图
⽚的宽度 ; height属性: 指定图⽚的⾼度;
了解: alt属性: 图⽚的描述(只有图⽚显示错误的
时候才有效果); title属性: ⿏标放上去显示的标题-->
<img src="../img/b.jpg" width="400px"
height="200px" alt="美⼥" title="哈哈哈哈"/>2.2路径问题
相对路径 相对路径就是每次都从 .html ⽂件所在的⽂件夹开始查找 , 我们 称之为相对路径 同级 同级就是 " 图⽚ " 和 ".html ⽂件 " 存储在同⼀个⽂件夹中 格式 : src="QRCode.jpg" 含义 : 在 .html ⽂件所在的⽂件夹中查找名称叫做 QRCode.jpg 的图⽚ 含义 : 在 .html ⽂件所在的⽂件夹中查找名称叫做 QRCode.jpg 的图⽚<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图⽚显示案例</title>
</head>
<body>
<h1>家⽤电器排⾏榜</h1>
<img src="../img/tv01.jpg"/>
<font size="5">TCL电视, 品质保障</font>
<hr/>
<img src="../img/tv02.jpg"/>
<font size="5">TCL电视, 品质保障</font>
<hr/>
<img src="../img/tv03.jpg"/>
<font size="5">TCL电视, 品质保障</font>
<hr/>
<img src="../img/tv04.jpg"/>
<font size="5">TCL电视, 品质保障</font>
<hr/>
<img src="../img/tv05.jpg"/>
<font size="5">TCL电视, 品质保障</font>
<hr/>
</body>
</html>小结
图⽚标签<img src="图⽚的路径" width="宽" height="⾼"
alt="图⽚描述" title="⿏标放上去展示的信息"/>⽆序列表
语法
<ul type="类型">
<li>需要显示的条⽬内容</li>
...
</ul><!--⼆ ⽆序列表 ul-->
<!--type属性: 列表的类型; circle: 空⼼圆;
square: 实⼼的正⽅形-->
<ul type="square">
<!--li定义列表⾥⾯的条⽬(item). li定义在ul
⾥⾯-->
<li>乔丹</li>
<li>詹姆斯</li>
<li>艾弗森</li>
<li>科⽐</li>
<li>库⽇天</li>
</ul>超链接标签(重要)
超链接标签的基本使⽤ 超链接标签的作⽤ : 就是⽤于控制⻚⾯与⻚⾯ ( 服务器资源 ) 之间跳转的超链接标签的格式:
<a href="指定需要跳转的⽬标路径" target="打开的
⽅式">需要展现给⽤户查看的内容</a>
target属性取值:
_blank：新起⻚⾯
_self：当前⻚⾯（默认）<!--href属性: 跳转的路径(可以是本地的也可以是远程的)
target属性: 链接打开⽅式; _blank: 新开⼀个窗
⼝;_self:在当前⻚⾯打开(默认值)
-->
<a href="../03_公司简介案例/company.html"
id="top">查看公司简介</a><br/>
<a href="https://www.baidu.com"
target="_blank">跳转到百度</a><a href="#">这是⼀个假链接</a><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>友情链接</title>
</head>
<body>
<ul type="square">
<li><a href="http://www.sunlw.com"
target="_blank">Java程序员</a></li>
<li><a href="http://www.baidu.com">百度
</a></li>
<li><a href="#">⽹易</a></li> <!-- 跳转地
址略 -->
<li><a href="#">百合</a></li> <!-- 跳转地
址略 -->
</ul>
</body>
</html><form>
//1.input类型
//2.select类型
//3.textarea类型
</form>常⽤属性 action: 提交路径 , 默认是当前⻚⾯ ,# method: 提交⽅式 , 常⽤的是 get 和 post. 默认就是 get get 和 post 区别
1. 携带数据的位置 :get 是在地址栏后⾯携带的， post 是在 http 协议的请求体中携带的 2. 携带数据的类型 :get 只能携带字符串不能携带⽂件， post 可以携带任意类型的数据，所以如果是⽂件上传那么只能选择使 ⽤ post ⽅式 3. 携带数据的⼤⼩ :get 携带数据的⼤⼩⼀般不超过 4kb,post 携带数据的⼤⼩是没有限制的 ( 但是⼀般服务器都会做限制 ) 4. 安全性 :post ⽐ get 更安全 .form 的常⻅⼦标签 input: 输⼊域 , 通过 type 属性来指定类型 select : 选择列表 textarea ：⽂本域 input ：输⼊类型
<input type="xxx"/><select name="">
<option value="">显示的内容</option>
</select>