"""
前端学习
1. html 页面架构
2. cass 页面布局
3. JavaScript 页面交互
4. jquery js的工具包
5. bootstrap 快速页面搭建的框架
"""
HTML
"""
1. 超文本标记语言
2. 组成：转义字符、指令、标签
3. 目的：完成页面架构的搭建 - 用什么标签，用什么标签嵌套关系
"""
第一个页面
<!--注释：doctype必须出现在页面的最上方，规定该文档采用的html版本类型-->
<!DOCTYPE html>
<!--html语言不区分大小写-->
<!--页面标签：包含所有页面内容，只有head和body两个子标签-->
<html lang="zh">
<!--zh中文 en英文 ...-->
<!--头标签：样式、脚本、后勤操作：页面编码、页面标签、页面图标-->
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<!--体标签：页面显示内容存放区域-->
<body>
</body>
</html>
指令
"""
指令：以<>包裹，以！开头 -
注释：<!-- -->
文档类型： <!doctype>
"""
转义字符
"""
转义字符：被& ；包裹 内容为特殊字符或字母或数字组成
<: <
>: >
空格:
版权: ©
"""
标签
"""
标签：被<>包裹，以字母开头，可以包含数字和减号
系统标签：h1~h6 p span div i b a img hr br table from input
自定义标签：满足合法命名的所有标签
注释：html语言中系统建议只使用系统标签
"""
常用标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--1.标题-->
<!--重点：h1标签的语义：是该页面的主标签-->
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h6>六级标题</h6>
正文文本
正文文本
<!--3.换行标签-->
正文文本 <br>
正文文本 <br>
<!--自带换行的文本标签：h1 ~h6 p-->
<!--4. 文本类型和标签 ，不自带换行的文本标签 -span i b 这三个比较重要-->
<span>span</span>
<span>span</span>
<b>加粗标签</b>
<b>加粗标签</b>
<i>斜体标签</i>
<i>斜体标签</i>
<em>以斜体作为强调的强调标签</em>
<em>以斜体作为强调的强调标签</em>
<br>
<span>一般用来嵌套特殊字符</span>
<!--超文本链接-->
<a href="https://www.baidu.com">前往百度</a>
<br>
<!--图片标签-->
<img title="这是高达" src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=583848903,2989945267&fm=26&gp=0.jpg">
<!--title：鼠标悬浮的文本提示-->
<!--alt：img标签资源加载失败-->
<!--列表标签-->
<!--ul>li{第$列}*5-->
<ul>
<li>第一列</li>
<li>第二列</li>
<li>第三列</li>
<li>第四列</li>
</ul>
<!--表格标签-->
<!--tr：行 th：标题单元格 td：单元格-->
<table>
<thead>
<tr>
<!--th{标题}*3-->
<th>标题</th>
<th>标题</th>
<th>标题</th>
</tr>
</thead>
<tbody>
tr>td{单元格}*3
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
<tr>
</tr>
</tbody>
<tfoot>
</tfoot>
</table>
</body>
</html>
标签的分类
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标签的分类</title>
</head>
<body>
<h1>标签的分类</h1>
<hr>
<!--1.是否自动换行-->
<!--带换行：h1 p div table from tr ul li-->
<!--不带换行：span i b a img input button label textatea -->
<!--2.单双标签-->
<!--单标签（主功能）：br hr input img link -->
<!--双标签（主内容）: html head body h1 p span div a label button-->
<!-- / 代表标签的结尾，但是单标签可以省略-->
<div></div>
<hr />
<!--3.简单和组合标签-->
<!--组合: ul > li table > tr > td|th from > input-->
</body>
</html>
页面架构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
html 学习的目的：
1.什么时候用什么标签
最内层：h1~h6 p a img input
外层：ul>li from table
架构：div
-->
<!--页面头-->
<div class="header">
<h1>
<a href=""></a>
</h1>
<from action="">
<input type="text">
<button></button>
</from>
</div>
<!--导航栏-->
<ul class="nav">
<ul>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</ul>
</ul>
<!--页面主体-->
<div class="main">
<!--.main-left+.main-center+.main-right-->
<div class="main-left"></div>
<div class="main-center"></div>
<div class="main-right"></div>
<h2>领先的web技术 - 全部免费</h2>
<p>在w3School中，你可以找到所需要的所有网站建设教程</p>
<p>在基础的HTML中到CSS，乃至进阶的XML、SQL、JS、PHP、ASP.NET</p>
<p>
<b>从左侧的菜单选择你需要的教程</b>
</p>
</div>
<!--页面尾部-->
<div class="footer"></div>
</body>
</html>
样式转入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css的引入</title>
<!--2.内联式-->
<!--书写位置：在head标签中的style标签内-->
<!--css语法 css选择器{样式1；样式2；}-->
<!--优缺点：可读性强，有复用性，样式被html页面绑定，不能提供给其他的html使用-->
<style>
h2 {
color: red;
font-size: 100px;
text-align: center;
}
</style>
<!--3.外联式-->
<!--书写位置：在外部css文件中，在html文件中通过link标签引入css文件-->
<!--css语法：在css选择器{样式1；样式2；}-->
<!--优缺点：可读性强，有复用性，适合团队开发-->
<link rel="stylesheet" href="路径/文件名">
<!--劲量使用相对路径，将文件放置于同一文件夹下-->
</head>
<body>
<!--1.行间式-->
<!--书写位置：在标签的style属性中书写样式-->
<!--优缺点：可读性差，没有复用性，书写直接-->
<h1 style="color: red; font-size: 100px; text-align: center;">css的引入</h1>
<h1>h1标签</h1>
<h2>h2标签</h2>
<h2>h2标签</h2>
<h3>h3标签</h3>
<h3>h3标签</h3>
<h4>h4标签</h4>
<h4>h4标签</h4>
</body>
</html>
CSS
css导读
"""
1.css是什么：级联样式表
2.css属于标记语言，没有逻辑
3.css是完成页面 样式 与布局
4.学习的内容：css如何控制html标签 -建立联系 -css选择器
css可以控制哪些样式
css如何导入到html文件中
"""
<!DOCTYPE html>
<html lang="en">
<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>