HTML
基本语法
标签
单标签
<br/>换行
<hr/> 水平线
属性
align 内容展示的方式
size
width
双标签
<title>…</title>
属性值
<body bgcolor="red">…</body>
<font size="7">…</font>
整体结构
标记头区
内容区
网页区
DOCTYPE
超⽂本标记语⾔的类型
常用标签
标题
<h1></h1>
属性
align
size
width
水平线
<hr />
段落
<p></p>
属性
left、right、center、justify(两端对齐)
换行
<br/>
列表
有序列表
属性
type
值
1：⽤数字形式表示序号（默认）
a：⽤⼩写字⺟表示序号
A：⽤⼤写字⺟表示序号
i：⽤⼩写罗⻢数字表示序号
I（⼤写i）：⽤⼤写罗⻢数字表示序号
无序列表
属性
type
dise：实⼼圆（默认）
circle：空⼼圆
square：⽅块
块级元素
div
属性
left
right
center
span
格式化标签
font
属性
face 字体
color
size
pre
⽂本标签
粗体
<b>
<strong>
斜体
<i>
下划线
<u>
中划线
<del>
小字
H<sub>2</sub>O
2<sup>3</sup>
图片
src
链接图片的地址
border
边框
width
宽度
height
高度
alt
当图片加载失败时显示的文本内容
title
图片的标题（鼠标悬停在图片上显示）
超链接
属性
href 用于设置需要链接页面的地址
URL
target 设置链接打开的方式
blank：开启新⻚⾯显示⻚⾯；
self：当前⻚⾯显示跳转到⻚⾯，默认值。
_top：⽤于有frameset布局的⻚⾯，想要覆盖整个⻚⾯显示。
Framename：这⾥framename与上边的值不同，具体以为frame起了什么样的名字为准，该值指示要连接的⻚⾯跳转后将在相应名称的框架中显示。
表格
table
tr
td
colspan
rowspan
th
表头，居中且字体加粗
属性
align
right
left
center
bgcolor
valign 垂直方向的对齐方式
top
middle
bottom
属性
align 单元格内容的对齐方式
right
center
left
boder
px
width
px
%
表单
form
action
数据传输的地址
method
get
post
name
表单设置名称
target
请求打开的方式
表单元素
input标签
type
text
password
radio
圆形
单选
checkbox
方形
多选
value
设置标签默认值
checked
默认选中
checked='checked'
disabled
禁用
disabled='disabled'
readonly
只读
readonly='readonly'
maxlength
最大长度
maxlength=值
placeholder
提示语
button 按钮
type
reset
button
submit
提交
文本域
textarea
cols
规定文本区内的可见宽度
rows
规定文本区内的可见行数
下拉框
select
size
显示出来的个数
multiple
设置多选
option
selected
默认选中
字符实体
CSS
行内样式
内部样式
外部样式
常用属性
背景
background-color
设置元素的背景颜色
background-image
设置元素的背景图像，默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体。
background-repeat
设置是否及如何重复背景图像
文本
text-align
left
right
center
color
设置字体颜色
font-family
设置字体样式 后备机制
text-indent
设置文本首行缩进
text-decoration
设置字体样式
underline
对文本添加下划线。
overline
对文本添加上划线。
line-through
对文本添加中划线，与HTML中的s和 strike 元素相同。
none
关闭原本应用到元素上的所有装饰。
font-size
文本大小
font-style
字体风格，该属性最常用于规定斜体文本
normal
文本正常显示
italic
文本斜体显示
oblique
文本倾斜显示，oblique是将文字强制倾斜。
font-weight
字体加粗，该属性设置文本的粗细
100-900
400正常体
700加粗
display属性
display
属性规定元素应该生成的框的类型。这个属性用于定义建立布局时元素生成的显示框类型
鼠标过去会显示
none
不显示元素
block
将元素设置为块级元素
inline
将元素设置为行内元素
float 浮动
none
left
right
选择器
基本选择器
通用选择器
选中页面中所有元素
*
id选择器
选择设置过指定id属性值的元素
#c1
类选择器
选择设置过指定class属性值的元素
.cls
元素选择器
选择指定标签
p
分组选择器
p,.cls,#c1
优先级
元素选择器：1
类选择器：10
id选择器：100
内联样式：1000
组合选择器
由两个选择器组成
后代选取器(以空格分隔)
选中后面嵌套的所有的
子元素选择器(以大于号分隔）
选中后面的一个
相邻兄弟选择器（以加号分隔）
相邻选中下面一个
普通兄弟选择器（以波浪线分隔）
选中同级元素
table表格
table 表格标签
tr 表格的行
th 表头，居中且字体加粗效果
td 标准单元格，居左对齐
table属性
border 边框
width 宽度
height 高度
align 对齐方式
tr属性
align 单元格内容的水平对齐方式
valign 垂直方向的对齐方式
style="border-collapse: collapse;"
设置边框的显示效果
collapse 合并边框
separate 分离边框（默认）
HTML中标签元素三种不同类型：块状元素，⾏内元素，⾏内块状元素
表单
form 表单用于向服务器传输数据。form 元素是块级元素，其前后会产生折行
属性
action: 数据传输的地址
method:
get 默认,数据在地址栏上，安全性差，有缓存，数据量有限
post 数据单独封装在请求体中，安全性较好，无缓存，数据量理论无限
name: 表单设置名称
target 请求打开的方式
表单元素 （表单元素的数据想要提交出去，必须设置name属性）
input标签⽤于搜集⽤户信息
属性
type
text
password
radio
checkbox
......
value 设置标签默认值
checked 默认选中
checked='checked' 默认选中
disabled 禁用
disabled='disabled'
readonly 只读
readonly='readonly'
maxlength 最大长度
maxlength=值
placeholder 提示语
button 按钮
属性
type
reset
button
submit 提交
文本域
textarea
该标签定义多行的文本输入控件。文本区中可容纳无限数量的文本，可以通过 cols 和 rows 属性来规定 textarea 的尺寸。cols规定文本区内的可见宽度。rows规定文本区内的可见行数。
下拉框 （如果下拉框选项没有value值那么会将标签体中的文本内容提交出去）
select
属性
size 显示出来的个数
multiple 设置多选
option
属性
selected 默认选中
！如果想使用表单文件上传的功能，必须将请求方式先改为post，设置表单属性 enctype="multipart/form-data"
二进制表单：enctype="multipart/form-data"
普通表单：application/x-www-form-urlencoded
<!--
字符实体
空格
小于号 <
大于号 >
版权号 ©
-->
CSS是⽤来美化⽹⻚⽤的
<!--
CSS
层叠样式表
格式
选择器名 {
属性 : 属性值;
......
}
注意点：
1. css声明要以分号;结束，声明以{}括起来
2. 建议一行书写一个属性
3. 若值为若干单词，则要给值加引号，如 font-family: "agency fb";
-->
<!--
CSS使用
1.行内样式
写在具体的标签中，通过style属性将样式设置上去，多个样式分号;隔开
<div style="background-color: aquamarine;">块级元素hello</div>
2.内部样式
定义在head标签上的style标签中
<style type="text/css">
div{
background-color: #0000FF;
}
</style>
3.外部样式
在外部创建一个css文件，在head标签上通过link标签引入进来
<link rel="stylesheet" type="text/css" href="css/style.css"/>
rel 当前文件与引入文件的关系
type 引入文件的类型
href 引入文件的地址
CSS样式的优先级：就近原则
<!-- 内部样式 -->
<!--
基本选择器
通用选择器 *选中页面中所有元素
id选择器 选择设置过指定id属性值的元素 #
类选择器 选择设置过指定class属性值的元素 .
元素选择器 选择指定标签
分组选择器 可以共同调⽤⼀个声明，元素之间⽤逗号分隔
CSS样式的优先级，是根据选择器的精确度/权重来决定的，常见的权重如下，权重越大，优先级越高
元素选择器：1
类选择器：10
id选择器：100
内联样式：1000
共有属性id name class
<!--
组合选择器 由两个选择器组成
后代选取器(以空格分隔)
子元素选择器(以大于号分隔）
相邻兄弟选择器（以加号分隔）
普通兄弟选择器（以波浪线分隔）
-->
<style type="text/css">
/* 后代选取器(以空格分隔) */
/* .food li{
border: 1px solid black;
} */
/* 子元素选择器(以大于号分隔） */
/* .food > li{
border: 1px solid black;
} */
/* 相邻兄弟选择器（以加号分隔） */
/* #d + div{
border: 1px solid black;
} */
/* 普通兄弟选择器（以波浪线分隔） */
<!--
常用属性
背景
background-color 设置元素的背景颜色
background-image 设置元素的背景图像，默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体。
background-repeat 设置是否及如何重复背景图像
文本
text-align 文本显示方式
left、right、center
color 设置字体颜色
font-family 设置字体样式 后备机制
text-indent 设置文本首行缩进
em一个相对值，例如页面的文本大小为17px,则2em就为17px*4
text-decoration 设置字体样式
underline
对文本添加下划线。
overline
对文本添加上划线。
line-through
对文本添加中划线，与HTML中的s和 strike 元素相同。
none
关闭原本应用到元素上的所有装饰。
font-size 文本大小
font-style 字体风格，该属性最常用于规定斜体文本。 属性值：normal、italic、oblique
normal：文本正常显示；
italic：文本斜体显示；
oblique：文本倾斜显示，oblique是将文字强制倾斜。
font-weight
字体加粗，该属性设置文本的粗细。 100-900 400正常体 700加粗
display属性
display 属性规定元素应该生成的框的类型。这个属性用于定义建立布局时元素生成的显示框类型。
none 不显示元素
block 将元素设置为块级元素
inline 将元素设置为行内元素
float 浮动
float的属性值有none、left、right。
-->
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
