2022 -8-22 第四组 曹雨 JavaWeb
什么是html：
-
HTML是用来描述网页的一种语言，
-
HTML叫做超文本标记语言
-
HTML不是编程语言，而是一种标记语言
-
HTML使用标签来描述网页（一对一对的标签）
网页由浏览器来解析
- IE
- 火狐（依赖flash）
- 谷歌浏览器 chrome
- safari 苹果浏览器
- Opera 做手机端
其他浏览器开发一般不推荐
HTML标签（HTML tag）
- HTML标签是由成对出现的尖括号包裹的关键词
- 标签通常成对出现，第一个标签是开始标签（开放标签），第二个标签是结束标签（闭合标签）结束标签由/结束
网页
HTMl文档就是网页（包含HTML标签和纯文本）
浏览器的作用就是读取HTML文档，并以网页的形式示出它们的内容
HTML头信息
head元素包含了所有的头部信息元素，如：script，link，以及各种meta，title，base
title:
- 定义了浏览器公具栏的标题
![image]()
- 显示在搜索引擎结果页面的标题
base:
描述了基本的链接地址，或者链接目录，作为HTML文档中所有的文档
link：
引用css层叠样式表
Style：
定义css层叠样式表
script:
不建议直接写在body里，可以写在body的最下方
meta（元数据）：
用来指定网页的描述，关键词，文件最后修改时间，网页作者。
可以定义搜索引擎的关键词
一些常用的标签及其效果
粗体文本
public static void main (){}
强调文本
斜体文本
键盘输入
池塘边的榕树下
知了在声声的叫着夏天
更小的文本
重要的文本
log5
2 2
链接：
普通的链接： 打开哔哩哔哩
图像链接：
邮件链接：站长信箱
列表：
- 项目1
- 项目2
- 还阿华hi
- haihaihi
- 项目1
- 内容
- 项目2
- 内容
效果
<body>
<!-- 表格 语义化：提高代码可读性 <thead> <tbody> <tfoot>写不写不会对页面产生影响
cellpadding
表单：
-->
| 学号 | 姓名 | 联系方式 | 毕业院校 |
|---|---|---|---|
| 1001 | 罗永浩 | 13635412586 | 延边第二中学 |
| 1002 | 罗翔 | 13654894842 | 北京大学 |
| 1003 | 罗斯 | 13654891233 | 芝加哥公牛 |
| 1004 | 雷军 | 13654891233 | 武汉大学 |
备注：他们都是有钱人 |
|||
框架：
效果：
表单：
action :数据的提交后台地址
method：数据的提交方式
- get：默认值，会把所有要提交的数据拼接在地址栏
- post：封装一个请求体，把数据提交给后台，不会拼接在地址栏
form表单可以发请求，a标签（超级链接标签）也可以向后台发请求
实体Entity（转义字符）
空格
& and符号
< 小于号
> 大于号
© 版权号
定义音频内容
autoplay controls自动播放
效果
定义视频内容
效果
日期：
效果：
限制表单输入内容：
（step：小箭头一次增多少 min/max：数据的范围）
（pattern="[A-Za-z]{3}：输入三个大写字母或者小写字母）
（placeholder输入框里提示信息）
效果：
css
- 定义HTML元素--样式
- 样式通常存储在样式表中
- 把样式表添加到HTML中，内容与表现分离（样式与结构分离）
- 外部样式表可以极大提高工作效率
- 外部样式通产存储在css文件中
css选择器
类选择器：
格式：
.类名{
（里面写你需要设计的样式)
}
类选择器的使用
<标签 class="类名1">（文本）</标签>
类选择器使用时，可以连续写多个类名，中间用空格隔开
<标签 class="类名1（空格隔开）类名2 ">（文本）</标签>
id选择器：
id选择器中，每个标签元素的id是唯一的，不可重复的
格式：
标签id名{
（里面写设计的样式）
}
id选择器的使用：
<标签 id="标签id名">(xxxx)</标签>
通配符（全部选择器）：
使用*来选择，可以选择页面内所有的元素，一般作为页面初始化使用
格式：
*{
(里面写设计的样式)
}
组合选择器：
格式：
标签1,标签2{
(里面写设计的样式)
}
后代选择器:
格式：
标签1（空格隔开）标签2{
(里面写设计的样式)
}
只要标签2在标签1里，符合
<标签1>
…………
<标签2>
</标签2>
</标签1>
属性选择器：
属性{
(里面写设计的样式)
}
伪类选择器
初始状态：
a:link {
}
鼠标悬停：
元素:hover {
}
激活状态：
元素:active{
}
访问过的：
元素:visited{
}
获得焦点
元素:focus{
}
浙公网安备 33010602011771号