目录
一、HTML
1.1、基础标签
HTML
超文本标记语言
基础语法
标签
单标签
无属性 <标签名 />
有属性 <标签名 属性名="属性值" />
双标签
无属性 <标签名></标签名>
有属性 <标签名 属性名="属性值"></标签名>
整体结构
<html></html> 表示当前是一个网页
<head></head> 头部信息
<body></body> 身体部分
doctype
<doctype html> html5版本声明，需要写在文档的第一行
注意：标签的属性之间要以空格隔开。 body标签 bgcolor 背景颜色 1.颜色名 2.rgb 3.16进制 text 字体颜色 1.颜色名 2.rgb 3.16进制 标题标签 <h1></h1>~<h6></h6> 依次从大到小 不建议在页面中写多个h1标签，h1标签可以被搜索引擎获取到，如果有多个，可能会进入搜索引擎的黑名单。 水平线标签 <hr> width 宽度 1.百分比 2.px align 对齐方式 left right center（默认） size 水平线粗细
段落和换行
段落标签
<p></p> 段落会自动换行
常用属性：
align 对齐方式
left 居左对齐（默认）
right 居右对齐
center 居中对齐
justify 两端对齐
换行标签
<br> <br/>
列表
无序列表
格式：
<ul>
<li></li>
<li></li>
</ul>
常用属性：
type 列表的图标
square 实心方块
circle 空心圆
disc 实心圆 （默认）
有序列表
格式：
<ol>
<li></li>
<li></li>
</ol>
常用属性：
type 列表的图标
1 数字序号 （默认）
a 小写字母
A 大写字母
i 小写罗马字母
I 大写罗马字母
<h2>层与块</h2> <!-- div和span div标签 层，块级元素，标签会自动换行。 常用于布局。 常用属性： align div元素中内容的对齐方式 span标签 块，行内元素，标签不会自动换行。
<h2>格式化标签</h2> <!-- 格式化标签 font （行内元素，不会自动换行） 设置字体相关的属性 常用属性： color 字体颜色 （颜色名、十六进制、rgb） size 字体大小 face 字体风格 pre 定义预格式化的文本。保留文本中的空格和换行。文本呈现等宽字体。 行内元素 粗体 b strong 斜体 i 下划线 u 中划线 del 下标 sub 上标 sup
1.2、a标签
<h2>a标签</h2> <!-- 超链接a标签 定义超链接，用于从一个页面链接到另外一个页面。 行内元素，不会自动换行。 常用属性： href 必须属性（如果未设置该属性，则a标签与普通文本没有什么区别） 需要跳转的地址 target 窗口打开的方式 _self 当前窗口打开（默认） _blank 新开空白窗口打开 _parent _top --> <!-- 锚点的实现 如果想要跳转到当前页面，那么href的值可以设置为# 1. 利用a标签的name属性 2. 利用其它标签的id属性 -->
1.3、图片
<h2>图片</h2> <!-- 图片 img标签，行内标签，不会自动换行 必须属性： src 被引入的图片的地址 常用属性： title 当鼠标悬停在图片上时显示的文字 alt 当图片加载失败时显示的文本 width 设置图片的宽度 height 设置图片的高度 align 规定如何根据文本来排列图像
1.4、表格
<h2>表格</h2> <!-- 表格 table 表示表格 tr 表示表格中的行（每一行可以包含一个或多个td或th） td 表示表格中的标准单元格 th 表示表格中的表头单元格（具有标题的效果，字体加粗，居中显示） table常用属性 border 表格的边框 width 表格的宽度 像素值或百分比（如果是百分比，参考的是上一级元素的宽度，如果上一次元素未设置，则参考屏幕宽度） height 表格的高度 align 表格的对齐方式 （left、right、center） tr常用属性 align 每行中文本内容的水平方向对齐方式（left、right、center） valign 每行中文本内容的垂直方向对齐方式 bgcolor 设置行的背景颜色 css样式 border-collapse: collapse; 合并表格边框 合并单元格 <td>的colspan和rowspan分别规定单元格横跨的列数和行数 纵向合并 rowspan 横向合并 colspan
1.5、表单
<h2>005表单</h2> <!-- 所有标签都有的属性： id属性 用来标识元素的唯一性 name属性 提交数据时的参数名 style属性 设置元素的行内样式（具体的样式） class属性 设置元素的样式名 表单 form 表单用于向服务器传输数据。form 元素是块级元素，其前后会产生折行。 表单提交时，必须设置表单元素的name属性值，否则无法获取数据。 表单需要结合表单元素一起使用。 常用属性 action 提交表单的地址 method 提交方式 （不区别大小） GET提交 get POST提交 post target 提交数据时打开窗口的方式 _self 当前窗口 _blank 空白窗口 GET请求与POST请求的区别：（post请求需要服务器的支持） 1、get请求时参数会跟在浏览器地址栏的后面，而post请求不会（post请求会将数据存放在请求体中） 2、get请求相对于post而言，不那么安全 3、get请求传递的数据长度是有限的，而post请求基本没有限制（长度与服务器相关） 4、get请求比post请求快（2倍左右） 5、get请求有缓存（会将数据存放在浏览器中，即本地磁盘中），而post请求无缓存-->
<h2>input标签</h2> <!-- input标签 （行内元素） type 元素的类型 text 文本框 password 密码框 radio 单选框 checkbox 复选框 file 文件域 hidden 隐藏域 button 普通按钮 submit 提交按钮 reset 重置按钮 date 日期框 value 元素的值 readonly 只读状态 maxlength 最多输入的长度 disabled 禁用标签 注意： 1. 单选框需要通过name属性设置为一组，复选框需要通过name属性设置为一组 2. 如果时上传文件的表单，则表单需要设置一个属性 enctype="multipart/form-data"，提交方式为post请求 3. 没有name属性是无法提交数据的！！！ -->
<h2>按钮</h2> <!-- input按钮 type="button" 普通按钮 type="submit" 提交按钮 type="reset" 重置按钮 button标签 type="button" 普通按钮 type="submit"(默认) 提交按钮 type="reset" 重置按钮 双标签，标签之间可以添加内容（文本或标签等） -->
<h2>下拉框</h2> <!-- 下拉框 select 下拉框标签 option 下拉框的选项标签 select常用属性 multiple 设置下拉框可多选 size 设置下拉框可见选项数 disabled 禁用元素 option常用属性 selected 默认选中项 disabled 禁用某个选项 value 提交给服务器的选项值 如果设置了value属性值，则提交的是value的值； 如果未设置value属性值，则提交option双标签中的文本值 -->
1.6、textarea
<h2>textarea</h2> <!-- textarea 定义可输入多行文本的控件 cols 文本的可见宽度 rows 文本的可见行数 label标签 for属性 当for属性与元素的id属性值一致事，点击label标签，会自动会元素聚焦 -->
<h2>字符实体</h2> <!-- 字符实体 < < > > 空格 版权 © -->
二、CSS
2.1、基础
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>001css基础</title>
<!-- 1、样式设置在style标签中 -->
<!-- <style type="text/css">
body {
background-color: antiquewhite; /* 背景颜色*/
color: red; /* 字体颜色 */
font-family: "arial black";
}
</style> -->
<!-- 2、引入外部的css文件 -->
<!-- <link rel="stylesheet" type="text/css" href="css/style.css/> -->
<!-- 3、定义内部样式 -->
<style type="text/css">
/* p标签 */
p {
color: blue;
font-family: 楷体;
}
/*
1、通用选择器 *
选择所有元素
* {
属性名:属性值
}
*/
* {
/* 字体颜色 */
color: #fdff58;
background-color: aqua;
}
/*
2、元素选择器/标签选择器
选择指定元素
标签名 {
属性名:属性值
}
*/
div {
width: 100px; /* div的宽度*/
height: 100px; /* div的高度*/
background-color: gray; /* 背景颜色 */
}
/*
3、id选择器
选择指定id属性值的元素 #
#id属性值 {
属性名:属性值
}
id值最好保持唯一
id定义规则：以字母、数字、下划线、中划线组成，不要以数字开头
*/
#div2 {
color: #FF0000;
background-color: thistle;
}
/*
4、class类选择器 .
选择设置指定class属性值的元素
.class属性值 {
属性名:属性值
}
*/
.cls1 {
font-weight: bold; /* 字体粗细 */
border: yellowgreen;
}
/*
5、分组选择器
选择指定选择器选中的元素
选择器1,选择器2,选择器3,...{
属性名:属性值
}
*/
#div1,.cls1, p{
/* 边框 边框的粗细 边框的风格 边框的颜色 */
border: 1px solid #0000FF;
}
</style>
</head>
<body>
<h2>基础语法</h2>
<!--
基础语法
格式
选择器名 {
属性 : 属性值;
......
}
注意
1. css声明要以分号结尾，声明要用{}括起来
2. 建议一行写一个声明
3. 如果属性值由多个单词组成，要给值加上引号
注释
/* 注释内容 */
-->
HELLO
<h2>三种使用方式</h2>
<!--
CSS的使用
1. 行内样式
将样式定义在html标签上的style属性中；
以行内压样式写的CSS耦合度较高。
2. 内部样式
定义在head标签中的sty标签中
3. 外部样式
通过link标签引入外部的css文件
<link rel="stylesheet" type="text/css" href="css/style.css"/>
rel：当前文件与引入的文件之间的关系
type：类型，css类型
href：引入的资源的路径
CSS的优先级：就近原则
-->
<p style="color: aqua;" >这是一段文本</p>
<p >这是一段文本</p>
<p >这是一段文本</p>
<p >这是一段文本</p>
<h2>选择器</h2>
<!--
选择器的优先级：（权重值）
id选择器 100 > 类选择器10 > 元素选择器1 > 通用选择器
行内样式 style属性中 权重是1000
-->
最低0.47元/天 解锁文章
766
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
