HTML
1. HTML文件结构
<html>
<head>...</head>
<body>...</body>
</html>
- <html></html>称为根标签，所有的网页标签都在<html></html>中。
- <head> 标签用于定义文档的头部，它是所有头部元素的容器。
<head>
<title>...</title> // 显示网页的标题信息
<meta>
<link>
<style>...</style>
<script>...</script>
</head>
- 在<body>和</body>标签之间的内容是网页的主要内容，如 h1, p, a, img 等网页内容标签。
2. 标签
- p标签：段落标签，显示段落文字，常用于文章正文中
- h标签：h1-h6代表不同大小文字的标题
- strong: 加粗文本， em: 斜体文本
- span：设置单独样式的文本, 例如设置蓝色字体
<style>
span{
color:blue;
}
</style>
- q标签：引用文字，显示为添加引号
- blockquote标签：长文本引用标签，单独形成一段
- br：换行标签
- hr：分割线
-  : 文本中添加空格
- address：地址标签，用于地址，邮件等
- code标签：代码标签，用于显示代码
- pre：显示多行代码
- ul-li：无序列表
- ol-li：有序列表
- div：容器
- talbe：表格标签
<table>
<tbody>
<tr>
<th>班级</th>
<th>学生数</th>
<th>平均成绩</th>
</tr>
<tr>
<td>一班</td>
<td>30</td>
<td>89</td>
</tr>
<tr>
<td>二班</td>
<td>35</td>
<td>85</td>
</tr>
</tbody>
</table>
- caption：为表格添加标题
- a：链接标签，在新页面中打开链接添加 target="_blank", 如果是链接到邮箱，在href内容中添加 mailto，添加subject邮件主题，body邮件内容
<a href = "https://www.jianshu.com" target = "_blank">简书</a>
<a href="mailto:18840839565@163.com ?subject=观了不起的盖茨比 &body=你好，对此评论有些看法">对此影评有何感想，发送邮件给我</a>
- img：图片标签,src 可以是本地文件也可以是网址
- form：表单 / 下拉列表框
/// 传送方式为post/get， action：浏览者输入的数据被传送到的地方,比如一个PHP页面
<form method="传送方式" action="服务器文件">
所有表单控件（文本框、文本域、按钮、单选框、复选框等）都必须放在 <form></form> 标签之间
- input：由type决定形式
<form action="post" method="save.php">
<!--
type: text 可以输入文本内容 / password 输入密文 / submit 提交按钮 / reset 重置按钮 / radio 单选框
checkBox：复选框 value：提交数据到服务器的值（后台程序PHP使用） name：为控件命名，以备后台程序 ASP、PHP 使用
checked：当设置 checked="checked" 时，该选项被默认选中
-->
账户：
<input type="text" name="usrname" id="usrname" value="" />
<br>
密码：
<input type="password" name="pas" id="pas" value=""/>
<input type="submit" value="submit"/>
<input type="reset" name="reset" id="reset" value="reset" />
<input type="radio" name="单选框" id="" value="" />
<input type="checkbox" name="复选框" id="" value="" />
</form>
表单中添加标签：
<label for="male">男</label>
- textarea：多行文本输入
- selected-option: 选择框，默认为单选，添加mutible是为复选框
<select>
<option value="shanxi">山西</option>
<option value="liaoning">辽宁</option>
<option value="shanghai">上海</option>
</select>
// 复选框用这个：<select multiple="multiple">
CSS
1.基本样式
CSS全称为“层叠样式表 (Cascading Style Sheets)”，它主要是用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等。
- 基本样式，包括字体、颜色、边界等内容
font-size:12px; /*设置文字字号*/
color:red; /*设置文字颜色*/
font-weight:bold; /*设置字体加粗*/
border:1px solid red /*边框 1px，实现，红色*/
- 选择器：标签选择器、类选择器、ID选择器、子选择器、包含（后代）选择器、通用选择器、伪类选择符、分组选择符。
- 标签选择器，权值为1
/* 标签名+{} */
p{}
- 类选择器， 权值为10
/* . + 自定义类名 + {}*/
.customStyle { color: purple; }
- ID选择器，权值最高 为100
/* # + id + {} */
#testSytle {color: orange;}
- 子选择器，定义当前类下的第一个对应的子元素
/* . + class + > + 子元素 */
.customStyle>div{ background-color: purple; } /* customStyle 类下的第一个div的背景色为紫色 */
- 包含（后代）选择器，定义当前类下所有对应子元素的样式
/* . + class + space + 子元素 */
.customSpan span{ color: white; } /* 定义当前类下所有的span 颜色为白色 */
- 通用选择器
/* * + {} */
* { color: red } /* 匹配所有元素 设置颜色为红色, 权值最低 */
- 伪类选择符
a:hover{ color: pink; } /* 常用的就这一种，当鼠标滑过是显示字体颜色为pink */
- 分组选择符
/* 多种选择器之间用逗号隔开 */
.customSpan,span,#lol{color: white;} /* 类选择器 + 标签选择器 + ID选择器*/
- 标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100，分组选择器权值为个选择器权值之和，权值越高，优先级别越高，当两者权值相同时，取后者。对应的：内联样式表（标签内部）> 嵌入样式表（当前文件中）> 外部样式表（外部文件中）。
- 当希望增加某个标签的重要性是，使用 “ !important ”
p{color:red!important;}
2.格式化排版
- 字体
font-family: "微软雅黑";
- 字号，颜色
font-size:12px;color:#666；
- 粗体
font-weight:bold;
- 斜体
font-style:italic;
- 下划线
text-decoration:underline;
- 删除线
text-decoration:line-through;
- 缩进
text-indent:2em; /* 缩进2个字符 */
- 行间距
line-height:1.5em; /* 1.5倍行间距 */
- 字间距
letter-spacing:50px;
word-spacing:50px
- 对齐
text-align:center;
text-align:left;
text-align:right;
3.盒模型
- 块级元素
diaplay:block;
- 内联元素
display:inline;
- 内联块元素
display:inline-block;
- 边界
/* 设置各个方向 */
border-bottom:1px solid red;
border-top:1px solid red;
border-right:1px solid red;
border-left:1px solid red;
/* 统一设置 */
border:1px solid red;
- 宽度和高度，一个元素实际宽度（盒子的宽度）=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。
margin:10px; /* border向外 */
border-bottom:1px dotted #ccc; /* border */
padding:10px; /* border向内 */
width:200; /* 内容宽度 */
/* 填充, 上右下左顺时针顺序 */
padding:20px 10px 15px 30px;
/* 边界，上右下左顺序 */
margin:20px 10px 15px 30px;
4.部局模型
- 流动模型
网页元素默认为Flow布局：块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%，内联元素会在所处的包含元素内从左到右水平分布显示。 - 浮动模型
任何元素默认是不能浮动的，但可以添加下面代码来进行设置
float:left;
float:right;
-
层模型
层模型有三种形式：
1、绝对定位(position: absolute)： 将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口；
2、相对定位(position: relative)：相对于自身原来的位置进行移动；
3、固定定位(position: fixed)：固定位置，不会随着页面滚动位置进行变化； -
定宽元素居中
width:200px;/*定宽*/
margin:20px auto;/* margin-left 与 margin-right 设置为 auto */
- 不定宽元素居中
margin:0 auto;
/* 利用相对位置进行偏移 */
position:relative;
left:50%;
/* 设置为内联元素 */
display:inline;
网友评论