html css复习

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>

  • 38
    点赞
  • 36
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值