一、HTML
1.概念：是最基础的网页开发语言，
* 标记语言:
由标签构成的语言。<标签名称> 如 html，xml；
标记语言不是编程语言；
2.基本标签
1）文件标签：构成html最基本的标签
* html:html文档的根标签
* head：头标签。用于指定html文档的一些属性。引入外部的资源
* title：标题标签。
* body：体标签
* <!DOCTYPE html>：html5中定义该文档是html文档
2）文本标签：和文本有关的标签
* 注释：<!-- 注释内容 -->
* <h1> to <h6>：标题标签
* h1~h6:字体大小逐渐递减
* <p>：段落标签
* <br>：换行标签
* <hr>：展示一条水平线
* <b>：字体加粗
* <i>：字体斜体
* <font>:字体标签
* <center>:文本居中
* 属性定义：
* color：
1. 英文单词：red,green,blue
2. rgb(值1，值2，值3)：值的范围：0~255 如 rgb(0,0,255)
3. #值1值2值3：值的范围：00~FF之间。如： #FF00FF
* width：
1. 数值：width='20' ,数值的单位，默认是 px(像素)
2. 数值%：占比相对于父元素的比例
3.图片标签
<img src="image/jingxuan_2.jpg" align="right" alt="古镇" width="500" height="500"/>
相对路径： ./：代表当前目录
../:代表上一级目录
4.列表标签：
* 有序列表：1. ol 、2.li:
* 无序列表： 1. ul 、 2. li
5.链接标签
属性：
href：指定访问资源的URL(统一资源定位符)
target：指定打开资源的方式：
1） _self:默认值，在当前页面打开
2）_blank：在空白页面打开
6.HTML的表单标签
6.1.表单：
* form：用于定义表单的。可以定义一个范围，范围代表采集用户数据的范围
属性：* action：指定提交数据的URL
* method:指定提交方式：
get :1. 请求参数会在地址栏中显示。会封装到请求行中.
2.请求参数大小是有限制的。
3.不太安全
post: 1.请求参数不会再地址栏中显示。会封装在请求体中
2.请求参数的大小没有限制。
3.较为安全
表单项标签：
input：可以通过type属性值，改变元素展示的样式
tyep属性：
text：文本输入框，默认值 ，placeholder：指定输入框的提示信息，当输入框的内容发生变化，会自动清空提示信息；
password：密码输入框；
radio:单选框 ； 注意：1.要想让多个单选框实现单选的效果，则多个单选框的name属性值必须一样；2.一般会给每一个单选框提供value属性，指定其被选中后提交的值；3.checked属性，可以指定默认值
checkbox：复选框； 注意：1.一般会给每一个单选框提供value属性，指定其被选中后提交的值；2.checked属性，可以指定默认值
file：文件选择框；
hidden：隐藏域，用于提交一些信息。但不在页面显示
按钮：
* submit：提交按钮。可以提交表单
* button：普通按钮
* image：图片提交按钮
* src属性指定图片的路径
label：指定输入项的文字描述信息 ;作用：label的for属性一般会和 input 的 id属性值 对应。如果对应了，则点击label区域，会让input输入框获取焦点。
用法：
<label for="username"> <input type="text" id="username">
select： 下拉列表
子元素：option，指定列表项
textarea：文本域 ； cols: 指定列数，每一行有多少个字符 ; rows: 默认多少行。
二、CSS
1.css的使用：
1.1.内联样式：
<!--在标签内使用style属性指定css代码--> <div style="color:red;">hello css</div>
1.2.外联样式
<!--在head标签内，定义style标签，style标签的标签体内容就是css代码--> <style> div{ color:blue; } </style> <div>hello css</div>
1.3.外部样式
<!--定义css资源文件。a.css--> div{ color:green; } <!--在head标签内，定义link标签，引入外部的资源文件--> <link rel="stylesheet" href="css/a.css"> <div>hello css</div> <div>hello css</div>
2.css的语法：
2.1.格式：
选择器 {
属性名1:属性值1;
属性名2:属性值2;
...
}
2.2.选择器：
1）基础选择器：
id选择器：选择具体的id属性值的元素.建议在一个html页面中id值唯一； 语法：#id属性值{}
<style> #div5{ font-size: 20px; color: red; } </style> <div id="div5"> 逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！55 </div>
元素选择器： 选择具有相同标签名称的元素 ； 语法： 标签名称{}； 注意：id选择器优先级高于元素选择器
<style> div{ font-size: 20px; color: pink; } </style> <div> 逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！11 </div>
类选择器：选择具有相同的class属性值的元素； * 语法：.class属性值{}； * 注意：类选择器选择器优先级高于元素选择器
.div2{ font-size: 20px; color: pink; } <div class="div2"> 逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！22 </div>
2.3.其他选择器：
选择所有元素：语法： *{}；
并集选择器： 语法： * 选择器1,选择器2{}；div,p{}
子选择器：筛选选择器1元素下的选择器2元素 ； 语法： 选择器1 选择器2{} div p{}
父选择器：筛选选择器2的父元素选择器1； 语法： 选择器1 > 选择器2{} div > p{}
属性选择器：选择元素名称，属性名=属性值的元素 ; 语法： 元素名称[属性名="属性值"]{}
<style> input[type='text']{ background: #FF0000; } input[type='password']{ background: #FFC0CB; } </style> 用户名；<input type="text" name="username"/><br /> 密码：<input type="password" name="password"/>
伪类选择器：选择一些元素具有的状态; 语法： 元素:状态{}
* link：初始化的状态;
* visited：被访问过的状态
* active：正在访问状态
* hover：鼠标悬浮状态
3. 属性
1. 字体、文本
* font-size：字体大小
* color：文本颜色
* text-align：对其方式
* line-height：行高
2. 背景
* background：
3. 边框
* border：设置边框，符合属性
4. 尺寸
* width：宽度
* height：高度
5. 盒子模型：控制布局
* margin：外边距
* padding：内边距
* 默认情况下内边距会影响整个盒子的大小
* box-sizing: border-box; 设置盒子的属性，让width和height就是最终盒子的大小
* float：浮动
* left
* right