Web标准也称网页标准,由一系列的标准组成,大部分有W3C(World Wide Web Consortium,万维网联盟)负责制定。
三个组成部分:
- HTML:负责网页的结构(页面元素和内容)。
- CSS:负责网页的表现(页面元素的外观、位置等页面样式,如:颜色、大小等)。
- JavaScript:负责网页的行为(交互效果)。
什么是HTML、CSS?
HTML(Hyper Text Markup Language):超文本标记语言。
超文本:超越了文本的限制,比普通文本更强大。除了文字信息,还可以定义图片、音频、视频等内容。
CSS(Cascading Style Sheet):层叠样式表,用于控制页面的样式(表现)。
用户手册W3school
标题排版
1.标题标签
- 标签:<h1>...</h1>(h1 -> h6 重要程度依次降低)
- 注意:HTML标签都是预定义好的,不能自己随意定义。
2.水平线标签<hr>
3.图片标签<img src="..." height="...">
- 绝对路径:绝对磁盘路径(D:/xxxx)、绝对网络路径(https://xxxx)
- 相对路径:从当前文件开始查找。(./:当前目录,../:上级目录)
标题样式
1.CSS引入方式
- 行内样式:<h1 style= "...">
- 内嵌样式:<style>...</style>
- 外联样式:xxx.css <link href="...">
2.颜色表示
- 关键字:red、green、blue
- rgb表示法:rgb(255,0,0)、rgb(134,100,89)
- 十六进制:#ff0000、#cccccc、#ccc
3.颜色属性
color:设置文本内容的颜色
4.<span>标签
- <span>是一个在开发网页时大量会用到的没有意义的布局标签
- 特点:一行可以显示多个(组合行内元素),宽度和高度默认由内容撑开
5.CSS选择器
- 元素选择器:标签名
- 类选择器:.class属性值
- id选择器:#id属性值
- 优先级:id选择器 > 类选择器 > 元素选择器
- 注意:选择器后面的 { } 里面的语句应该带上分号
6.CSS属性
- color:设置文本的颜色
- font-size:字体大小(注意:记得加px)
超链接
1.超链接
标签:<a>
属性:
href:指定资源访问的url
target:指定在何处打开资源链接
_self:默认值,在当前页面打开
_blank:在空白页面打开
2.CSS属性
text-decoration:规定添加到文本修饰,none表示定义标准的文本。
color:定义文本的颜色
正文排版
1.音频、视频标签
<audio> <video>
2.换行、段落标签
换行:<br>;段落:<p>
3.文本加粗标签
<b>(仅是加粗) <strong>(含有强调的意思)
4.CSS样式
line-height:设置行高
text-indent:定义第一个行内容的缩进
text-align:规定元素中的文本的水平对齐方式
5.注意
在HTML中无论输入多少个空格,只会显示一个。可以使用空格占位符:
页面布局
1.CSS盒子模型
组合:内容(content)、内边框(padding)、边框(border)、外边框(margin)
2.CSS属性
width:设置宽度
height:设置高度
border:设置边框的属性,如:1px solid #000;
padding:内边框
margin:外边框
注意:如果只需要设置某一个方位的边框、内边距、外边距,可以在属性名后加上 -位置,如:padding-top、padding-left、padding-right ...
表格标签
标签 | 描述 | 属性/备注 |
---|---|---|
<table> | 定义表格整体,可以包裹多个<tr> | border:规定表格边框的宽度 width:规定表格的宽度 cellspacing:规定单元之间的内容 |
<tr> | 表格的行,可以包裹多个<td> | 表格有多少行就有多少个<tr> |
<td> | 表格单元格(普通),可以包裹内容 | 如果是表头单元格,可以替换为<th> |
<th> | 表示表头单元格,具有加粗居中的效果 | 只能用于表头第一行 |
表单标签
1.表单标签:<form>
2.表单属性:
action:表单数据提交的url地址
method:表单提交方式
- get:表单数据拼接在url后面,?username=java,大小有限制
- post:表单数据在请求体中携带,大小没有限制
注意:表单项必须有name属性才可以提交
表单项标签
- <input>的type属性:text、password、radio、checkbox、file、date、datetime-local、time、number、hidden、button、submit
- <select>定义下拉列表
- <textarea>定义文本域