b/s架构
c/s架构
b-浏览器 c-客户端 s-服务器
前端 通过 浏览器 将 代码 转化为 网页
大纲： 1.html（超文本标记语言。超：超链接，能从一个网页跳转到另一个网页；） 结构
2.css 表现
3.Js 行为
网站：通过一定规则，用html等制作的用于展示特定内容相关的网站集合
网页：构成网站的基本元素
<开始标签> 标签体 <结束标签>
标签可以嵌套
html的骨架：
<!DOCTYPE html>
<html lang="en"> //lang表示对语言的选择，en表示英文
<head>
<meta charset="UTF-8"> //UTF-8表示编译
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
</body>
</html>
标签忘记了，去网站查看（MDN）(w3school)(html elements)
标签：标签名(空格)属性
属性：属性名=“属性值”
属性名与属性值相同，只写属性名
<input>输入框
标签：标题标签，表格标签，超链接，段落标签，换行标签，水平线标签，视频标签，图像标签，文本格式化标签，无语意标签，音频标签，详情标签，注释标签
标题标签：<h1>标题</h1> 独占一行
<h2>标题</h2>
.....逐渐变小..........
<h6>标题</h6>
表格标签：<table></table>详情下面有
超链接标签<a href="地址" target="_blank"></a> （target打开方式，默认不开窗口。_blank另一个窗口）
锚链接标签<a href="#id"></a>------------跳转到----> <div id=""></div>
段落标签：<p></p>
换行标签<br/>
水平线标签：<hr/>
视频标签:<video src="地址" controls autoplay muted loop></video> (controls控键) (autoplay muted 静音并自动播放) poster（等待加载时的显示图片） （loop循环播放）
图像标签：src：指向图片位置（相对路径，绝对路径）
alt：图片地址发生错误时用来提示
title：鼠标经过时显示的文字
width：设置图像的宽度
height：设置图像的高度
border：设置图像的边框粗细
例如：<img src="./images/cat.gif" alt="我是一只猫" title="猫" width="500px" height="500px" border="20px">
文本格式化标签：
加粗 <strong></strong> 或者 <b></b>
倾斜 <em></em> <i></i>
删除线 <del></del> <s></s>
下划线 <ins></ins> <u></u>
无语义标签（用于布局）：<div></div> 独占一行
<span><span> 一行可多用
音频标签<audio src="地址" controls 其他属性参考视频标签></audio>
详情标签：<details></details>
注释标签：<!-- --> 快捷键;Ctrl+/ 不会再网页中显示，会在网页源代码中显示，供自己理解
有序列表(前面会自动生成序号)：
喜欢的食物
<ol type="以什么来排序"> （type="A" or "a" 不写的话它默认用阿拉伯数字排序）
<li>榴莲</li>
<li>臭豆腐</li>
<li>罐头</li>
</ol>
无序列表：
你喜欢的明星是
<ul >
<li>蔡徐坤</li>
<li>罗翔</li>
<li>法外狂徒</li>
</ul>
自定义列表：
<dl>
<dt>
你喜欢的明星
</dt>
张三
<dd>
李四
</dd>
</dl>
框架：
<iframe src="https://www.taobao.com" width="900px" height="600px"></iframe>
特殊字符
空格
小于号 <
大于号 ≷
和号 &
人民币 ¥
版权 ©
注册商标 ®
摄氏度 °
正负号 ±
乘号 ×
除号 ÷
二次方 ²
三次方 ³
元素显示模式：块元素，行内元素
块元素：独占一行 <div> 可以设置 宽，高，内边距 的属性
行内元素：一行可以存在多个 <span> 不能设置上面·的属性
表单：网页交互区，收集用户信息
表格结构：<table>
<caption>学生信息</caption> //表格头
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>民族</th>
</tr>
</thead>
<tbody>
<tr>
<td>黄和平</td>
<td>男</td>
<td>汉</td>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>汉</td>
</tr>
................
</tbody>
<tfoot>
<td></td>
<td></td>
<td>共计四人</td>
</tfoot>
</table>
table的属性: 加表格 并控制外围的宽度border="1px" 宽width="" 高height="" 表格线间隙cellspacing="0"
caption的属性： 通过css更改
tr的属性： 水平对齐方式align="left/center/right" 垂直对齐方式valign="top/middle/bottom"
td的属性: 跨行设置 rowspan 属性 | 跨列设置 colspan 属性
表单的结构：
<form action="#" method="get"> //提交的位置例如:action="https://www.baidu.com/s" ，#提交到当前页面 method:提交方式
用户名：<input type="text" name=""> //百度要求name="wd"(表单必有属性)，其他属性：默认文本内容value=""
密 码：<input type="password" name=""> //当type="password"输入加密
<input type="radio" name="与下面保持相同" value="男">男 //当type="radio"是变成单选 选项时必须加上value
<input type="radio" name="与上面保持相同" value="女">女
多选; <input type="checkbox" name="相同" value="豆腐">豆腐 //当type="checkbox"是变成多选
<input type="checkbox" name="相同" value="茄子">茄子
<input type="checkbox" name="相同" value="榴莲">榴莲
<label></label>的用法----
(1)<input type="checkbox" name="相同" value="豆腐"><label>豆腐</lable>
(2)<lable><input type="checkbox" name="相同" value="豆腐">豆腐</lable>
隐藏域：<input type="hidden" name="hid" value="黄和平才能查看">
确认按钮:<input type="submit"> ====<button type="submit">确认</button>
重置按钮:<input type="reset">
普通按钮:<input type="button">
文本域:<textarea cols="高度" rows="宽度"></textarea>
下拉菜单: <select name="jiguan" >
<option value="南京">南京</option>
<option value="西安">西安</option>
<option value="成都">成都</option>
</select>
</form>
（选项）默认选中属性：checked
（文本）最大长度属性：maxlength
下拉菜单默认属性:selected
html的全局属性：
id----------------在一个页面不能出现相同的id
class-------------一类
accesskey-------设置快捷键
style-------------给元素加样式
date-*----------自定义属性
css的三种引入方式
1.内部样式
2.外部样式link lel="stylesheet" href="另一个已经写好了的html"
3.内行样式
<head>
<style>
选择器{
属性名:属性值;
属性名:属性值;
.....................
}
</style>
</head>
1.基本选择器
标签选择器： 标签{...}
id选择器（id="box1"）： #box1{...}
类选择器（class="box2"）： .box2{...}
通配符选择器：*{}
2.包含选择器：
子代选择器 .a>li{...}
后代选择器 .a li{...}
<ul class="a">
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<ul >
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
</ul>
复合选择器：
例如; div,
p,
span{
color：red;
} //将三个（div,p,span）公用
属性选择器：
标签[属性="属性值"]{......} //如果省略属性值，将包括所有含有属性的此标签
标签[属性^"te"]{...} //属性值以te开头
标签[属性$="te"]{..} //属性值以te结尾
标签[属性*="te"]{...} //属性中包含有te
结构选择器
字体样式
字体大小： font-size: 20px; //不设置默认16px 冒号后面有空格
字体粗细： font-weight: bold; //加粗也可以写数字但是没有单位，加粗相当于700，最开始是400
字体风格：
是否倾斜：font-style: italic/normal;
字体样式：font-family: "微软雅黑";
复合写 font: italic 900 70px "微软雅黑";（其中前两个属性可以不写，但后面两个必须写，必须按照顺序写）
文本外观：
在选择器中{ text-indent:
2px;/2em; //2px在不知名字体大小下缩进两格 //2em在当前字体下缩进两格
}
844
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
