html+css
前端学习
1.html：页面架构
2.css：页面布局
3.javascript：页面交互 （python）
4.jquery：js的工具包 （相当于python里面的一个库）
5.bootstrap：快速页面搭建的框架
所谓的前端：写网页-（指的是用户能看到的一切的交互页面）-网页、app、小程序
HTML
1.什么是html： 超文本标记语言
什么是超文本：文本，图片，音频，视频，超链接
什么是标记：符号，标签，=--=（没有逻辑可言）
2组成：转义字符，指令，标签
3学习目的：完成页面架构的搭建，什么样的标签，完成什么样的标签嵌套关系
指令
"""
指令：
被<>包裹的 以！开头
注释：<!-- -->
文档类型：<!doctype>
"""
转义字符：
"""
转义字符：被 & + ；包裹，内容为特殊的字母加数字组成
<: <
>: >
空格： ；
版权：©
"""
标签
"""
标签： 被<> 包裹，以字母开头，可以包含数字加减号 并非下划线
系统标签：h1~h6、p、span、div、i、a、b、img、hr、br、table、form、input
自定义标签：满足合法命名的所有标签
注释：html语言中，系统建议只使用系统标签，不建议使用自定义标签
"""
活跃第一次玩
<!--注释：doctype 必须出现在页面的最上方，规定该文档采用的是html版本类型-->
<!doctype html>
<!--html语言不区分大小写-->
<!--页面标签：包含所有页面内容，只有head和body两个子标签-->
<html>
<!--头标签：样式，脚本，后勤操作：页面编码，页面标签标题图标-->
<head>
<meta charset="utf-8">
<title>第一次</title>
<style></style>
<script></script>
</head>
<!--体标签：页面显示内容存放区域，样式，脚本-->
<body>
你好，html是我第一次使用，也是我的第一个页面的
<style></style>
<script></script>
</body>
</html>
  代表空格
标签
1.<h1></h1>
| 标题，页面的主标题
<h6></h6>
2.<br> 换行
3.<p> 字段---------自带换行 有段落间距
4.<span>一般用来嵌套文本类型标签 x<sup>2</sup> h<sub>2</sub>o</span>
5.<b></b> 加粗
6.<i></i> 斜体
7.<a href ="https://www.baidu.com" target ="_blank">前往百度</a>
_blank 重新打开一个新的链接
8.<img title="鼠标悬浮的文本提示" src="链接" alt="img标签资源加载失败">
9.<!--列表标签：无需ul>li 有序ol>li-->
常用操作 ul>li{第$列}*5
10.表格标签
<table>
<caption>表格标题</caption>
<thead>
<tr>
<td></td>
</tr>
</thead>
<tbady>
<!--(tr>td{单元格}*3)*2-->
<!--rowspan:合并行-->
<!--colspan:合并列-->
<tr>
<td></td>
</tr>
</tbady>
<tfoot>
<tr>
<td>表尾</td>
</tr>
</tfoot>
</table>
表单
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单标签</title>
</head>
<body>
<!--1、form的作用：完成前后台数据的交互的 - 将用户录入的信息提交给后台 | 文件上传 -->
<form action="">
<p>
<!--label作为input的文本解释标签，for绑定id-->
<!--value属性是表单标签的内容，就是提交给后台的-->
<!--name是提交给后台的key，value是值-->
<!--placeholder是文本占位符-->
<!--type是决定标签的类型本质(input|button)-->
<!--multiple,checked布尔类型属性，不需要写值，multiple多选 checked默认激活-->
<label for="username">账号：</label>
<input id="username" type="text" value="Owen" name="usr">
</p>
<p>
<label for="password">密码：</label>
<input id="password" type="password" placeholder="请输入密码" name="pwd">
</p>
<p>
<input type="hidden" value="123asd{asdf2q1})sdf12" name="pk">
</p>
<p>
<input type="file" name="file" multiple>
<!--复写框架-->
</p>
<p>
男<input type="radio" value="male" name="sex" checked>
女<input type="radio" value="female" name="sex">
<!--单选框-->
</p>
<p>
男<input type="checkbox" value="male" name="hobby" checked>
女<input type="checkbox" value="female" name="hobby" checked>
哇塞<input type="checkbox" value="other" name="hobby">
<!---多选框-->
</p>
<p>
<button type="button">普通按钮</button>
<button type="reset">重置按钮</button>
<button type="submit">提交按钮</button>
</p>
<p>
<textarea cols="30" rows="10"></textarea>
</p>
<p>
<input type="button" value="按钮" />
<input type="reset" value="重置" />
<input type="submit" value="登录" />
</p>
</form>
</body>
</html>
标签的分类
<!-- 1、是否自带换行 -->
<!--带换行：h1 p div table form tr ul li -->
<!--不带换行：span i b a img input button label textarea-->
<!-- 2、单双标签 -->
<!--单标签（主功能）：br hr input img link -->
<!--双标签（主内容）：html head body h1 p span div a label button -->
<!-- / 代表标签的结尾，但是单标签可以省略 -->
<!--3、简单和组合标签-->
<!--组合：ul>li table>tr>td|th form>input -->
外部文件css文件
/*css/样式引入.css*/
三种css引入直接的优先级
<!--1、行间式-->
<!--书写位置:在标签的style属性中书写样式-->
<!--优缺点: 可读性差，没有复用性，书写直接-->
<!--2、内联式-->
<!--书写位置:在head标签中的style标签内-->
<!--css语法：css选择器 { 样式1; 样式2; } -->
<!--优缺点: 可读性强，有复用性，样式被html页面绑定了，不能提供给其它html页面使用-->
<!--3、外联式-->
<!--书写位置:在外部css文件中，在html文件中通过link标签引入css文件-->
<!--css语法：css选择器 { 样式1; 样式2; } -->
<!--优缺点: 可读性强，有复用性，适合团队开发(文件级别的复用性)-->
优先级：
1内联与外联之间没有优先级区别，由于html属于解释性语言，书写在下方的会覆盖上方的样式
2行间式的优先级要高于一切
css的基础选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css基础选择器</title>
<style>
/*优先级：可以从作用范围来判断 - 作用范围越精确，优先级越高 */
/*1、统配选择器*/
* {
color: pink;
font-size: 12px;
}
/*2、标签选择器*/
h1 {
font-size: 20px;
}
/*3、类选择器*/
.h {
font-size: 30px!important;
}
.h2 {
font-size: 40px;
}
.h.h2 {
font-size: 50px;
}
/*4、id选择器*/
#hhh {
font-size: 100px;
}
/*优先级：!important > 行间式 > id > class > 标签 > 统配 */
</style>
</head>
<body>
<h1 class="h">1标题</h1>
<h2 id="hhh" class="h h2" style="font-size: 12px">2标题</h2>
</body>
</html>
程序的道路上一去不复返
