HTML定义了网页的内容
CSS描述了网页的布局
JavaScript网页的行为
一、HTML
（1）结构
- <html></html>决定了该代码是html文件，即说明各类。
- <head></head>头部。
- <body></body>即主体部分。
- <meta></meta>在其头部，是重要部分。即提供有关页面的元信息，搜索引擎的关键词就是元信息的内容，因此<meta></meta>是用来概述本页面的信息的。
（2）常用标签
1. 浏览器标题
<head>
<title>浏览器标题</title>
</head>2. 标题与段落
<head>
<title>标题与段落</title>
</head>
<body>
<h1>一级标题h1</h1>
<h2>二级标题h2</h2>
<h3>三级标题h3</h3>
<h4>四级标题h4</h4>
<h5>五级标题h5</h5>
<h6>六级标题h6</h6>
<p>段落标签p</p>
</body>
<!--
格式标记：
<br>强制换行
<p>段落
<center>居中标记
<ul>建立无序列表
<ol>建立有序列表
<li>建立列表，用在<ul>和<ol>里面
<div>分区显示
文本标记：
<font>字体设置 字体大小（size）颜色（color）字体（face）
<b>字体加粗
<i>斜体
<sub>下标
<sup>上标
<cite>引用方式的字体
<strong>表示强调，一般用于粗体
<em>表示强调，一般用于斜体
<small>小型字体标记
<big>大型字体标记
<u>下划线标记
-->3.水平线与换行符
<hr/> 水平线
<br/> 换行符
4. 图片标签
<img src="1.png" alt="如果图片加载失败，显示的文字">
<!--
img 的属性有src、width、heught、border、alt
src指定文件路径：1.相对路径：指的是同一个网站下，不同文件之间的的位置定位。引用的文件位置
是相对当前文件的位置而言，从而得到相对路径。
2.绝对路径：指的是文件的完整路径。
width、heught、border都是宽度设置
alt属性是爬虫的重要部分
（alt有三个作用：1.鼠标移动到加载完的图片上，会显示该图片的文字信息
2.图片加载失败就直接显示文字
3.写爬虫可根据alt属性的文字抓取想要的图片
）
-->5. 链接标签
<a href="//www.baidu.com">点击我，本窗口访问百度</a>
<a href="//www.baidu.com" target="_blank">点击我，新窗口访问百度</a>
<!--
target:
1.值为_blank时，在新窗口打开；
2.值为_self（默认）时，在当前窗口打开；
3.值为_parent时，在父窗口打开；
4.值为_top时在顶层窗口打开
-->6. 表格标签
<!--
table标签:
border 边框
width 宽度
tr 行
th 表头
th 普通列
-->
<table border="4px" width="300px">
<tr>
<th>表头th</th>
<th>表头th</th>
</tr>
<tr>
<td>普通列td</td>
<td>普通列td</td>
</tr>
</table>7.列表标签
<ul>
<li>无序列表项1</li>
<li>无序列表项2</li>
</ul>
<ol>
<li>有序列表项1</li>
<li>有序列表项2</li>
</ol>8. 常见的无意义标签
<!--
div 占用整行
span 不占用整行，长度取决于内部元素的长度
-->
<div>div标签</div>
<span>span标签</span>9. 在<head></head>内指定编码为 UTF - 8 ， 才能正常显示中文
<meta charset="utf-8"> <!--中文编码问题 -->10.表单
功能：在网页中主要负责数据采集功能。
一个表单有三个基本组成部分：
- 表单标签：这里面包含了处理表单数据所用的CGI程序的URL以及数据提交到服务器的方法。
- 表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框、文件上传框等。
- 表单按钮：包含提交按钮、复位按钮和一般按钮；
表单1：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单</title>
</head>
<body>
<!--
form标签
action=URL 用来指定处理提交表单的格式，提交地址
method 请求方式(get或post,默认get)
get 提交的数据参数在url中，不安全
post 提交的数据被加密，url中无法看到，在action中
enctype="multipart/form-data" 如果提交文件，需要添加这个参数
-->
<form action="URL" method="post" enctype="multipart/form-data">
</form>
</body>
</html>
表单2：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单</title>
</head>
<body>
<!--
input标签
1.文本框 type="text"
2.密码框 type="password"
3.单选框 type="radio"
4.复选框 type="checkbox"
5.文件框 type="file"
6.按钮 type="button"
7.提交 type="submit"
8.重置 type="reset"
-->
<form action="URL" method="post" enctype="multipart/form-data">
1.用户名（文本框text）:
<input type="text" name="username">
<hr/>
2.密码（密码框password）：<input type="password" name="password" value="">
<hr/>
3.性别（单选框radio）：
男<input type="radio" name="gender" value="0">
女<input type="radio" name="gender" value="1">
<hr/>
4.爱好（复选框checkbox）：
学Web<input type="checkbox" name="hobby" value="web">
学爬虫<input type="checkbox" name="hobby" value="spider">
<hr/>
5.上传头像（文件框file）：
<input type="file" name="img">
<hr/>
6.按钮（button）:
<input type="button" value="空按钮">
<hr/>
7.提交（submit）:
<input type="submit" value="提交按钮">
<hr/>
8.重置（reset）:
<input type="reset" value="重置按钮">
<hr/>
</form>
</body>
</html>
表单3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单</title>
</head>
<body>
<!--
下拉框：select和option
大文本：textarea
cols 列数
rows 行数
-->
<form action="URL" method="post" enctype="multipart/form-data">
<select name="year">
<option value="2020">2019</option>
<option value="2019">2019</option>
</select>
<textarea name="comment" cols="30" rows="10"></textarea>
</form>
</body>
</html>二、CSS --- 美化HTML显示
使用CSS有三种用法：
内联样式表
嵌入式样式表
外部样式表
1.内联样式表（不推荐使用）：在标签内使用style属性指定css代码。
<div style="color:red;">hello CSS</div>
2.嵌入式样式表：在head标签内定义style标签，style标签体内写css代码
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
color:blue;
}
</style>
</head>
<body>
<div>hello CSS</div>
</body>
3.外部样式表：先定义css资源文件，然后在head标签内，定义link标签，引入外部资源文件
CSS文件：
div{
color:green;
}
HTML文件：
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/a.css">
<!--rel="stylesheet"指的是文档的外部样式表 名字是a.css-->
</head>
<body>
<div>hello CSS</div>
</body>
</html>
（1）属性介绍
1.颜色 （颜色可用英文，十六进制，RGB,RGBA）
2.字体
- font-size ： 字体大小
- font-family：字体类型
- font-weight：字体加粗。取值可为英文名称（normal、bold、boder、light）、数字
3.背景
- background-color:背景颜色
- background-image:背景图片
- background-repeat:背景重复方式
- background-position:背景位置
4.文本
- text-align:设置文本对齐方式
- line-height:设置文本行高
- text-indent:首先缩进
- letter-spacing:设置字符间距
5.列表
- list-style-type：指明列表项的类型，属性值有none(无标记）、disc(实心圆，默认值）、circle(空心圆）、square(实心方块）、decimal(数字）、decimal-leading-zero(0开头的数字）、lower-roman(小写罗马数字）、upper-roman(大写罗马数字）、lower-alpha(小写字母）、upper-alpha(大写字母）
- list-style-position：列表项中的位置。inside(文本内，且环绕文本根据标记对齐)；outside(与inside相反）；inherit(继承父元素list-style-position属性）。
- list-style-image：设置图像列表。属性值包括url,inherit,none.
（2）CSS格式
选择器 {
属性名1:属性值1;
属性名2:属性值2;
...
}
（3）选择器--用来筛选具有相似特征的元素
1.基础选择器：
（1）id选择器：以"#"来定义,选择具体的id属性值的元素
建议在一个HTML页面种一个id值只能使用一次，保持唯一性
#div1{
color: red;
}
<div id="div1">
id选择器
</div>
（2）元素选择器：选择具有相同标签名称的元素
div{
color:green;
}
<div>
元素选择器
</div>
（3）类选择器：选择具有相同的class属性值的元素
注意：与id选择器不同，多个标签可以使用同一个class属性值
.cls1{
color: blue;
}
<div class="cls1">
类选择器
</div>
2.扩展选择器：
（1）通用选择器：选择所有的元素
*{
background-color:yellow;
}
（2）并集选择器：选择所有指定的元素
div,p{
background-color:yellow;
}
（3）子选择器：选择指定元素下的子元素（div为父标签 p为子标签）
div p{
background-color:yellow;
}
（4）父选择器：选择指定元素下的子元素，且其父元素是指定元素（div为父标签 p为子标签）
注意：子选择器和父选择器的区别在于：
子选择器中p标签在div标签中就可以生效；
但是在父选择器中不仅要p标签在div标签中，而且p标签的父标签必须是div标签才能生效。
div>p
{
background-color:yellow;
}
（5）属性选择器
input[type="text"]{
background-color:yellow;
}
（6）伪类选择器：选择一些元素具有的状态
a:link
{
background-color:yellow;
}
三、JavaScript
JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML网页上使用，用来给HTML网页增加动态功能
JavaScript的引入方式：
（1）内嵌式：
<script type="text/javascript">
/*
js代码
*/
// alert(【对话框内容】);
alert('你好，JavaScript');
</script>（2）外部式：
<script type="text/javascript" src="myjs.js"></script>点击跳转到强大的B站配套视频讲解
