html&css
目录
一、web开发
1.1工作流程
1. 浏览器先向前端服务器请求前端资源，也就是我们所说的网页
2. 浏览器再向后台服务器发起请求，获取数据
3. 浏览器将得到的后台数据填充到网页上，然后展示给用户去看
1.2开发技术
1. html 用于构建网站的基础结构的
2. css 用于美化页面的，作用和化妆或者整容作用一样
3. Javascript 实现网页和用户的交互
二、HTML
HTML (Hyper Text Markup Language)，指的是超文本标记语言，是一种用来描述网页的语言。
超文本：比普通文本功能强大。它可以引入音频、视频、图片、文字、超链接等等……
标记语言：使用一批特殊的标签来表达某些特殊意义，进而组装出网页的语言
2.1HTML规范
<!DOCTYPE html> 用于声明这是一个HTML的文档，要求必须在页面的第一行
HTML页面主要由HTML标签和HTML文本两部分组成
HTML标签：由HTML定义好的一类固定文字，比如<html>
HTML文本：除了标签之外的其它文字
HTML标签分为两大类:双标签和单标签
双标签：通常是成对出现的，比如<html></html>
单标签：单个出现，比如<hr>
绝大多数的标签都具有属性，属性用来具体控制标签的某些特性。例如:<hr color="red">
HTML标签是不区分大小写的
2.2基础标签
2.2.1标题
作用：用于将普通文字变成标题
语法：<hn>普通文字</hn>
n表示范围：1~6 特点：数值越大，字体越小
属性： align：对齐方式 取值：left（默认值，左对齐） 、 center（居中） 、 right（右对齐）
2.2.2水平线
作用：在页面上生成一条横线
语法：<hr/>
属性：
color：颜色， 用于设置颜色线条颜色，通过英文字母或者RGB表示
width：宽度， 用于设置线条的长度，可以是用绝对像素或者百分百设置
2.2.3段落和换行
作用：用于文字的分段和换行
语法：
换行： <br/>
分段： <p>一段内容，使用这个标签的效果是一段文字的上下会留出空白</p>
2.2.4文字效果
<b>文字</b>：加粗标签
<i>文字</i>： 斜体标签
<u>文字</u>：下划线标签，在文字的下方有一条横线
<center>文字</center>: 文字居中显示
<font>文字</font>: 定义文字字体(face)，大小(size:1-7)，颜色(color)
2.2.5超链接
作用：用于给文字添加超链接效果，点击文字是跳转一个目标页面
语法：<a>文字</a>
属性：
href：用于指定超链接的跳转地址，支持绝对路径和相对路径两种写法
target：用于指定页面打开方式(_self 使用当前页签打开, _blank 使用新页签打开)
2.2.6图像
作用：用于在HTML页面中引入一个图片
语法：<img/>
属性: src：用于指定图片资源的路径，支持绝对路径和相对路径两种写法
alt：用于在指定咋图片丢失时要显示的文字提示
width：用于设置图片宽度（浏览器会根据设置的宽度按照比例自动调整高度）
2.2.7音频和视频
audio：定义音频。支持的音频格式：MP3、WAV、OGG
video：定义视频。支持的音频格式：MP4, WebM、OGG
src：规定视频的 URL
controls：显示播放控件
三、布局标签
3.1列表
作用：用于文字排版
语法：
有序列表
<ol>
<li>文字</li>
<li>文字</li>
</ol>
无序列表
<ul>
<li>文字</li>
<li>文字</li>
</ul>
3.2容器
作用：存储内容的容器（盒子），通常与css技术结合使用，完成页面的布局和美化
语法：
<div>块级元素,独自占用一行</div>
<span>行内元素,内容有多大，就占用多少</span>
3.3表格
作用：表格可以让数据更有条理性的展示
table 表格
width: 设置宽度
height: 设置高度
border: 设置边框
align: 水平位置
cellspacing: 外边距
cellpadding: 内边距
tr
bgcolor 设置一行的背景色
td
bgcolor 设置一个单元格的背景色
align 设置单元格内文字的水平位置
height 设置单元格高度
3.4表单标签
HTML表单：用于采集用户数据，并发送给后端服务器
应用场景：用户注册、用户登录、个人信息修改...
form: 表示一个表单，里面会包含多个表单项，它的作用是收集表单项中的所有数据信息，发送到后台服务器
action：表单的提交地址，暂时使用#代替（#：表示当前页面）
method：表单的提交方式，有二种：get（默认值） | post
get：请求参数在地址栏拼接，不安全，对参数总长度有限制
post：参数不在地址栏拼接，相对安全，对参数总长度没有限制
表单项类型，支持文本框、下拉框、文本域
i）文本框
1）text：普通文本框
2）password：密码框
3）date：日期选择框
4）radio：单选框
5）checkbox：复选框
6）file：文件上传
7）submit：提交按钮
8）reset：重置按钮
9）button：普通按钮，通常与js结合使用
10) hidden: 隐藏
ii）下拉框
select 定义下拉框
option 定义下拉框中的具体内容
iii）文本域
textarea
四、CSS
CSS (Cascading Style Sheets) 翻译为指层叠样式表 ，用于HTML页面的美化
层叠样式是指对同一个HTML标签添加多种不同的样式（字号、字体、颜色等等），所有样式会叠加在一起展示出效果
4.1引入方式
HTML引入CSS的三种方式：
行内样式：定义在标签的属性中， 作用于当前标签
内部样式：定义在页面的head部分， 作用于当前页面中的所有（部分）标签
外部样式：定义在页面外部，通过link标签引入到页面中，作用于所有引入此样式文件的页面标签
CSS样式使用优先级: 行内样式 > 内部和外部样式(内部和外部样式，后面覆盖前面)
4.2选择器
选择器作用：找出页面一组特定的标签
标签选择器 使用标签名称选中一类标签 语法：标签名{css样式}
类选择器 使用class属性选中一类标签 语法：.class{css样式}
id选择器 使用id属性选中一个标签 语法：#id{css样式}
4.3样式
设置文字的颜色，大小，字体，风格，加粗以及行高，缩进，有无下划线等
font-size: 20px; /* 设置字号 */
font-family: '楷体'; /* 设置字体 */
font-weight: bold; /* 设置文字加粗（ normal:正常[默认], bold:粗体, 数值 ) */
font-style: italic; /* 设置文字倾斜（ normal:正常[默认], italic:倾斜 ） */
color：red; /* 设置字体颜色 */
line-height: 40px; /* 设置行高 */
text-indent: 40px; /* 设置段落的首行缩进 */
text-align: center /* 设置元素水平位置 */
text-decoration: none; /* 设置下划线( none:无, underline:下划线, overline:上划线, line-through:横穿线 ) */
总结
以上就是今天学习的内容。
