<!DOCTYPE HTML>
<html>
<head>...</head>
<body>...</body>
</html>
web前端
“前端开发”是从“网页制作”演变而来的。网页最主要由3部分组成：结构、表现和行为。网页现在新的标准是W3C，目前模式是HTML、CSS和JavaScript。
（1）HTML是什么
- 超文本标记语言（Hypertext Markup Language，HTML）通过标签语言来标记要显示的网页中的各个部分。一套规则，浏览器认识的规则
- 浏览器按顺序渲染网页文件，然后根据标记符解释和显示内容。但需要注意的是，对于不同的浏览器，对同一标签可能会有不完全相同的解释（兼容性）
- 静态网页文件扩展名：.html 或 .htm
（2）CSS
CSS是Cascading Style Sheets的简称，中文称为层叠样式表，对html标签的渲染和布局
（3）JavaScript
JavaScript是一门脚本语言，主要用于与用户交互
综上：“HTML是网页的结构，CSS是网页的外观，而JavaScript是页面的行为
HTML
HTML是一个网页的主体部分，也是一个网页的基础。因为一个网页可以没有样式，可以没有交互，但是必须要有网页需要呈现的内容。所以HTML部分是整个前端的基础。
HTML文档结构
<!DOCTYPE html> <!-- 告诉浏览器使用什么样的html或者xhtml来解析html文档 --> <html> <!-- 称为根标签，所有的网页标签都在<html></html>中 --> <head> <!-- 定义文档的头部，它是所有头部元素的容器 --> <meta charset="utf-8" /> <!--定义编码格式--> <title>网页标题</title> <!-- 定义网页标题，在浏览器标题栏显示 --> </head> <body> <!-- 是网页的主要内容，如<h1>、<p>、<a>、<img>等网页内容标签 --> </body> </html>
HTML注释
<!--这里是注释的内容-->
<!-- xx部分 开始 -->
这里放你xx部分的HTML代码
<!-- xx部分 结束 -->
HTML注释的注意事项：
- HTML注释不支持嵌套。
- HTML注释不能写在HTML标签中。
head标签
head标签的主要内容和作用，文档的头部描述了文档的各种属性和信息，包括文档的标题、编码方式及URL等信息,这些信息大部分是用于提供索引,辩认或其他方面的应用（移动端）的等。 以下标签是可以用在head标签中的：
<head lang='en'>
<title>标题信息</title>
<meta charset='utf-8'>
<link>
<style type='text/css'></style>
<script type='text/javascript'></script>
</head>
title标签
<title>标签：在<title>和</title>标签之间的文字内容是网页的标题信息，它会显示在浏览器标签页的标题栏中。
可以把它看成是一个网页的标题。主要用来告诉用户和搜索引擎这个网页的主要内容是什么，搜索引擎可以通过网页标题，迅速的判断出当前网页的主题。
meta标签
Meta标签介绍：
元素可提供有关页面的原信息（mata-information）,针对搜索引擎和更新频度的描述和关键词。
标签位于文档的头部，不包含任何内容。
提供的信息是用户不可见的。 meta标签的组成：meta标签共有两个属性，它们分别是http-equiv属性和name属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。
常用的meta标签：
- http-equiv属性
它用来向浏览器传达一些有用的信息，帮助浏览器正确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。
<!--重定向 2秒后跳转到对应的网址，注意分号--> <meta http-equiv="refresh" content="2;URL=http://www.luffycity.com"> <!--指定文档的内容类型和编码类型 --> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <!--告诉IE浏览器以最高级模式渲染当前网页--> <meta http-equiv="x-ua-compatible" content="IE=edge">
其他标签
<!--标题--> <title>路飞学城</title> <!--icon图标（网站的图标）--> <link rel="icon" href="fav.ico"> <!--定义内部样式表--> <style></style> <!--引入外部样式表文件--> <link rel="stylesheet" href="mystyle.css"> <!--定义JavaScript代码或引入JavaScript文件--> <script src="myscript.js"></script>
body标签
想要在网页上展示出来的内容一定要放在body标签中
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>路飞</title>
</head>
<body>
<h1>海燕</h1>
<p>在苍茫的大海上，</p>
<p>狂风卷集着乌云。</p>
<p>在乌云和大海之间，</p>
<p>海燕像黑色的闪电，</p>
<p>在高傲地飞翔。</p>
</body>
</html>
body内常用标签1
1.标题标签 h1~h6 <h1> - <h6> 标签可定义标题。<h1> 定义最大的标题。<h6> 定义最小的标题 2.段落标签 p 段落标签. 包裹的内容被换行.并且也上下内容之间有一行空白. 3.超链接标签 a 超级链接<a>标记代表一个链接点，是英文anchor（锚点）的简写。它的作用是把当前位置的文本或图片连接到其他的页面、文本或图像 <!-- a链接 超链接 target:_blank 在新的网站打开链接的资源地址 _self 在当前网站打开链接的资源地址 title: 鼠标悬停时显示的标题 --> <a href="http://www.baidu.com" target="_blank" title="路飞学城">路飞学城</a> <a href="a.zip">下载包</a> <a href="mailto:zhaoxu@tedu.cn">联系我们</a> <!-- 返回页面顶部的内容 --> <a href="#">跳转到顶部</a> 4.列表标签 ul，ol 网站页面上一些列表相关的内容比如说物品列表、人名列表等等都可以使用列表标签来展示。通常后面跟<li>标签一起用，每条li表示列表的内容 <ul>:unordered lists的缩写 无序列表 <ol>:ordered listsde的缩写 有序列表 <!-- 返回某个id --> <a href="#p1">跳转到p1</a> <!-- javascript:是表示在触发<a>默认动作时，执行一段JavaScript代码，而 javascript:; 表示什么都不执行，这样点击<a>时就没有任何反应。 --> <a href="javascript:alert(1)">内容</a> <a href="javascript:;">内容</a> <!-- 无序列表 type可以定义无序列表的样式--> <ul type="circle"> <li>我的账户</li> <li>我的订单</li> <li>我的优惠券</li> <li>我的收藏</li> <li>退出</li> </ul> <!-- 有序列表 type可以定义有序列表的样式 --> <ol type="a"> <li>我的账户</li> <li>我的订单</li> <li>我的优惠券</li> <li>我的收藏</li> <li>退出</li> </ol> ol标签的属性： type：列表标识的类型 1：数字 a：小写字母 A：大写字母 i：小写罗马字符 I：大写罗马字符 列表标识的起始编号 默认为1 ul标签的属性： type：列表标识的类型 disc：实心圆(默认值) circle：空心圆 square：实心矩形 none：不显示标识 5.盒子标签 div <div>可定义文档的分区 division的缩写 译：区 <div> 标签可以把文档分割为独立的、不同的部分,请看下面代码我们将他们进行分区 <div id='wrap'> <div class='para'></div> <div class='anchor'></div> <div class='para'></div> <div class='lists'></div> </div> <div>我们将文档放在一个父级的区（div）中，它里面包含四块区（div）域，浏览器查看效果,你会发现每小块区域都是独占一行的 所以div是块级元素。另外，每块区域表示独立的一块，id属性和class属性其实很简单 你可以看成给这个区域起个名字。id是唯一的，一个页面中不能有两个重复的id 跟身份证号码一样，class可以设置同样的属性值，并且可以设置多个，例如class=’para n1‘</div> 6.图片标签 <img/> 一个网页除了有文字，还会有图片。我们使用<img/>标签在网页中插入图片。 语法：<img src="图片地址" alt="图片加载失败时显示的内容" title = "提示信息" /> 注意： src设置的图片地址可以是本地的地址也可以是一个网络地址。 图片的格式可以是png、jpg和gif。 alt属性的值会在图片加载失败时显示在网页上。 还可以为图片设置宽度(width)和高度(height)，不设置就显示图片默认的宽度和高度 <div> <span>与行内元素展示的标签<span> <span>与行内元素展示的标签<span> <img src="./machine-right.png" alt="金融量化分析" style="200px;height:200px"> <img src="./finance-right.png" alt="人工智能实战" style=" 200px;height: 200px"> </div> 浏览器查看效果：行内块元素 与行内元素在一行内显示 可以设置宽度和高度 span标签可以单独摘出某块内容，结合css设置相应的样式 7.其他标签 换行标签 <br> <br>标签用来将内容换行，其在HTML网页上的效果相当于我们平时使用word编辑文档时使用回车换行。 分割线 <hr> <hr>标签用来在HTML页面中创建水平分隔线，通常用来分隔内容 特殊符号 <b> <strong>: 加粗标签. <strike>: 为文字加上一条中线. <em>: 文字变成斜体. <sup>和<sub>: 上角标 和 下角表. <br>:换行. <hr>:水平线 特殊字符： < >；"；©
练习：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>路飞</title>
<style></style>
<!-- css样式 -->
<link rel="stylesheet" href="mystyle.css"/>
<script src='myscript.js'></script>
</head>
<body>
<h1 id='p1'>海燕</h1>
<p>在苍茫的大海上</p>
<p>狂风卷积着乌云</p>
<p>在乌云和大海之间</p>
<p>海燕像黑蓝色的闪电</p>
<p>在高傲的飞翔</p>
<h1>一级标题</h1><h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<ul type="square">
<li>我的账户</li>
<li>我的订单</li>
<li>我的优惠券</li>
<li>我的收藏</li>
<li>退出</li>
</ul>
<div>
<span>与行内元素展示的标签<span>
<span>与行内元素展示的标签<span>
<p><img src="./img/home1.png" alt="金融量化分析" style="200px;height:200px"></p>
<p><img src="./img/home2.png" alt="人工智能实战" style=" 200px;height: 200px"></p>
</div>
<!-- 有序列表 type可以定义有序列表的样式 -->
<ol type="1">
<li>我的账户</li>
<li>我的订单</li>
<li>我的优惠券</li>
<li>我的收藏</li>
<li>退出</li>
</ol>
<!-- 返回页面顶部的内容 -->
<a href="http://www.baidu.com" target="_blank" title="路飞学城">路飞学城</a>
<a href="a.zip">下载包</a>
<a href="mailto:zhaoxu@tedu.cn">联系我们</a>
<a href="#">跳转到顶部</a>
<!-- 返回某个id -->
<a href="#p1">跳转到p1</a>
<!-- javascript:是表示在触发<a>默认动作时，执行一段JavaScript代码，而 javascript:; 表示什么都不执行，这样点击<a>时就没有任何反应。 -->
<a href="javascript:alert(1)">内容</a>
</body>
</html>
table标签
表格由<table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由<td>标签定义）。
字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等
<table border="1" cellspacing="0"> <!--表格头--> <thead> <!--表格行--> <tr> <!--表格列，【注意】这里使用的是th--> <th></th> <th>星期一</th> <th>星期二</th> <th>星期三</th> <th>星期四</th> <th>星期五</th> </tr> </thead> <!--表格主体--> <tbody> <tr> <!-- rowspan 合并行(竖着合并) --> <td rowspan="3">上午</td> <!--表格列，【注意】这里使用的是td--> <td>语文</td> <td>数学</td> <td>英文</td> <td>生物</td> <td>化学</td> </tr> <tr> <!--表格列，【注意】这里使用的是td--> <td>语文</td> <td>数学</td> <td>英文</td> <td>生物</td> <td>化学</td> </tr> <tr> <!--表格列，【注意】这里使用的是td--> <td>语文</td> <td>数学</td> <td>英文</td> <td>生物</td> <td>化学</td> </tr> <tr> <!--表格列，【注意】这里使用的是td--> <td rowspan="2">下午</td> <td>语文</td> <td>数学</td> <td>英文</td> <td>生物</td> <td>化学</td> </tr> <tr> <!--表格列，【注意】这里使用的是td--> <td>语文</td> <td>数学</td> <td>英文</td> <td>生物</td> <td>化学</td> </tr> </tbody> <!--表格底部--> <tfoot> <tr> <!-- colspan 合并列(横着合并)--> <td colspan="6">课程表</td> </tr> </tfoot> </table> <br>
表单标签 form
表单是一个包含表单元素的区域
表单元素是允许用户在表单中输入内容，比如：文本域(textarea)、输入框(input)、单选框（）
<form action="index.html" method="get"> <p><label> 输入用户名: </label><input type="text" name="username" placeholder="输入用户名"/></p> <p> <label> 用户密码: </label> <input type="password" name="txtUsepwd" placeholder="输入用户密码"> </p> <p> <!--单选框--> 用户性别： <input type="radio" name="sexrdo" value="男">男 <input type="radio" name="sexrdo" value="女" checked=''>女 </p> <!--复选框--> <p> 用户爱好：吃 <input type="checkbox" name="chkhobby" value="吃" checked> 喝 <input type="checkbox" name="chkhobby" value="喝"> 玩 <input type="checkbox" name="chkhobox" value="玩"> 乐 <input type="checkbox" name="chkhobox" value="乐" checked> </p> <!--选择框--> <!--滚动列表 multiple设置以后实现多选效果，ctrl+鼠标左键进行多选--> <p>籍贯： <select name="sel1" size="3" multiple"> <option value="深圳">深圳</option> <option value="北京">北京</option> <option value="上海">上海</option> <option value="广州" selected>广州</option> </select> </p> <!--下拉列表--> <p>意向工作城市： <select name="sel2"> <option value="深圳">深圳</option> <option value="北京">北京</option> <option value="上海">上海</option> <option value="广州" selected>广州</option> </select> </p> <!--文件选择框 <p> 请上传文件： <input type="file" name="txtfile"> </p>--> <!--textarea--> <p> 自我介绍： <textarea name='txtarea' rows="5" cols="20" placeholder="填写自我介绍"></textarea> </p> <p><input type="submit" value="submit"> <input type="reset" value="reset"> <input type="button" name="btnbtn" value="普通按钮"> </p> </form>
HTML标签分类
HTML中标签元素三种不同类型：块状元素，行内元素，行内块状元素。
常用的块状元素：
<div> <p> <h1>~<h6> <ol> <ul> <table><form> <li>
常用的行内元素
<a> <span> <br> <i> <em> <strong> <label>
常用的行内块状元素：
<img> <input>
块级元素特点：display:block;
1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。独占一行
2、元素的高度、宽度、行高以及顶和底边距都可设置。
3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。
行内元素特点：display:inline;
1、和其他元素都在一行上；
2、元素的高度、宽度及顶部和底部边距不可设置；
3、元素的宽度就是它包含的文字或图片的宽度，不可改变。
行内块状元素的特点：display:inline-block;
1、和其他元素都在一行上；
2、元素的高度、宽度、行高以及顶和底边距都可设置
标签嵌套规则
块元素可以包含内联元素或某些块元素，但内联元素却不能包含块元素，它只能包含其它的内联元素，例如：
<div><div></div><h1></h1><p><p></div> ✔️ <a href=”#”><span></span></a> ✔️ <span><div></div></span> ❌
块级元素不能放在p标签里面，比如
<p><ol><li></li></ol></p> ❌ <p><div></div></p> ❌
有几个特殊的块级元素只能包含内嵌元素，不能再包含块级元素，这几个特殊的标签是：
h1、h2、h3、h4、h5、h6、p
li元素可以嵌入ul，ol，div等标签
<ul> <li> <ul> <li> <div> </div> </li> <li> <ol> <li></li> <li></li> <li></li> <li></li> </ol> </li> </ul> </li> </ul>