前端基础
1.网页的技术结构：HTML、 CSS、 JS（JavaScript）
HTML（结构标准） - 提高网页内容（通过不同的标签提供不同的内容）
CSS（样式标准） - 负责网页内容的样式布局
js(行为标准) - 负责控制网页内容变化
2.HTML - 超文本标记语言
一个网页就是一个HTML，HTML代码一般写在可以被浏览器直接解析的HTML文件中
2.1 HTML基本结构：一个HTML标签里面包含一个head标签和一个body标签
html标签 - 代表整个网页
head标签 - 网页顶部负责显示 网页图标和标题部分，还负责不可见的设置性的内容
body标签 - 负责网页内容显示
2.2 标签语法：HTML是通过不同的标签来提供不同的网页内容，标签从结构上来讲分为两种
a.双标签：<标签名 属性名1=属性值1 属性名2=属性值2 …>标签内容</标签名>
b.单标签：<标签名 属性名1=属性值1 属性名2=属性值2 …>、<标签名 属性名1=属性值1 属性名2=属性值2 …/>
说明：
a.标签名和<，以及>之间不能有空隙（注意空隙）
b.属性值不管是什么类型的数据都必须使用双引号引起来
c.双标签的标签内容可以是任何内容：包括纯文字，也可以是一个或多个标签或者是文字和标签的混合
d.标签名不是由程序员自己创建的，而是由HTML提供
<!-- 网页基本结构 -->
<html>
<head>
<!-- 设置网页编码方式 -->
<meta charset="utf-8" />
<!-- 设置网页标题 -->
<title>hello</title>
</head>
<body>
</body>
</html>
1.文本标签
1.1 标题标签: h1-h6
<h1>一级标签
<h2>二级标题
<h6>六级标题
1.2 段落标签：p
<p>
1.3 普通的行内文本标签：font、span、label
<font>
<label>
1.4 文字效果标签
加粗：b、strong
倾斜：i、em
换行：br （在代码中直接回车无效）
空格： (一个像素，很精细) (一个空格，比一个像素多)
2.图片超链接
2.1 图片标签：img
2.1.1 src属性：设置图片地址（可以是本地是也可以是网络的）
2.1.2 title属性：设置图片标题（鼠标停留在图片上才会显示）
<img src="img/icon_4.jpg" title="点赞"/>
2.2 超链接：a
<!-- 文字超链接 -->
<a href="https://ai.taobao.com">淘宝</a>
<!-- 图片超链接 -->
<a href="https://www.csdn.net/"><img src="https://img-blog.csdnimg.cn/a8f51558920849e6ae4bff023aeab2af.jpg?x-oss-process=image/resize,m_fixed,h_200"/></a>
3.列表
3.1 无序列表：ul_li
<ul>
<li>Python</li>
<li>java</li>
<li>HTM5</li>
<li>UI</li>
</ul>
3.2 有序列表:ol_li
<ol>
<li>
Python
</li>
<li>
<img src="img/icon_4.jpg" ><br>
java
</li>
<li>
<a href="https://www.baidu.com/">百度</a>
</li>
<li>
UI
</li>
</ol>
4.input标签
4.1 普通输入框
value属性 - 输入框中的内容
<!-- 1.普通输入框
value属性 - 输入框中的内容
-->
<input type="text" name="" id="" value="输入你的姓名" />
<!-- 自带清除按钮 -->
<input type="search" name="" id="" value="" placeholder="猜猜我是谁"/>
<br>
<!-- 2.单选按钮 -->
<input type="radio" name="sex" id="s1" value="" /><label for="s1">男</label>
<input type="radio" name="sex" id="s2" value="" /><label for="s2">女</label>
<br>
<!-- 3.复选按钮 -->
<input type="checkbox" name="ins" id="l1" value="" /><label for="l1">篮球</label>
<input type="checkbox" name="ins" id="l2" value="" /><label for="l2">羽毛球</label>
<input type="checkbox" name="ins" id="l3" value="" /><label for="l3">乒乓球</label>
<!-- 4.普通按钮 -->
<input type="button" name="" id="" value="确定" />
<button type="button">取消</button>
<button type="button"><img src="img/annui.png" ></button>
<br>
<br>
<!-- 5.其他功能 -->
<input type="color" name="" id="" value="" />
<input type="file" name="" id="" value="" />
<input type="date" name="" id="" value="" />
<input type="datetime-local" name="" id="" value="" />
5.div标签
5.1 div标签
5.1.1 作为普通双标签提供内容
5.1.2 作为一个盒子对网页中的内容进行分块，分组
6.css语法
css（cascading style sheet,层叠样式表）用来给标签添加样式和布局的
1.css语法
选择器{属性1:属性值1;属性2:属性值2}
说明：
1.1 选择器 - 选择需要添加样式的标签。（如果是内联样式 选择器{}需要省略）
1.2 属性 - 属性名是有css决定的，不同的属性表示不同的样式
常用属性：color - 文字颜色；background-color - 背景颜色
font-size - 字体大小
width - 宽度；height - 高度；border - 边框
2.css代码的位置
2.1 内联样式表:将css代码写在标签的style属性中
2.2 内部样式表:将css代码写在style标签中
2.3 外部样式表：将css代码写在css文件中，然后再HTML中通过link标签导入
7.选择器
选择器的作用：选中网页中的标签
1.标签选择器（元素选择器） - 直接将标签名作为选择器，选中所有指定标签
列如：a{} - 选中所有的a标签； p{} - 选中所有的p标签
2.id选择器 - 在id属性值前加#作为一个选择器，选中id属性值为指定值的标签（同一页面中id是唯一的）
例如：#p1{} - 选id属性值为p1的标签
3.class选择器（类选择器） - 在class属性值前加.作为一个选择器，选中所有class属性值是指定值的标签
例如：.p1{} - 选中class属性值为p1的标签
4.群组选择器 - 将多个选择器用逗号隔开作为一个选择器，选中用逗号隔开的每个选择器选中所有标签
例如：p,#p1,.c1 - 选择所有的p标签和id是p1的标签和class是c1的标签
.c1.c2{} - 选中同时拥有class值为c1和c2的标签
5.后代选择器 多个选择器用空格隔开
例如：div p{} - 选中所有div后代的p标签（选中所有div里面的p标签）；
6.子代选择器
498
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
