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>
html
由头
(head)
和体
(body)
组成
标签是可以嵌套的
,
标签⾥⾯可以放标签
标签⼀般由起始标签开始，结束标签终⽌
(
成对出现
)
。但是
如果标签不修饰内容，可以在标签⾥结束。
<p id="1">hello</p>
<br/>
2.3.标签属性
属性是属于标签的，修饰标签，让标签有更多的效果
属性⼀般定义在起始标签⾥⾯。
<font color='red'>hello</ font>
属性⼀般以
属性
=
属性值
的形式存在
属性值⼀般⽤
''
或者
“ ”
括起来。 不加引号也是可以的
.
(
不建议使⽤
)
3小结
1. HTML结构
<html>
<head></head>
<body></body>
</html>
2.
语法和属性基本和
xml
类似
,
但是不要背
,
练练就⾏了
实操
-HTML
快速⼊⻔
1.
需求
使⽤
HTML
展示
hello sz85...
字体颜⾊为红⾊
2.
步骤
1.
创建⼯程
2.
创建
HTML
3.
定义
font
标签
4.
设置
font
标签的
color
属性为
red
3.编写HTML代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--⻚⾯的标题-->
<title>第⼀个html⻚⾯</title>
</head>
<!--⻚⾯的内容-->
<body>
hello world......
</body>
</html>
使⽤浏览器访问
1.
把⿏标移动到右上⻆，会浮动出来浏览器按钮，点击
“Chrome”
按钮，使⽤
Chrome
浏览器打开当前⽹⻚
2.
在浏览器上看到效果
第⼆章-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/>
Ctrl+Shift+/:
注释快捷键
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="⿏标放上去展示的信息"/>
路径问题
绝对路径
(
以
http
开始的
,
以盘符开始的
)
⽆序列表
语法
<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>
标签定义，⾥边有不同的表单控件（表单
项）
常⽤表单控件（表单项）有：
<input>
,
<select>
,
<textarea>
.
表单标签【重点】
通过
form
来定义
:
包裹表单项、指定向服务器提交的路
径、提交⽅式
<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"/>
type
属性
,
类型是由属性（
type
）定义的
1. text(
默认类型
)
⽂本框
2. password
密码框
3. radio
单选框 只有当
name
属性相同的单选框，才是同⼀组
单选框才能够实现单选效果
4. checkbox
复选框 同⼀组多选框，也应该具备相同的
name
属性
5. file
⽂件选择框
6. date
⽇期选择框
7. hidden
隐藏域：向服务器提交数据，但是不在⻚⾯上展示
出来
8. submit
提交按钮：内置提交表单的功能
9. button
普通按钮：不内置任何功能，我们需要在学习
js
之
后再给他绑定点击事件
10. reset
重置按钮：内置重置表单的功能
select :
选择菜单
<select name="">
<option value="">显示的内容</option>
</select>
318
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
