前端-html
HTML，全称“Hyper Text Markup Language（超文本标记语言）”，简单来说，网页就是用HTML语言制作的。
CSS，全称“（层叠样式表）”。以后我们在别的地方看到“层叠样式表”、“CSS样式”，指的就是CSS。
JavaScript是一门脚本语言。
HTML是网页的结构，CSS是网页的外观，而JavaScript是页面的行为。
静态网页：不能和用户进行交互。
动态网页：可以和用户进行交互。
标签介绍
1. 在HTML中规定标签使用英文的的尖括号即`<`和`>`包起来，如`<html>`、`<p>`都是标签。
2. HTML中标签**通常**都是成对出现的，分为开始标签和结束标签，结束标签比开始标签多了一个`/`，如`<p>标签内容</p>`和`<div>标签内容</div>`。开始标签和结束标签之间的就是标签的内容。
3. 标签之间是可以嵌套的。例如：div标签里面嵌套p标签的话，那么`</p>`必须放在`</div>`的前面。
4. HTML标签不区分大小写，`<h1>`和`<H1>`是一样的，但是我们通常建议使用小写，因为大部分程序员都以小写为准。
<!DOCTYPE html> <!-- 此为注释：页面的根节点--> <!--html中的标签都是闭合标签 闭合标签包含双闭合 单闭合 双闭合：<html></html> 单闭合：<meta/> --> <html> <head> <!--声明头部的元信息 对我们文档 规定编码格式--> <meta charset="utf-8"/> <!--包含头部的信息 是一个容器 包含style title meta script link 等--> </head> <body> <!--包含浏览器显示的内容标签 div p a img input 等--> 这是我们的文档结构 </body> </html>
head标签
title标签
<title>标签：在<title>和</title>标签之间的文字内容是网页的标题信息，它会显示在浏览器标签页的标题栏中。可以把它看成是一个网页的标题。
<!DOCTYPE HTML> <html> <head> <title>路飞学城</title> </head> <body></body> </html>
meta标签
元素可提供有关页面的原信息（mata-information）,针对搜索引擎和更新频度的描述和关键词。
- 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">
- name属性：主要用于页面的关键字和描述，是写给搜索引擎看的，关键字可以有多个用 ‘,’号隔开，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。
<meta name="keywords" content="meta总结,html meta,meta属性,meta跳转"> <meta name="description" content="路飞学城">
其他标签
<!--标题--> <title>路飞学城</title> <!--icon图标（网站的图标）--> <link rel="icon" href="fav.ico"> <!--定义内部样式表--> <style></style> <!--引入外部样式表文件--> <link rel="stylesheet" href="mystyle.css"> <!--定义JavaScript代码或引入JavaScript文件--> <script src="myscript.js"></script>
实例：
<!doctype html> <html lang="en"> <head> <!--文档的标题 编码方式及URL等信息，这些信息大部分是用于提供索引， 辨认或其他方面的应用（移动端）--> <meta charset="UTF-8"> <!--常用两个属性 http-equiv:它用来向浏览器传达一些有用的信息，帮助浏览器正确地显示网页内容， 与之对应的属性值为content,content中的内容其实就是各个参数的变量值--> <!--指定文档内容类型和编码类型--> <meta http-equiv="content-type" content="text/html;charset=utf-8"/> <!--5秒之后重定向到路飞学城的网站--> <meta http-equiv="refresh" content="5;URL=https://www.luffycity.com"/> <!--告诉IE浏览器以最高级模式渲染当前网页--> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <!--为了我们的seo优化--> <meta name="keywords" content="'meta总结，HTML meta，meta 属性，meta 跳转"> <meta name="description" content="路飞学城"> <!--引入外部样式表--> <link rel="stylesheet"type="text/css" href=""> <!--定义内部样式表--> <style type="text/css"> </style> <!--定义内容脚本文件--> <script type="text/javascript"></script> <!--文档的标题--> <title>Document</title> </head> <body> </body> </html>
body标签
标题标签 h1~h6：<h1> - <h6> 标签可定义标题。<h1> 定义最大的标题。<h6> 定义最小的标题
文本样式标签主要用来对HTML页面中的文本进行修饰，比如加粗、斜体、线条样式等... 1. `<b></b>`：加粗 2. `<i></i>`：斜体 3. `<u></u>`：下划线 4. `<s></s>`：删除线 5. `<sup></sup>`：上标 6. `<sub></sub>`：下标 现在如果想在一段文字中特别强调某几个字，这时候就可以用到`<em>`或`<strong>`标签。 这两个标签都是表示强调，但是两者在强调的语气上有区别:`<em>`表示强调，`<strong>`表示更强烈的强调。 在浏览器中`<em>`默认会用斜体表示，`<strong>`会用粗体来表示。两个标签相比，我们通常会推荐大家使用`<strong>`表示强调
段落标签 p：
<p>,paragraph的简写。定义段落
<body> <p>我是一个段落</p> <p>我是另外一个段落</p> </body>
超链接标签 a
超级链接<a>标记代表一个链接点，是英文anchor（锚点）的简写。它的作用是把当前位置的文本或图片连接到其他的页面、文本或图像
<body> <h1> <!-- 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> <!-- 返回某个id --> <a href="#p1">跳转到p1</a> <!-- javascript:是表示在触发<a>默认动作时，执行一段JavaScript代码，而 javascript:; 表示什么都不执行，这样点击<a>时就没有任何反应。 --> <a href="javascript:alert(1)">内容</a> <a href="javascript:;">内容</a> </h1> </body>
target:_blank 在新的网站打开链接的资源地址 target：_self 在当前网站打开链接的资源地址 title: 表示鼠标悬停时显示的标题
链接其他表现形式：
<a href="./a.zip">下载压缩包</a> <a href='mailto:123@163.com'>联系我们</a> <a href="#p1">跳转到顶部</a> <!-- p1是id --> <!-- javascript:是表示在触发<a>默认动作时，执行一段JavaScript代码--> <a href="javascript:alert()">内容</a> <!-- javascript:;表示什么都不执行，这样点击<a>时就没有任何反应 --> <a href="javascrip:;">什么都不执行</a>
列表标签 ul，ol
通常后面跟<li>标签一起用，每条li表示列表的内容
<ul>:unordered lists的缩写 无序列表 <ol>:ordered listsde的缩写 有序列表
ol标签的属性：
type：列表标识的类型
- 1：数字
- a：小写字母
- A：大写字母
- i：小写罗马字符
- I：大写罗马字符
列表标识的起始编号
- 默认为1
ul标签的属性： type：列表标识的类型
- disc：实心圆(默认值)
- circle：空心圆
- square：实心矩形
- none：不显示标识
盒子标签 div
<div>可定义文档的分区 division的缩写 译：区 <div> 标签可以把文档分割为独立的、不同的部分
id属性和class属性可以看成给这个区域起个名字。id是唯一的，一个页面中不能有两个重复的id；class可以设置同样的属性值，并且可以设置多个，例如class=’para n1 ’
图片标签 <img/>
一个网页除了有文字，还会有图片。我们使用<img/>标签在网页中插入图片。
语法：<img src="图片地址" alt="图片加载失败时显示的内容" title = "提示信息" />
注意：
- src设置的图片地址可以是本地的地址也可以是一个网络地址。
- 图片的格式可以是png、jpg和gif。
- alt属性的值会在图片加载失败时显示在网页上。
- 还可以为图片设置宽度(width)和高度(height)，不设置就显示图片默认的宽度和高度，浏览器查看效果：行内块元素
- 与行内元素在一行内显示，可以设置宽度和高度
span标签
可以单独摘出某块内容，结合css设置相应的样式
换行标签 <br>
<br>标签用来将内容换行，其在HTML网页上的效果相当于我们平时使用word编辑文档时使用回车换行。
分割线 <hr>
<hr>标签用来在HTML页面中创建水平分隔线，通常用来分隔内容
特殊符号
浏览器在显示的时候会移除源代码中多余的空格和空行。 所有连续的空格或空行都会被算作一个空格。需要注意的是，HTML代码中的所有连续的空行（换行）也被显示为一个空格。
特殊字符
在上一个实例中，我们演示了HTML中输入空格、回车都是没有作用的。要想输入空格，需要用特殊符号 -- 。
常用的特殊字符：
表格标签 table
表格由<table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由<td>标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。
<div class="table"> <table> <!--表格头--> <thead> <!--表格行--> <tr> <!--表格列，【注意】这里使用的是th--> <th></th> </tr> </thead> <!--表格主体--> <tbody> <!--表格行--> <tr> <!--表格列，【注意】这里使用的是td--> <td></td> </tr> <tr> <td></td> </tr> </tbody> <!--表格底部--> <tfoot> <tr> <td></td> </tr> </tfoot> </table> </div>
表格行和列的合并
rowspan 合并行(竖着合并)
colspan 合并列(横着合并)
<body> <div class="table"> <table border="1" cellspacing="0"> <!--表格头--> <thead> <!--表格行--> <tr> <!--表格列，【注意】这里使用的是th--> <th></th> <th>星期一</th> <th>星期二</th> <th>星期三</th> <th>星期四</th> <th>星期五</th> </tr> </thead> <!--表格主体--> <tbody> <!--表格行--> <tr> <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 rowspan ="2">下午</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> </tbody> <!--表格底部--> <tfoot> <tr> <td colspan="6">课程表</td> </tr> </tfoot> </table> </div> </body>
表单标签 form
表单是一个包含表单元素的区域
表单元素是允许用户在表单中输入内容，比如：文本域(textarea)、输入框(input)、单选框（）
表单的作用
表单用于显示、手机信息，并将信息提交给服务器，与用户交互
- 语法：
<form>允许出现表单控件</form>
<form action="http://www.baidu.com" method="get"> <!-- input --> <!--文本框--> <p> 用户名称： <input type="text" name="txtUsename" value="请输入用户名称" readonly> </p> <p> 用户密码： <input type="password" name="txtUsepwd"> </p> <p> 确认密码： <input type="password" name="txtcfmpwd" disabled> </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> <!-- 按钮 --> <p> <input type="submit" name="btnsbt" value="提交"> <input type="reset" name="btnrst" value="重置"> <input type="button" name="btnbtn" value="普通按钮"> </p> <!--文件选择框--> <p> 请上传文件： <input type="file" name="txtfile"> </p> <!--textarea--> <p> 自我介绍： <textarea name="txt" cols="20" rows="5"></textarea> </p> <!--选择框--> <!--滚动列表 multiple设置以后实现多选效果，ctrl+鼠标左键进行多选--> <p>籍贯： <select name="sel" size="3" multiple> <option value="深圳">深圳</option> <option value="北京">北京</option> <option value="上海">上海</option> <option value="广州" selected>广州</option> </select> </p> <!--下拉列表--> <p>意向工作城市： <select name="sel"> <option value="深圳">深圳</option> <option value="北京">北京</option> <option value="上海">上海</option> <option value="广州" selected>广州</option> </select> </p> </form>
块级元素特点：display:block;
1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。独占一行
2、元素的高度、宽度、行高以及顶和底边距都可设置。
3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。
行内元素特点：display:inline;
1、和其他元素都在一行上；
2、元素的高度、宽度及顶部和底部边距不可设置；
3、元素的宽度就是它包含的文字或图片的宽度，不可改变。
行内块状元素的特点：display:inline-block;
1、和其他元素都在一行上；
2、元素的高度、宽度、行高以及顶和底边距都可设置
常用标签介绍
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>常用标签一</title> </head> <body> <div class="p1"> <p style="height:2000px"id="p1">顶部</p> </div> <!--body相关标签--> <!--heading:标题 h1-h6--> <!--块级标题，独占一行，可以设置宽高--> <div class="heading"> 不仅有独家<h3>Python全栈开发课程</h3> 带你逐步提升技能。<br>更有Linux运维工程师，<hr>带来最极致的成长体验。 <h1>路飞学城</h1> <h2>路飞学城</h2> <h3>路飞学城</h3> <h4>路飞学城</h4> <h5>路飞学城</h5> <h6>路飞学城</h6> </div> <!--段落标签--> <div class="p1"> <p>路飞学城立志帮助有指向的年轻人通过努力学习获得体面的工作和生活</p> </div> <!--_self:默认值：在当前网站打开资源 _blank:在新的网站打开资源--> <!--a标签是行内标签,只是在一行显示，设置宽高不显示--> <div class="anchor"> <a href="http://www.luffycity.com" target="_blank" title="luffy">路飞学城</a> <a href="./a.zip">下载压缩包</a> <a href="mailto:zhaoxu@tedu.cn">联系我们</a> <!--返回页面顶部的内容--> <a href="#">跳转到顶部</a> <!--返回每个ID--> <a href="#p1">跳转顶部的段落标签</a> <!--javascript:是表示在触发<a>默认动作是，执行一段javascript代码， 而javascript:;表示什么都不执行，这样点击<a>时就没有任何反应。把a的默认动作取消了--> <a href="javascript:alert(1)">内容</a> <a href="javascript:;">内容</a> </div> <!--无序列表，ul默认是实心圆点，块状标签--> <div class="lists"> <ul type="none"> <li>我的账户 ></li> <li>我的订单 ></li> <li>我的优惠券 ></li> <li>我的收藏 ></li> <li>退出 ></li> </ul> <!--ol有序，默认序列表示，块状标签--> <ol style="list-style:none"> <li>我的账户 ></li> <li>我的订单 ></li> <li>我的优惠券 ></li> <li>我的收藏 ></li> <li>退出 ></li> </ol> </div> <div class="image"> <!--1.可设宽高 2.在一行内显示，它叫行内块标签--> <img src="../css学习/img1.png" alt="python的图片" style="width:200px;height:200px"> <img src="./img2.png" alt="python的图片" style="width:200px;height:200px"> </div> <!-- 三种： 1.块级元素：独占一行，可设宽高，如果不设宽高，默认浏览器中的宽高 2.行内元素：在一行内展示，不显示设置的宽高，它的宽高根据内容去填充 3.行内块元素：在一行内展示，可设宽高 小练习：展示两张图片，独占一行，鼠标上移去显示小手状态 --> </body> </html>
常用标签-table
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格</title> </head> <body> <!--表格,表格边框--> <table border="1"cellspacing="0"> <!--表格头--> <thead> <tr> <th></th> <th>星期一</th> <th>星期二</th> <th>星期三</th> <th>星期四</th> <th>星期五</th> </tr> </thead> <tbody> <!--表格中的每一行--> <tr> <td rowspan="3">上午</td> <td>语文</td> <td>数学</td> <td>英语</td> <td>生物</td> <td>化学</td> </tr> <tr> <td>语文</td> <td>数学</td> <td>英语</td> <td>生物</td> <td>化学</td> </tr> <tr> <td>语文</td> <td>数学</td> <td>英语</td> <td>生物</td> <td>化学</td> </tr> <tr> <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> </tr> </tbody> <tfoot> <tr> <td colspan="6">课程表</td> </tr> </tfoot> </table> </body> </html>
常用标签-form
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单控件</title> </head> <body> <div class="form"> <!--form是一个块级元素,被提交--> <form action="https://www.baidu.com" method="get"> <p> <!--label是行内元素，input是行内块元素--> <label for="user"> 用户名： </label> <input type="text" name="username" id="user" placeholder="请输入用户名"> </p> <p> <label for="password">密码：</label> <input type="password" name="password" id="password" placeholder="请输入密码"> </p> <!--单选框：checked会被默认选中，产生互斥效果name值要相同--> <p> 用户性别 <input type="radio" name="sex" value="男" checked="">男 <input type="radio" name="sex" value="女">女 </p> <!--复选框，checked是默认的选项--> <p> 用户爱好： <input type="checkbox" name="checkfav" value="吃" checked="">吃 <input type="checkbox" name="checkfav" value="喝">喝 <input type="checkbox" name="checkfav" value="玩">玩 <input type="checkbox" name="checkfav" value="乐">乐 </p> <p> <!--上传文件--> <input type="file" name="textFile"> </p> <p> <!--文本域--> 自我介绍 <textarea name="txt" id="" cols="20" rows="5" placeholder="请做自我介绍"></textarea> </p> <p> <!--下拉列表,selected 是被默认选中的--> <select name="sel" id="" size="3" multiple=""> <option value="北京" selected>北京</option> <option value="上海">上海</option> <option value="沙河">沙河</option> <option value="山东">山东</option> <option value="福建">福建</option> </select> </p> <p> <!--button显示普通按钮，submit显示提交按钮--> <input type="button" name="btn" value="提交" disabled="disabled"> <input type="submit" name="btn" value="submit"> <!--重置按钮,重新归置为0--> <input type="reset" name=""> </p> </form> <button type="button">按钮</button> </div> </body> </html>
<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等标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>标签分类</title> </head> <body> <div class="wrapper"> <!--块级元素：div p h1-h6 ol ul table form li 块级元素：可以设置宽度与高度，如果设置了宽度与高度，则就是当前的宽高， 如果宽度与高度没有设置，宽度是父盒子的宽度，高度根据内容填充--> <div class="left"> 这是路飞学城的战场 <div>这是我的段落 <div style="width:500px;height:100px"> 这个是我的爱好 </div> <ul> <li> <h2> 抽烟 </h2> </li> <li> <ol> <li> 喝酒 </li> <li> 烫头 </li> </ol> </li> </ul> </div> </div> </div> <div class="right"> <!--a span br i em strong label 行内元素，在一行内展示，不能设置宽度与高度，宽度与高度根据内容取填充--> <a href="#" style="width:200px;height:100px">百度</a> <a href="#">路飞</a> <span style="width:100px;height:200px">一些文本</span> <span>一些文本</span> </div> <div class="inline-block"> <!--行内块：在一行展示，--> <img src="../css学习/img1.png" alt="一张图片"> <input type="text" name="username" style="width:200px;height:50px"> </div> </body> </html>
