前端开发：HTML
静态页面： 没有与用户进行交互，而仅仅是用户浏览的一个网页javascript
动态网页：就是用户不只仅能够浏览网页，还能够与服务器交互css
Web前端应用场景：公司官网（在PC经过浏览器访问公司网站）、移动端网页（在手机上浏览公司信息、小游戏等）、移动端APP（如：淘宝）、微信小程序（不占用手机空间）等html
Python全栈开发：不只须要后端开发的技术，还要必定程度的前端开技术；Python基础语法、函数、面向对象、网络编程及数据库相关的内容，这些是后端开发的范畴。前端
前端（网页）主要由3部份内容组成：结构（HTML）、表现（CSS）和行为（JavaScript） （标准是W3C）java
HTML： Hyper Text Markup Lauguage（超文本标记语言），是一门描述性的语言，网页就是用HTML语言制做的；用于搭建网页结构python
CSS：全称“层叠样式表”，能够修饰、改变网页的字体、字体大小、字体颜色和背景颜色等；数据库
JavaScript：是一门脚本语言，用于控制网页的行为，例如经过JavaScript定义鼠标一个行为，鼠标移动到某个字体上时，背景颜色会改变等编程
总结： HTML是网页的结构，CSS是网页的外观，JavaScript是网页的行为小程序
HTML：后端
HTML是一个网页的主题部分；是一种用于建立网页的标记语言。标记语言是一种将文本（Text）以及文本相关的其余信息结合起来，展示出关于文档结构和数据处理细节的计算机文字编码；使用标记（Markup）进行标识。
标签：HTML做为一门标记语言，是经过各类各样的标签来标记网页内容的。学习HTML主要就是学习HTML的标签
标签的特色：
1. 在HTML中规定标签使用英文的尖括号即“<”和“>”包起来
2. HTML中标签一般都是成对出现的，分为开始标签和结束标签，结束标签比开始标签多了一个“/”
3. 标签之间一般是能够嵌套的（不是全部的标签都支持互相嵌套）
HTML文档结构：
一个HTML文件有本身固定结构的，以下：
<!-- 在HTML跟节点以前，必需要先声明这个文档为HTML5的文件 --> <!DOCTYPE HTML> <html> <head>...</head> <body>...</body> </html> <!-- 用于注释 --> <!-- 1. <html></html> 称为根标签，全部的网页标签都在<html></html>中; 2. <head></head> 标签用于定义文档的头部，它是全部头部元素的容器。常见的头部元素有<title>、<script>、<style>、<link>和<meta>等标签; 3. 在<body>和</body>标签之间的内容是网页的主要内容，如<h1>、<p>、<a>、<img>等网页内容标签，在<body>标签中的内容最终会在浏览器中显示出来 -->
注意：一、HTML注释不支持嵌套； 2. HTML注释不能写在HTML中
建本身的第一个HTML文件
<!-- 声明文档的类型 标记该文档为HTML5的文件 --> <!DOCTYPE html> <!-- html中的标签都是闭合标签，闭合标签包含双闭合和单闭合 双闭合：<html> </html> 单闭合：<meta /> --> <html> <head> <!-- 声明头部的元信息 对咱们的文档规定编码格式 --> <meta charset="utf-8"> <!-- 是一个容器，包含头部的信息 --> </head> <body> <!-- 包含浏览器显示的内容标签 --> 这是咱们的文档结构 </body> </html>
head标签相关内容：
head标签的主要内容和做用：文档的头部描述了文档的各类属性和信息，包括文档的标题、编码方式和URL等信息，这些信息大部分是用于提供索引、辨认或其余方面的应用（移动端）等。
如下标签能够用在head标签中：
<head lang="en"> <title>标题信息</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href=""> <style type="text/css"></style> <script type="text/javascript"></script> </head>
<title>标签： 在<title>和</title>标签之间的文字内容是网页标题信息，它会显示在浏览器标签页的标题栏中。能够把它当作一个网页的标题，主要用来告诉用户和搜索引擎这个网页的主要内容是什么，搜索引擎能够经过网页标题迅速判断出当前网页的主题
meta标签：
1.元素可提供页面的元信息（mata-information），针对搜索引擎和更新频度的描述和关键词；
2.标签位于文档的头部，不包含任何内容；
3. 提供的信息是用户不可见的；
4. meta标签的组成：meta标签共有两个属性：http-equiv和name，不一样的属性又有不一样的参数值，这些不一样的参数值实现了不一样的网页功能
meta标签的属性：
1. http-equiv属性：它能够用来向浏览器传达一些有用的信息，帮助浏览器正确的显示网页内容，与之对应的属性是content，content中的内容就是各个参数的变量值
<!-- 重定向 2秒后跳转到对应的网址；注意分号 --> <meta http-equiv="refresh" content="1;URL=https://www.baidu.com"> <!-- 指定文档的内容类型和编码类型 --> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <!-- 告诉IE浏览器用最高级的模式渲染当前网页 --> <meta http-equiv="x-ua-compatible" content="IE=edge">
2.name属性：主要用于页面的关键字和描述，是写给搜索引擎看的关键字能够用“,”隔开，与之对应的防属性值为content，content中的内容主要是便于搜索引擎查找信息和分类信息用的
<meta name="keywords" content="meta总结,html,meta属性"> <meta name="description" content="路飞学城">
其余标签：
<!-- icon图标：网站的图标 --> <link rel="icon" href="fav.ico"> <!-- 引入外部样式文件 --> <link rel="stylesheet" href="mystyle.css"> <!-- 定义内部样式表 --> <style type="text/css"></style> <!-- 定义JavaScript代码或引入JavaScript文件 --> <script type="text/javascript"></script>
<!-- 连接到外部javascript文件 -->
<script src="./index.js"></script>
把上述标签拼到一块儿，以下：
<!DOCTYPE html> <html lang="en"> <head> <title>路飞学城</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <!-- <meta http-equiv="refresh" content="3;URL=https://www.baidu.com" /> --> <meta http-equiv="x-ua-compatible" content="IE=edge"> <!-- 能够用于优化SEO --> <meta name="keywords" content="meta总结,html,meta属性"> <meta name="description" content="路飞学城"> <!-- 连接到外部图标 --> <link rel="icon" href="./fav.ico"> <!-- 引入外部的样式表 index.css --> <link rel="stylesheet" type="text/css" href="./index.css"> <!-- 定义内部样式表 --> <style type="text/css"> </style> <!-- 定义内部脚本文件 --> <script type="text/javascript"></script> <!-- 连接到外部javascript文件 --> <script src="./index.js"></script> </head> <body> </body> </html>
body相关标签
标题标签 h1~ h6：<h1> - <h6>标签可定义标题，<h1>定义最大的标题， <h6>定义最小的标题。标题标签一般来制做文章或网站的标题
不要利用标题标签来改变同一行中的字体大小，应该使用CSS来定义达到想要的显示效果。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>经常使用标签一</title> </head> <body> <!-- body相关标签 --> <!-- heading：标题 h1~h6 --> 路飞学城 <h1>路飞学城</h1> <h2>路飞学城</h2> <h3>路飞学城</h3> <h4>路飞学城</h4> <h5>路飞学城</h5> <h6>路飞学城</h6> </body> </html>
若是<h1>和<h2>书写在一行上，那在浏览器上的效果倒是换行了（由于一个<h>标签独占一行）；
<h1>~<h6>是块级元素；块级元素有两个属性： 1. 独占一行； 2. 能够设置宽度和高度（width和height）
段落标签p： <p>内容 </p>，paragrapher的简写，定义段落。
浏览器展现特色：
1. 跟普通文本同样，咱们能够经过CSS来设置当前段落的样式
2. 段落也是独占一行，由于其也是 块级元素
<!-- 文本样式标签主要用来对HTML页面中的文本进行修饰，好比加粗、斜体、线条样式等 --> <b></b> ：加粗 <i></i> ：斜体 <u></u> ：下划线 <s></s> ：删除线 <sup></sup> ：上标 <sub></sub> ：下标 <!-- 若是想在一段文字是特别强调某几个字，这时候就能够用到 <em> 或 <strong> 标签 --> <em></em>和<strong></strong>的区别： <em></em>表示强调，<strong></strong>表示更强烈的强调；在浏览器中<em>默认用斜体表示，<strong>用粗体表示。一般推荐使用<strong>表示比强调
超连接标签a：超级连接<a></a>标记表明一个连接点，是英文anchor（锚点）的简写。它的做用是把当前位置的文本或图片链接到其余的页面、文本或图像
以下代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>经常使用标签一</title> </head> <body> <p style="height: 1000px" id="p1">顶部区域</p> <!-- body相关标签 --> <!-- heading：标题 h1~h6 --> 路飞学城 <h1>路飞学城</h1> <h2>路飞学城</h2> <h3>路飞学城</h3> <h4>路飞学城</h4> <h5>路飞学城</h5> <h6>路飞学城</h6> <p>我 年 拜 籍 舞 养 摩 的 凹 文 美 善 长 余 正 生 走 凸 段 干 你 万 雨 不 看 特 自 乙 套 出 曹 心 盛 牛 小 州 成 有 用 发 笔 为 物 那 辛 新</p> <p>我 年 拜 籍 舞 养 摩 的 凹 文 美 善 长 余 正 生 走 凸 段 干 你 万 雨 不 看 特 自 乙 套 出 曹 心 盛 牛 小 州 成 有 用 发 笔 为 物 那 辛 新</p> <!-- a连接 超连接 target: _self，表示在当前浏览器标签打开(默认值)； _ blank，在新的浏览器窗口打开连接的资源地址； title：鼠标悬停时显示的标题 --> <a href="https://www.baidu.com" target="_blank" title="路飞学城">转到百度</a> <!-- 转到压缩包并下载 --> <a href="body经常使用标签.rar">下载压缩包</a> <!-- 转到邮箱并给目标邮箱发送邮件 --> <a href="mailto:andrewzheng@sina.cn">联系咱们</a> <!-- 返回页面顶部 # 表明顶部 --> <a href="#">跳转到顶部</a> <!-- 返回到某个id的区域；id经过#检索； 同一个页面id是惟一的 --> <a href="#p1">返回到p1段落区域</a> <!-- javascript: 是表示在触发<a>默认动做时，执行一段javascript代码，而 javascript:; 表示什么都不执行，这样点击<a>时就没有任何反应 --> <a href="javascript:alert(1)">内容一</a> <a href="javascript:;">内容二</a> </body> </html>
<a>标签属于行内标签（在一行内显示），对其设置width 和 height不起做用
列表标签：ul，ol
网站页面上一些列表相关的内容好比说物品列表、人名列表等等均可以使用列表标签来展现。一般后面跟<li>标签一块儿用，每条<li>表示列表的内容；每一个<ul><ol><li>都是“块级元素”
<ul> ：unordered lists的缩写，无序列表 ； <ol>： ordered lists的缩写，有序列表
<!-- 无序列表；可加type属性，用于定义列表的样式--> <ul type="circle"> <li>个人帐户</li> <li>个人订单</li> <li>个人优惠券</li> <li>个人收藏</li> <li>退出</li> </ul> <!-- 有序列表；可加type属性，用于定义列表的样式 --> <ol type="I"> <li>个人帐户</li> <li>个人订单</li> <li>个人优惠券</li> <li>个人收藏</li> <li>退出</li> </ol>
列表的type属性：
<ul>的：
- disc 表示实心圆（默认值）
- circle 表示空心圆
- square 表示实心矩形
- none 不显示标识
<ol>的：
- 1 表示数字 （默认值；默认起始编号为1）
- a 表示小写字母
- A 表示大写字母
- i 表示小写罗马字符
- I 表示大写罗马字符
盒子标签：<div>
<div>可定义文档的分区，division（区）的缩写；<div>标签能够把文档分割为独立的、不一样的部分；
以下代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>经常使用标签一</title> </head> <body> <div class="para"> <p style="height: 1000px" id="p1">顶部区域</p> </div> <!-- body相关标签 --> <div class="heading"> <!-- heading：标题 h1~h6 --> 路飞学城 <h1>路飞学城</h1> <h2>路飞学城</h2> <h3>路飞学城</h3> <h4>路飞学城</h4> <h5>路飞学城</h5> <h6>路飞学城</h6> </div> <div class="para"> <p>我 年 拜 籍 舞 养 摩 的 凹 文 美<strong> 善 长 余</strong> 正 生 走 凸 段 干 你 万 雨 不 看 特 自 乙 套 出 曹 心 盛 牛 小 州 成 有 用 发 笔 为 物 那 辛 新</p> <p>我 年 拜 籍 舞 养 摩 的 凹 文 美 善 长 余 正 生 走 凸 段 干 你 万 雨 不 看 特 自 乙 套 出 曹 心 盛 牛 小 州 成 有 用 发 笔 为 物 那 辛 新</p> </div> <div class="a"> <a href="https://www.baidu.com" target="_blank" title="路飞学城">转到百度</a> <a href="body经常使用标签.rar">下载压缩包</a> <a href="mailto:andrewzheng@sina.cn">联系咱们</a> <a href="#">跳转到顶部</a> <a href="#p1">返回到p1段落区域</a> <a href="javascript:alert(1)">内容一</a> <a href="javascript:;">内容二</a> </div> <div class="lists"> <!-- 无序列表；可加type属性，用于定义列表的样式--> <ul type="circle"> <li>个人帐户</li> <li>个人订单</li> <li>个人优惠券</li> <li>个人收藏</li> <li>退出</li> </ul> <!-- 有序列表；可加type属性，用于定义列表的样式 --> <ol type="I"> <li>个人帐户</li> <li>个人订单</li> <li>个人优惠券</li> <li>个人收藏</li> <li>退出</li> </ol> </div> </body> </html>
浏览器查看效果以下：每小块区域都是独占一行的，因此div是块级元素
另外，每块区域表示独立的一块，可为其设置id属性和 class属性，来为某个区域起个名字；id是惟一的，但class能够设置一样的属性值，而且能够设置多个
图片标签：<img/>
可经过使用<img/>标签在网页中插入图片
语法：<img src="图片地址" alt="图片加载失败时显示的内容" title="提示信息" />
注意：
1. src设置的图片地址能够是本地的地址也能够是一个网络地址；
2. 图片的格式能够是png、jpg和gif；
3. alt属性的值会在图片加载失败时显示在网页上；
4. 可为图片设置宽度（width）和高度（height），不设置就显示图片默认的宽度和高度；
5. 行内块元素，与行内元素在一行内显示
6. span标签能够单独摘出某块内容，结合CSS设置相应的样式
<div class="image"> <!-- img是单闭合 --> <!-- img标签的特色：1. 可设置宽高； 2. 在一行内显示； 它是行内块标签 --> <img src="./python1.png" alt="python的图片1" style="width:300px;height: 200px"> <img src="./python2.png" alt="python的图片2" title="python图片"> </div> <!-- HTML标签有3种： 1. 块级元素（或标签 ：特色：a.独占一行 b.可设宽高（若是不设置宽度，默认为浏览器的宽度） 2. 行内元素 特色：在一行内展现，不能设置宽高 3. 行内块元素 特色：在一行内展现，可设置宽高 -->
其余标签：
换行标签：<br> （单闭合）
分割线：<hr> （单闭合），<hr>标签用来在HTML页面建立水平分隔线，一般用来分隔内容
特殊符号： 浏览器在显示的时候会移除源代码中多余的空格和空行，全部连续的空格或空行（或换行）都会被算做一个空格；
想要输入空格，须要用特殊符号： （&bnsp加分号）
HTML特殊符号对照表： http://tool.chinaz.com/Tools/HtmlChar.aspx
表格标签：<table> </table> （块级元素）
表格由<table>标签来定义；每一个表格由表格头（用<thead>定义）、表格主题（用<tbody>来定义）和表格底部（由<tfoot>来定义）组成；表格头、表格主题和表格底部均有若干行（表格行，由<tr>来定义）；表格头里的单元格用<th> 来定义（默认加粗、居中），表格主题和表格底部里的单元格用 <td> 来定义（<td>指表格数据 table data）。
数据单元格能够包含文本、图片、列表、段落、表单、水平线、表格等等
以下代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>表格内容</title> </head> <body> <!-- 表格 --> <!-- border="1" 表示显示表格的边框； cellspacing="0" 表示取消单元格的间隙 --> <table border="1" cellspacing="0"> <!-- 表格头；表格头中须要有表格行<tr>,而且表格头中的单元格要用 <th> 来表示 --> <thead> <!-- 一对 <tr></tr>就表示一行（表格行） --> <tr> <!-- 一对<th></th>就表示表格头中的一个单元格 --> <th></th> <th>星期一</th> <th>星期二</th> <th>星期三</th> <th>星期四</th> <th>星期五</th> </tr> </thead> <tbody> <tr> <!-- 表格主题中的单元格用 <td> 定义 --> <!-- rowspan="3" 表示合并3行 --> <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> <!-- 再合并2行 --> <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> <!-- colspan="6" 表示合并6列 --> <td colspan="6">课程表</td> </tr> </tfoot> </table> </body> </html> <!-- rowspan 表示合并行 colspan 表示合并列 -->
效果以下：
表单标签：<form> （块级元素）
表单是一个包含表单元素的区域；表单元素是容许用户在表单中输入内容。好比：文本域（textarea）、输入框（input）、单选框（）；
表单的做用：用于显示、收集信息，并将信息提交给服务器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"/> <title>表单控件</title> </head> <body> <div class="form"> <!-- form标签是一个块级元素，做用是被提交 --> <!-- action 和 method是form标签的两个属性： action：定义表单提交时发生的动做，用于提交给服务端处理程序的地址 method：用于定义表单提交数据时的方式；取值有 get 和 post（默认为get） --> <!-- 下面的action表示把表单提交到百度 --> <form action="https://www.baidu.com" method="get"> <p> <!-- lable元素功能：用于关联文本与表单元素的，点击文本时如同点击表单元素同样，一般与for属性一块儿使用； for属性：表示与该lable相关联的表单控件元素的ID值； lable是行内元素 --> <label for="user">用户名：</label> <!-- 由于下面的input中有id="user"，lable中的 for="user" 就会把该lable和下面的input关联在一块儿 --> <!-- input是单闭合、行内块元素，可设置宽高 --> <!-- type="text"表示类型为文本（明文显示用户输入的数据）；name：控件的名称；placeholder="请输入用户名" 表示 输入框中默认显示“请输入用户名” --> <input type="text" name="username" id="user" placeholder="请输入用户名"> </p> <p> <label for="password">密码：</label> <!-- type="password"表示类型为password（密文显示用户输入的数据） --> <input type="password" name="password" id="password" placeholder="请输入密码"> </p> <p> <!-- 按钮功能 --> <!-- 提交form表单用 type="submit" （submit功能固定化，负责将表中的表单控件提交给服务端）， value="submit"表示让按钮上显示 submit（value控件的值：即要提交给服务器的数据） --> <!-- 点击下面的submit 会把表单提交到百度 --> <input type="submit" name="btn" value="submit"> <!-- 显示普通的按钮用 type="button"，（不具备提交功能，与form表单没有任何关系）； disable=""表示禁用该控件 --> <input type="button" name="btn" value="提交" disable=""> </p> </form> </div> </body> </html>
浏览器效果以下：
点击submit以后会转到百度，name属性在URL标黄的部分：
input 的属性： radio（单选）、 checkbox（多选） file（文件）；
textarea（文本域的标签；双闭合）的做用：容许用户写入多行内容到表单控件中；属性：cols和rows；
select（列表的标签；双闭合），代码以下：
<!DOCTYPE html> <html lang="en"> <head> <title>input控件</title> </head> <body> <div class="form"> <form action="https://www.baidu.com" method="get"> <!-- 单选框：radio --> <p> 用户性别： <!-- type="radio"表示单选；checked=""表示该选项会被默认选中 --> <input type="radio" name="sex" value="男" checked="">男 <!-- 想要单选框产生互斥的效果，则须要name的值相同 --> <input type="radio" name="sex" value="女">女 </p> <p> <!-- 多选框：checkbox --> 用户的爱好： <!-- checked=""表示默认选中 --> <input type="checkbox" name="checkhobby" value="吃" checked="">吃 <input type="checkbox" name="checkhobby" value="喝">喝 <input type="checkbox" name="checkhobby" value="玩">玩 <input type="checkbox" name="checkhobby" value="乐">乐 </p> <p> 请上传文件： <!-- 若是文件须要提交给服务器，method必须为post，enctype必须为 multipart/form-data --> <input type="file" name="file"> </p> <p> <!-- 文本域 textarea 双闭合 --> 自我介绍： <!-- cols设置列数，rows设置行数；placeholder设置文本域内的背景内容（当你输入本身的内容后背景内容就会自动消失）； <textarea></testarea>内的内容也会显示在文本中，但输入本身内容前须要手动删除此内容（优先级高于placeholder） --> <textarea cols="20" rows="5" name="txt" placeholder="请作自我介绍111">请作自我介绍2</textarea> </p> <p> <!-- 下拉列表select； select 一般和 option 一块儿使用 --> 籍贯： <select name="selOne"> <option value="深圳">深圳</option> <option value="北京">北京</option> <!-- selected表示预选；若是不设置selected属性，那么选项框中的第一项默认被选中 --> <option value="上海" selected>上海</option> <option value="广州">广州</option> </select> </p> <p> 意向工做省份： <!-- 滚动列表 multiple设置后可实现多选效果（ctrl+鼠标左键进行多选） --> <!-- size取值大于1（size表示浏览器显示几个选项），则为滚动列表；不然为下拉列表 --> <select name="selMulti" size="2" multiple=""> <option value="北京">北京</option> <option value="天津">天津</option> <option value="广东" selected="">广东</option> <option value="上海">上海</option> <option value="江苏">江苏</option> <option value="浙江">浙江</option> </select> </p> <p> <!-- 重置按钮 reset 点击重置按钮会把输入的内容所有清空 --> <input type="reset" name=""> <input type="submit" name="btn" value="submit"> </p> </form> </div> </body> </html>
浏览器效果以下：
补充：form标签的enctype属性，以下：
HTML标签属性和分类：
HTML标签能够设置属性，属性通常以键值对的方式在开始标签中，如：
<div id="i1">这是一个div标签</div> <p class='p1 p2 p3'>这是一个段落标签</p> <a href="http://www.luffycity.com">这是一个连接</a> <input type='button' onclick='addclick()'></input>
属性设置的意义：因为最终咱们会把这些标签经过CSS去美化，经过JavaScript来操做，那么这些标签咱们能够当作是一个对象，对象就应该有它本身的属性和方法
标签属性的注意事项：
1.HTML标签除一些特定属性外能够设置自定义属性，一个标签能够设置多个属性，用空格分隔，多个属性不区分前后顺序；
2.属性值要用引号包裹起来，一般使用双引号，也能够单引号；
3.属性和属性值不区分大小写，但推荐使用小写
标签分类：
HTML中标签元素三种不一样类型：块状元素，行内元素，行内块状元素。
经常使用的块状元素：
<div> <p> <h1>~<h6> <ol> <ul> <table><form> <li>
经常使用的行内元素：
<a> <span> <br> <i> <em> <strong> <label>
经常使用的行内块状元素：
<img> <input>
块级元素特色：display:block;
一、每一个块级元素都重新的一行开始，而且其后的元素也另起一行。独占一行
二、元素的高度、宽度、行高以及顶和底边距均可设置。
三、元素宽度在不设置的状况下，是它自己父容器的100%（和父元素的宽度一致），除非设定一个宽度。
行内元素特色：display:inline;
一、和其余元素都在一行上；
二、元素的高度、宽度及顶部和底部边距不可设置；
三、元素的宽度就是它包含的文字或图片的宽度，不可改变。
行内块状元素的特色：display:inline-block;
一、和其余元素都在一行上；
二、元素的高度、宽度、行高以及顶和底边距均可设置
注意：咱们能够经过display属性对块级元素、行内元素、行内块元素进行转换，为后面页面布局作好准备
标签嵌套规则：
1. 块元素能够包含内联元素或某些块元素，但内联元素却不能包含块元素，它只能包含其它的内联元素；
2. div元素不能放在p标签里面；
3. 有几个特殊的块级元素只能包含内嵌元素，不能再包含块级元素，这几个特殊的标签是： h1~h6,p；
4. li元素里面能够嵌入ul,ol,div等标签
- 1. 前端开发—HTML
- 2. html前端开发概述
- 3. 前端开发之HTML+CSS
- 4. 学习html前端开发
- 5. 前端开发：HTML-布局
- 6. 前端开发：HTML-列表
- 7. 前端开发-HTML 框架
- 8. Python开发【前端】：HTML
- 9. 前端开发面试题-HTML（转载）
- 10. JS+CSS+HTML 前端开发(八)
- 更多相关文章...
- • WSDL 端口 - WSDL 教程
- • HTML 指南 - 网站建设指南
- • PHP开发工具
- • 使用阿里云OSS+CDN部署前端页面与加速静态资源
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 融合阿里云，牛客助您找到心仪好工作
- 2. 解决jdbc(jdbctemplate)在测试类时不报错在TomCatb部署后报错
- 3. 解决PyCharm GoLand IntelliJ 等 JetBrains 系列 IDE无法输入中文
- 4. vue+ant design中关于图片请求不显示的问题。
- 5. insufficient memory && Native memory allocation (malloc) failed
- 6. 解决IDEA用Maven创建的Web工程不能创建Java Class文件的问题
- 7. [已解决] Error: Cannot download ‘https://start.spring.io/starter.zip?
- 8. 在idea让java文件夹正常使用
- 9. Eclipse启动提示“subversive connector discovery”
- 10. 帅某-技巧-快速转帖博主文章（article_content）
- 1. 前端开发—HTML
- 2. html前端开发概述
- 3. 前端开发之HTML+CSS
- 4. 学习html前端开发
- 5. 前端开发：HTML-布局
- 6. 前端开发：HTML-列表
- 7. 前端开发-HTML 框架
- 8. Python开发【前端】：HTML
- 9. 前端开发面试题-HTML（转载）
- 10. JS+CSS+HTML 前端开发(八)