Html和CSS的关系：
- HTML是网页内容的载体（骨骼），CSS样式是表现（肌肉皮肤）
- Javascript是用来实现网页上的特效效果（动作行为）
基本结构和常见标签：
--- 文档声明，表示是html5
--- html标签包裹网页的主体，根标签
--- html的头部，可包含title、script、style、link、meta等标签
标题<title> --- 网页的标题
</head>
<body> --- 文档的主体
<p>段落标签</p>
<h1>一级标题，最大最重要</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题，最小最不重要</h6>
<strong>强调作用，粗体</strong>
<em>强调作用，斜体</em>
>无任何语义的标签
<q>引用标签，引用别人的一句话</q>
<blockquote>引用别人的一整段话，长引用</blockquote>
<br> --- 换行
--- 会被解析为空格符号
<hr> --- 水平分割线
<address>常用来描述地址</adress>
<code>用来描述代码</code>
<pre>用来包裹code标签，让里面的代码格式按照编辑时的位置排列</pre>
<ul> --- 无序列表
<li>列表中的项</li>
<li>列表中的项</li>
</ul>
<ol> --- 有序列表
<li>列表中的项</li>
<li>列表中的项</li>
</ol>
<div>无语言的块状盒子</div>
<table> --- 表格
<caption>表格的描述性文字，标题</caption>
<tr> --- 表格中的一行
<th>表格中的表头，黑体</th>
<th>表格中的表头</th>
</tr>
<tr> --- 表格中的一行
<td>表格中的单元格</td>
<td>表格中的单元格</td>
</tr>
<table>
<a target="_blank">链接，blank属性表示在新窗口打开</a>
<a href="mailto:yy@imooc.com?subject=观了不起的盖茨比有感&body=你好，对此评论有些想法">发送邮件</a>
<img src="" title=""> --- 图片标签
<form method="post" action="save.php"> --- 表单标签
<input type="text" name="myName"> --- text文本输入框
<input type="password" name="pass"> --- 输入框，带星号
<textarea rows="行数" cols="列数">多行输入</textarea>
<input type="radio" value="值" name="名称" checked="checked"/> --- 单选按钮
<input type="checkbox" value="值" name="名称" checked="checked"/> --- 多行按钮
<select multiple="multiple"> --- 下拉列表
<option value="值">选择项的值</option>
</select>
<input type="submit" value="提交"> --- 提交按钮
<input type="reset" value="重置"> --- 重置按钮
<label for="控件id名称">描述input的文字</label>
</form>
</body>
</html>
</pre>
CSS
<p>CSS全称为“层叠样式表 (Cascading Style Sheets)”，它主要是用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等。</p>
<p>语法和常见用法：</p>
<pre class="language-css"><code class="prism language-css">
<sty1e>
p { --- p表示选择器，即选择p标签
font-size:12px; --- 属性和属性值，字号大小
color:red; --- 颜色
font-family:"宋体"; --- 字体
font-weight:bold; --- 粗细
font-style:italic; --- 字体样式
text-decoration:underline; --- 下划线
text-decoration:line-through; --- 删除线
text-indent:2em; --- 缩进
line-height:2em; --- 行间距
letter-spacing:50px; --- 中文字间隔、字母间隔
word-spacing:50px; --- 单词间隔
text-align:center; --- 对齐方式
}
</style>
<p style="color:red">这里文字是红色。</p> --- 内联样式表
<link href="base.css" rel="stylesheet" type="text/css" /> --- 外部样式表
</pre>
<p>选择器：</p>
<ul><li>标签选择器：p、div、h1、h6</li>
<li>类选择器： -> .cls{}</li>
<li>ID选择器： -> #no1{}</li>
<li>子代选择器：ul>li {}，选择 ul 中的 li 标签</li>
<li>后代选择器：div div {}，选择 div 中的 div，但是不一定是父子关系</li>
<li>通用选择器：* {}，选择所以标签元素</li>
<li>伪类选择器：a:hover {}，用冒号表示</li>
<li>分组选择器：h1,div {}，用逗号表示</li>
</ul><p>具有继承性、层叠性，有权重的问题：<strong>标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100。</strong></p>
<pre class="language-css"><code class="prism language-css">p{color:red;}
p span{color:green;}
.warning{color:white;}
p span.warning{color:purple;}
#footer .note p{color:yellow;}
</pre>
元素
<p>元素分类：</p>
<ul><li>块级元素：
<ul><li>每个块级元素都从新的一行开始，并且其后的元素也另起一行；</li>
<li>元素的高度、宽度、行高以及顶和底边距都可设置；</li>
<li>元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度</li>
<li>、 <p>、、<form>、<ul> 和 <li>就是块级元素</li>
</ul></li>
<li>内联元素:
<ul><li>和其他元素都在一行上</li>
<li>元素的高度、宽度及顶部和底部边距不可设置</li>
<li>元素的宽度就是它包含的文字或图片的宽度，不可改变</li>
<li>、、<label>、 <strong> 和就是典型的内联元素</li>
</ul></li>
<li>内联块状元素:
<ul><li>和其他元素都在一行上</li>
<li>元素的高度、宽度、行高以及顶和底边距都可设置</li>
<li>、<input>标签就是这种内联块状标签</li>
</ul></li>
</ul><p>盒模型：每个元素可以看成是一个盒子，这个盒子从里到外，分别对应着不同的内容，内容content -> 内边距（内容到边框的距离） -> 边框 -> 外边距（距离相邻盒子边界的距离）</p>
<pre class="language-css"><code class="prism language-css">div{border:2px solid red;} --- 边框
div{border-bottom:1px solid red;} --- 边框
div{padding:20px 10px 15px 30px;} --- 内边距
div{margin:20px 10px 15px 30px;} --- 外边距
</pre>
布局
<p>布局模型：</p>
<ul><li>流动模型：从上到下依次放盒子</li>
<li>浮动模型：浮动盒子会影响他下面盒子的摆放，关键词float</li>
<li>层模型：
<ul><li>绝对定位，相对于有定位的父盒子的位置position:absolute;</li>
<li>相对定位，相对自己的位置定位position:relative;</li>
<li>固定定位：相对浏览器的位置定位position:fixed;</li>
</ul></li>
</ul><p>居中：</p>
<pre class="language-css"><code class="prism language-css">.txtCenter{
text-align:center;
}
margin-left:auto;
margin-right:auto;
position:relative;
left:-50%;
height:100px;
line-height:100px;
</pre></div>
</div>
<div style="clear: both;"></div>
<div class="author-info fl">
<div><span class="gray">转载请注明：</span>文章转载自 <a href="https://www.mshxw.com/" class="blue">www.mshxw.com</a></div>
<div><span class="gray">本文地址：</span><a href="https://www.mshxw.com/it/242164.html" class="blue">https://www.mshxw.com/it/242164.html</a></div>
</div>
<div class="prev fl">
<p> <a style='text-align:left;' class='center-block text-center glyphicon glyphicon-collapse-down' href="https://www.mshxw.com/it/242165.html">上一篇 新技术新框架不断涌现，目前学习web前端开发都要掌握什么？</a>
</p>
<p> <a style='text-align:left;' class='center-block text-center glyphicon glyphicon-collapse-down' href="https://www.mshxw.com/it/242123.html">下一篇 前端工程师到底需要掌握哪些技能？有何晋升？</a>
</p>
</div>
<div class="new_tag fl">
</div>
</div>
<div class="new_r fr" style="border-radius:10px;">
<div class="tui fl">
<h3>CSS教程相关栏目本月热门文章</h3>
<ul>
<li><span>1</span><a href="https://www.mshxw.com/it/1041277.html" title="【Linux驱动开发】设备树详解（二）设备树语法详解">【Linux驱动开发】设备树详解（二）设备树语法详解</a></li>
<li><span>2</span><a href="https://www.mshxw.com/it/1041273.html" title="别跟客户扯细节">别跟客户扯细节</a></li>
<li><span>3</span><a href="https://www.mshxw.com/it/1041266.html" title="Springboot+RabbitMQ+ACK机制(生产方确认(全局、局部)、消费方确认)、知识盲区">Springboot+RabbitMQ+ACK机制(生产方确认(全局、局部)、消费方确认)、知识盲区</a></li>
<li><span>4</span><a href="https://www.mshxw.com/it/1041261.html" title="【Java】对象处理流（ObjectOutputStream和ObjectInputStream）">【Java】对象处理流（ObjectOutputStream和ObjectInputStream）</a></li>
<li><span>5</span><a href="https://www.mshxw.com/it/1041256.html" title="【分页】常见两种SpringBoot项目中分页技巧">【分页】常见两种SpringBoot项目中分页技巧</a></li>
<li><span>6</span><a href="https://www.mshxw.com/it/1041299.html" title="一文带你搞懂OAuth2.0">一文带你搞懂OAuth2.0</a></li>
<li><span>7</span><a href="https://www.mshxw.com/it/1041297.html" title="我要写整个中文互联网界最牛逼的JVM系列教程 | 「JVM与Java体系架构」章节：虚拟机与Java虚拟机介绍">我要写整个中文互联网界最牛逼的JVM系列教程 | 「JVM与Java体系架构」章节：虚拟机与Java虚拟机介绍</a></li>
<li><span>8</span><a href="https://www.mshxw.com/it/1041296.html" title="【Spring Cloud】新闻头条微服务项目：FreeMarker模板引擎实现文章静态页面生成">【Spring Cloud】新闻头条微服务项目：FreeMarker模板引擎实现文章静态页面生成</a></li>
<li><span>9</span><a href="https://www.mshxw.com/it/1041294.html" title="JavaSE - 封装、static成员和内部类">JavaSE - 封装、static成员和内部类</a></li>
<li><span>10</span><a href="https://www.mshxw.com/it/1041291.html" title="树莓派mjpg-streamer实现监控及拍照功能调试">树莓派mjpg-streamer实现监控及拍照功能调试</a></li>
<li><span>11</span><a href="https://www.mshxw.com/it/1041289.html" title="用c++写一个蓝屏代码">用c++写一个蓝屏代码</a></li>
<li><span>12</span><a href="https://www.mshxw.com/it/1041285.html" title="从JDK8源码中看ArrayList和LinkedList的区别">从JDK8源码中看ArrayList和LinkedList的区别</a></li>
<li><span>13</span><a href="https://www.mshxw.com/it/1041281.html" title="idea 1、报错java: 找不到符号 符号: 变量 log 2、转换成Maven项目">idea 1、报错java: 找不到符号 符号: 变量 log 2、转换成Maven项目</a></li>
<li><span>14</span><a href="https://www.mshxw.com/it/1041282.html" title="在openwrt使用C语言增加ubus接口（包含C uci操作）">在openwrt使用C语言增加ubus接口（包含C uci操作）</a></li>
<li><span>15</span><a href="https://www.mshxw.com/it/1041278.html" title="Spring 解决循环依赖">Spring 解决循环依赖</a></li>
<li><span>16</span><a href="https://www.mshxw.com/it/1041275.html" title="SpringMVC——基于MVC架构的Spring框架">SpringMVC——基于MVC架构的Spring框架</a></li>
<li><span>17</span><a href="https://www.mshxw.com/it/1041272.html" title="Andy‘s First Dictionary C++ STL set应用">Andy‘s First Dictionary C++ STL set应用</a></li>
<li><span>18</span><a href="https://www.mshxw.com/it/1041271.html" title="动态内存管理">动态内存管理</a></li>
<li><span>19</span><a href="https://www.mshxw.com/it/1041270.html" title="我的创作纪念日">我的创作纪念日</a></li>
<li><span>20</span><a href="https://www.mshxw.com/it/1041269.html" title="Docker自定义镜像-Dockerfile">Docker自定义镜像-Dockerfile</a></li>
</ul>
</div>
</div>
</div>
<!-- 公共尾部 -->
<div class="link main">
<div class="link_tit">
<span class="on">热门相关搜索</span>
</div>
<div class="link_tab">
<div class="link_con">
<a href="http://www.mshxw.com/TAG_1/luyouqishezhi.html">路由器设置</a>
<a href="http://www.mshxw.com/TAG_1/mutuopan.html">木托盘</a>
<a href="http://www.mshxw.com/TAG_1/baotamianban.html">宝塔面板</a>
<a href="http://www.mshxw.com/TAG_1/shaoerpython.html">儿童python教程</a>
<a href="http://www.mshxw.com/TAG_1/xinqingdiluo.html">心情低落</a>
<a href="http://www.mshxw.com/TAG_1/pengyouquan.html">朋友圈</a>
<a href="http://www.mshxw.com/TAG_1/vim.html">vim</a>
<a href="http://www.mshxw.com/TAG_1/shuangyiliuxueke.html">双一流学科</a>
<a href="http://www.mshxw.com/TAG_1/zhuanshengben.html">专升本</a>
<a href="http://www.mshxw.com/TAG_1/wodexuexiao.html">我的学校</a>
<a href="http://www.mshxw.com/TAG_1/rijixuexiao.html">日记学校</a>
<a href="http://www.mshxw.com/TAG_1/xidianpeixunxuexiao.html">西点培训学校</a>
<a href="http://www.mshxw.com/TAG_1/qixiuxuexiao.html">汽修学校</a>
<a href="http://www.mshxw.com/TAG_1/qingshu.html">情书</a>
<a href="http://www.mshxw.com/TAG_1/huazhuangxuexiao.html">化妆学校</a>
<a href="http://www.mshxw.com/TAG_1/tagouwuxiao.html">塔沟武校</a>
<a href="http://www.mshxw.com/TAG_1/yixingmuban.html">异形模板</a>
<a href="http://www.mshxw.com/TAG_1/xinandaxuepaiming.html">西南大学排名</a>
<a href="http://www.mshxw.com/TAG_1/zuijingpirenshengduanju.html">最精辟人生短句</a>
<a href="http://www.mshxw.com/TAG_1/6bujiaonizhuihuibeipian.html">6步教你追回被骗的钱</a>
<a href="http://www.mshxw.com/TAG_1/nanchangdaxue985.html">南昌大学排名</a>
<a href="http://www.mshxw.com/TAG_1/qingchaoshierdi.html">清朝十二帝</a>
<a href="http://www.mshxw.com/TAG_1/beijingyinshuaxueyuanpaiming.html">北京印刷学院排名</a>
<a href="http://www.mshxw.com/TAG_1/beifanggongyedaxuepaiming.html">北方工业大学排名</a>
<a href="http://www.mshxw.com/TAG_1/beijinghangkonghangtiandaxuepaiming.html">北京航空航天大学排名</a>
<a href="http://www.mshxw.com/TAG_1/shoudoujingjimaoyidaxuepaiming.html">首都经济贸易大学排名</a>
<a href="http://www.mshxw.com/TAG_1/zhongguochuanmeidaxuepaiming.html">中国传媒大学排名</a>
<a href="http://www.mshxw.com/TAG_1/shoudoushifandaxuepaiming.html">首都师范大学排名</a>
<a href="http://www.mshxw.com/TAG_1/zhongguodezhidaxue(beijing)paiming.html">中国地质大学(北京)排名</a>
<a href="http://www.mshxw.com/TAG_1/beijingxinxikejidaxuepaiming.html">北京信息科技大学排名</a>
<a href="http://www.mshxw.com/TAG_1/zhongyangminzudaxuepaiming.html">中央民族大学排名</a>
<a href="http://www.mshxw.com/TAG_1/beijingwudaoxueyuanpaiming.html">北京舞蹈学院排名</a>
<a href="http://www.mshxw.com/TAG_1/beijingdianyingxueyuanpaiming.html">北京电影学院排名</a>
<a href="http://www.mshxw.com/TAG_1/zhongguohuquxueyuanpaiming.html">中国戏曲学院排名</a>
<a href="http://www.mshxw.com/TAG_1/hebeizhengfazhiyexueyuanpaiming.html">河北政法职业学院排名</a>
<a href="http://www.mshxw.com/TAG_1/hebeijingmaodaxuepaiming.html">河北经贸大学排名</a>
<a href="http://www.mshxw.com/TAG_1/tianjinzhongdeyingyongjishudaxuepaiming.html">天津中德应用技术大学排名</a>
<a href="http://www.mshxw.com/TAG_1/tianjinyixuegaodengzhuankexuejiaopaiming.html">天津医学高等专科学校排名</a>
<a href="http://www.mshxw.com/TAG_1/tianjinmeishuxueyuanpaiming.html">天津美术学院排名</a>
<a href="http://www.mshxw.com/TAG_1/tianjinyinlexueyuanpaiming.html">天津音乐学院排名</a>
<a href="http://www.mshxw.com/TAG_1/tianjingongyedaxuepaiming.html">天津工业大学排名</a>
<a href="http://www.mshxw.com/TAG_1/beijinggongyedaxuegengdanxueyuanpaiming.html">北京工业大学耿丹学院排名</a>
<a href="http://www.mshxw.com/TAG_1/beijingjingchaxueyuanpaiming.html">北京警察学院排名</a>
<a href="http://www.mshxw.com/TAG_1/tianjinkejidaxuepaiming.html">天津科技大学排名</a>
<a href="http://www.mshxw.com/TAG_1/beijingyoudiandaxue(hongfujiaoou)paiming.html">北京邮电大学(宏福校区)排名</a>
<a href="http://www.mshxw.com/TAG_1/beijingwanglaozhiyexueyuanpaiming.html">北京网络职业学院排名</a>
<a href="http://www.mshxw.com/TAG_1/beijingdaxueyixuebupaiming.html">北京大学医学部排名</a>
<a href="http://www.mshxw.com/TAG_1/hebeikejidaxuepaiming.html">河北科技大学排名</a>
<a href="http://www.mshxw.com/TAG_1/hebeidezhidaxuepaiming.html">河北地质大学排名</a>
<a href="http://www.mshxw.com/TAG_1/hebeitiyoxueyuanpaiming.html">河北体育学院排名</a>
</div>
</div>
</div>
<div class="footer">
<div class="dl_con">
<div class="width1200">
<dl>
<dt>学习工具</dt>
<dd><a href="https://www.mshxw.com/tools/algebra/" title="代数计算器">代数计算器</a></dd>
<dd><a href="https://www.mshxw.com/tools/trigonometry/" title="三角函数计算器">三角函数</a></dd>
<dd><a href="https://www.mshxw.com/tools/analytical/" title="解析几何">解析几何</a></dd>
<dd><a href="https://www.mshxw.com/tools/solidgeometry/" title="立体几何">立体几何</a></dd>
</dl>
<dl>
<dt>知识解答</dt>
<dd><a href="https://www.mshxw.com/ask/1033/" title="教育知识">教育知识</a></dd>
<dd><a href="https://www.mshxw.com/ask/1180/" title="百科知识">百科知识</a></dd>
<dd><a href="https://www.mshxw.com/ask/1155/" title="生活知识">生活知识</a></dd>
<dd><a class="https://www.mshxw.com/ask/1199/" title="常识知识">常识知识</a></dd>
</dl>
<dl>
<dt>写作必备</dt>
<dd><a href="https://www.mshxw.com/zuowen/1128/" title="作文大全">作文大全</a></dd>
<dd><a href="https://www.mshxw.com/zuowen/1130/" title="作文素材">作文素材</a></dd>
<dd><a href="https://www.mshxw.com/zuowen/1132/" title="句子大全">句子大全</a></dd>
<dd><a href="https://www.mshxw.com/zuowen/1154/" title="实用范文">实用范文</a></dd>
</dl>
<dl class="mr0">
<dt>关于我们</dt>
<dd><a href="https://www.mshxw.com/about/index.html" title="关于我们" rel="nofollow">关于我们</a></dd>
<dd><a href="https://www.mshxw.com/about/contact.html" title="联系我们" rel="nofollow">联系我们</a></dd>
<dd><a href="https://www.mshxw.com/sitemap/" title="网站地图">网站地图</a></dd>
</dl>
<div class="dl_ewm">
<div class="wx"> <img src="https://www.mshxw.com/skin/sinaskin//kaotop/picture/gzh.jpg" alt="交流群">
<p>名师互学网交流群</p>
</div>
<div class="wx"><img src="https://www.mshxw.com/skin/sinaskin//kaotop/picture/weixin.jpg" alt="名师互学网客服">
<p>名师互学网客服</p>
</div>
</div>
</div>
</div>
<div class="copyright">
<p>名师互学网 版权所有 (c)2021-2022 ICP备案号：<a href="https://beian.miit.gov.cn" rel="nofollow">晋ICP备2021003244-6号</a>
</p>
</div>
</div>
<!-- 手机端 -->
<div class="m_foot_top">
<img src="https://www.mshxw.com/foot.gif" width="192" height="27" alt="我们一直用心在做"><br/>
<a href="https://www.mshxw.com/about/index.html">关于我们</a>
<a href="https://www.mshxw.com/archiver/">文章归档</a>
<a href="https://www.mshxw.com/sitemap">网站地图</a>
<a href="https://www.mshxw.com/about/contact.html">联系我们</a>
<p>版权所有 (c)2021-2022 MSHXW.COM</p>
<p>ICP备案号：<a href="https://beian.miit.gov.cn/" rel="nofollow">晋ICP备2021003244-6号</a></p>
</div>
<div class="to_top" style="display:none;"><img src="https://www.mshxw.com/skin/sinaskin//kaotop/picture/to_top.png"></div>
<!--广告!-->
<script type="text/javascript" src="https://www.mshxw.com/skin/sinaskin//kaotop/js/top.js"></script>
<script src="https://www.mshxw.com/skin/sinaskin//kaotop/js/fixed.js" type="text/javascript"></script>
<!--头条搜索!-->
<script>
(function(){
var el = document.createElement("script");
el.src = "https://lf1-cdn-tos.bytegoofy.com/goofy/ttzz/push.js?018f42187355ee18d1bfcee0487fc91a76ac6319beb05b7dc943033ed22c446d3d72cd14f8a76432df3935ab77ec54f830517b3cb210f7fd334f50ccb772134a";
el.id = "ttzz";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(el, s);
})(window)
</script>
<!--头条搜索结束!-->
<script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?e05fec1c87ee5ca07f1ce57d093866c4";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
</div>
</div>
<script type="text/javascript">
$(".alert_kf").click(function() {
mantis.requestChat();
});
</script>
<script type="text/javascript">
var mySwiper_weixin = new Swiper('.pc_swiper_weixin', {
autoplay: 3000, //可选选项，自动滑动
loop: true,
speed: 1000,
pagination: '.swiper-pagination',
paginationClickable: true,
})
</script>
<script type="text/javascript">
$(function() {
$(window).scroll(function() {
if ($(window).scrollTop() > 100) {
$(".to_top").fadeIn(1000);
} else {
$(".to_top").fadeOut(1000);
}
});
$(".to_top").click(function() {
if ($('html').scrollTop()) {
$('html').animate({
scrollTop: 0
}, 300);
return false;
}
$('body').animate({
scrollTop: 0
}, 300);
return false;
});
});
</script>
</body>
</html>