每日一记
html基本结构
<html>
<head>
<title>标题</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
例子解释
<html> 与 </html> 之间的文本描述网页
<head> 与 </head> 之间的文本是网页的头信息
<title> 与 </title> 之间的文本是网页的标题
<body> 与 </body> 之间的文本是可见的页面内容
<h1> 与 </h1> 之间的文本被显示为标题
<p> 与 </p> 之间的文本被显示为段落
注释：
<html>
<head>
<title>Title of page</title>
</head>
<body>
<!– 注释的内容 -->
This is my first homepage.
</body>
</html>
下面是html的一些标签以及一些属性：
<html>
<head>
</head>
<body bgcolor="#ffe4c4" id="bo">
<!-- 标题 -->
<!--<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>-->
<!-- 段落 -->
<!-- <p> 南有苏大强，北有谢广坤,南有苏大强，北有谢广坤南有苏大强</p>
<p>啊，在苍茫的大海上，</br>狂风卷积着乌云</p>-->
<!--换行-->
<!--</br>-->
<!--空格 -->
<!--<label for="inp">用户名：</label>
<input id="inp"/>-->
<!--横线-->
<!-- <hr/>-->
<!--图片-->
<!--<img src="HeadAttack0.gif"/>-->
<!--<table border="1" cellspacing="0">
<tr>
<td colspan="4">网上嫌疑犯通缉人员名单</td>
</tr>
<tr>
<td>姓名</td>
<td>照片</td>
<td>年龄</td>
<td>性别</td>
</tr>
<tr>
<td>张三</td>
<td><img src="HeadAttack0.gif" width="30" height="30"/></td>
<td>20</td>
<td>男</td>
</tr>
<tr>
<td>李四</td>
<td><img src="HeadAttack0.gif" width="30" height="30"/></td>
<td>21</td>
<td>男</td>
</tr>
<tr>
<td>王五</td>
<td><img src="HeadAttack0.gif" width="30" height="30"/></td>
<td>60</td>
<td>女</td>
</tr>
</table>-->
<!--超链接-->
<!--<a href="https://baidu.com">百度一下</a>-->
<!--列表，逗点-->
<!-- <ul>
<li>人口管理</li>
<li>社区管理</li>
<li>农田管理</li>
<li>党员管理</li>
</ul>-->
<!--input系列-->
<!--<input type="submit" value="点我一下">
<input type="text" placeholder="请输入内容">
<input type="hidden" >
<input type="file">-->
<!--<input type="checkbox" name="cb" checked>python测试工程师
<input type="checkbox" name="cb">python web开发
<input type="checkbox" name="cb">python爬虫工程师
<input type="checkbox" name="cb">人工智能-->
<!--<input type="button" value="点我一下">-->
<!--<input type="password">-->
<!--<input type="radio" name="ra" checked>男
<input type="radio" name="ra">女
<input type="radio" name="ra">未知-->
<!--<input type="date">-->
<!--<input type="color" value="" id="inp">-->
<!--<input type="tel">-->
<!--<form action="second.html">-->
<!--<input type="text" placeholder="请输入内容">-->
<!--<input type="submit" value="点我">-->
<!--</form>-->
<!--<a href="second.html?id=njbjb">second.html</a>-->
<div></div>
</body>
</html>
下面是用css+div做一个简单网页布局
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body style="width: 100%;height: 100%">
<div style="background-color: bisque;width: 1440px;height: 900px">
<div style="background-color: #ff0000;width: 1440px;height: 120px">
<h1 style="text-align:center">基于sk-learn房价预测系统</h1>
</div>
<div style="background-color: #00ff00;width: 1440px;height: 780px">
<div style="background-color: #999999;width: 200px;height: 780px ;float: left;">
<ul>
<li><a href="#">数据采集</a></li>
<li><a href="#">数据分析与处理</a></li>
<li><a href="#">模型建立</a></li>
<li><a href="#">房价预测</a></li>
</ul>
</div>
<div style="background-color: #ffffff;width: 1240px;height: 780px;float: left;">
</div>
</div>
</div>
</body>
</html>
显示结果如下：
CSS：
CSS（Cascading Style Sheet）的中文译名是层叠样式表。CSS用于控制网页元素的外观，CSS提供了丰富的样式表现功能，如字体、段落、颜色、背景、布局等。使用DIV+CSS的布局方式改变了传统html+table的布局方式。
DIV+CSS的布局方法简单来说就是使用div标签作为容器，使用CSS技术来排布div标签的布局方法。
选择器：
选择器是CSS语法中最重要最基本的概念。使用选择器可以指定XHTML文档中特定标签应用CSS样式。选择器有许多类型，包括标签选择器、类选择器、ID选择器、全局选择器、组合选择器、继承选择器和伪类等。
标签选择器：
一个XHTML文档中有许多标签，例如p标签，h1标签等。若要使文档中的所有p标签都使用同一个CSS样式，就应使用标签选择器。下图为标签选择器的结构。
类选择器：
使用标签选择器可以为整个XHTML文档中的同一个标签指定相同的CSS样式。但是在实际运用中，XHTML文档中的同一个标签会被反复使用。若要为相同的标签赋予不同的CSS样式就应使用类选择器。下图为类选择器的结构。类选择器前面需要加. 。
ID选择器：
ID选择器和类选择器相似，不同的是，ID选择器不能复用。在一个XHTML文档中，一个ID选择器只能把其CSS样式指定给一个标签。下图为ID选择器的结构。ID选择器前面需要加# 。
全局选择器：
全局选择器是一个星号。它能作用于XHTML文档中的所有元素，即用全局选择器声明的CSS 样式可以应用于整个XHTML文档的任何标签。下图为全局选择器的结构。全局选择器前面要加* 。
组合选择器：
标签选择器、类选择器和ID选择器是可以组合起来使用的。一般的组合方式是标签选择器和类选择器组合，标签选择器和ID选择器组合。由于这两种组合方式的原理和效果一样，所以只介绍标签选择器和类选择器的组合。组合选择器只是一种组合形式，并不算是一种真正的选择器，但在实际中经常使用。
继承选择器：
学习使用继承选择器就必须先了解文档树和CSS的继承。每个XHTML都可以被看作一个文档树，文档树的根部就是html标签，而head和body标签就是其子元素。在head和body里的其他标签就是html标签的孙子元素。整个XHTML就呈现一种祖先和子孙的树状关系。CSS的继承是指子孙元素继承祖先元素的某些属性。
1．文档树
2．CSS的继承
3．继承选择器
伪类：
伪类也是选择器的一种，但是用伪类定义的CSS样式并不是作用在标签上的，伪类作用在标签的状态上。由于很多浏览器支持不同类型的伪类，没有一个统一的标准，所以很多伪类都不常被用到。但是有一组伪类是主流浏览器都支持的，就是超链接的伪类，包括:link、:active、vistited和:hover。
声明：
声明是构成CSS语句的一部分，声明写在选择器之后。CSS的声明写在一对大括号中，其中包含CSS的属性和值。声明的写法有明确的规则，若不遵守声明的规则，则可能导致CSS样式失效。以下为CSS声明的规则：
声明中属性和值之间用冒号隔开；
声明中可以包含多个属性；
使用多重声明时，每个声明用分号隔开；
声明的大括号必须书写完整。
多重声明：
多重声明是指在对同一个选择器设置属性时，可以把所有属性写在同一选择器中，而不需要分开书写。
如： h1{color:blue;font-size:24px;font-weight:bold;}
集体声明：
集体声明是指若样式表中有多个选择器使用相同的属性设置，这些选择器可以并列写在一起。设置好网页中某个元素的CSS样式后，另外一个元素也要应用相同的样式。
如：.one,#two,p{color:red;}
CSS的层叠原理
CSS的全称为Cascading Style Sheets，中文翻译为层叠样式表。学习CSS的层叠（cascading）是深入学习CSS原理的基础。当出现多个样式共同作用于某个页面元素时，就需要决定哪一个会被应用。CSS的层叠就是一个决定CSS样式优先级的规则。
CSS样式来源
在之前的实例中，每个XHTML文档的外观都是由CSS样式表控制的。实际上除了网页设计师制作的CSS样式表外，还有其他样式表影响着网页文档的外观。在浏览器上运行的网页文档受以下三个CSS样式表控制外观：
浏览器的默认样式
用户自定义的样式
网页作者制作的样式
选择器的优先级
由于CSS的某些属性有继承性，一个页面元素往往应用了多个选择器定义的CSS样式。CSS的选择器具有优先级，用于决定哪个选择器定义的样式最终被应用到页面元素上。选择器的优先级可以简单由高到低排列如下：
!important 最高
inline style
id selector
class selector
element selector
- universal selector
<style type="text/css">
p {font-size:22px;}
.name {font-size:22px;}
#idname {font-size:30px;}
</style>
</head>
<body>
<p>上海<span class="name" id="idname">理工</span>大学</p>
</body>
!important语句：
CSS2.0中使用重要规则提升声明中某个属性设置的优先级。重要规则就是!important语句。在声明的属性设置中使用了!important语句，其优先级最高。
如：p{font-size:24px !important;}
p{font-size:30px;}
顺序优先级
当出现多个相同的选择器设置相同的属性时，后定义的选择器优先级较高。
如：p{font-size:24px;}
p{font-size:30px;}
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--<link href="style.css" rel="stylesheet">-->
<style>
/*p{
color: red;
font-size: 50px;
font-family: 华文隶书;
}*/
/*#p1{
color: red;
font-size: 50px;
font-family: 华文隶书;
}*/
p.pc2{
font-size: 50px;
color: red;
}
ul li.cli{
color: lime;
}
</style>
</head>
<body>
<!--style="font-size: 20px"-->
<p id="p1">北冥有鱼，其名为鲲</p>
<p id="p2" class="pc2">飞流直下三千尺</p>
<label class="pc2">疑是银河落九天</label>
<ul>
<li class="cli">老大</li>
<li>老二</li>
<li>老三</li>
<li>老四</li>
</ul>
</body>
</html>
显示如下：
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
