<!--
html CSS JavaScript
超文本标记语言 层叠样式表
结构 样式 行为
-->
<html lang="en,zh">
<!-- lang="en":告诉搜索引擎爬虫，我们的网站是关于什么的 en代表英语，大部分都用拼音代替-->
<head>
<meta charset="utf-8">
<title>页脚标签</title>
</head>
<body>
<p>life is shit!!!</p><p>life is shit!!!</p><p>life is shit!!!</p><p>life is shit!!!</p><p>life is shit!!!</p>
<!-- p标签为段落标签 -->
<h1>一级标题标签</h1>
<h2>二级标题标签</h2>
<h3>三级标题标签</h3>
<h4>四级标题标签</h4>
<h5>五级标题标签</h5>
<h6>六级标题标签</h6>
<strong>加粗标签</strong>
<em>斜体标签</em>
<del>删除标签</del>
<address>地址标签，没啥特殊作用，可以通过其他标签组合实现</address>
<div></div>
<span></span>
<!-- div可换行，span无效果，都充当容器，给页面分块；绑定操作，简化工作量 -->
<!-- 标签可以嵌套 -->
<!-- 空格和回车叫作英文分隔符，不管输入多少个都当做一个输出 -->
<!-- html编码：空格:
<符: <
>符: > -->
<br><!-- 换行标签 -->
<hr><!-- 水平线 -->
<ol type="I" start="2">
<li>123</li>
<li>abc</li>
<li>,.;</li>
</ol>
<!--
有序列表，成组出现
type=1/a/A/i/I 默认为1
reversed="reversed"用于倒序输出
start="n"从第n个开始排
应用极少
-->
<ul type="disc">
<li>123</li>
<li>abc</li>
<li>,.;</li>
</ul>
<!--
无序列表，成组出现
type=disc/square/circle 分别显示实心圆、方块、小圈
ul类似于柜子，li类似于抽屉，常应用于导航栏这种父子结构
-->
<img src="" alt="xxx" title="asdaf">
<!--
src中填的是图片资源地址，地址来源如下：
1.网上的URL
2.本地的绝对路径
3.本地的相对路径
alt="xxx"图片占位符，用于当图片地址错误时展示图片信息
title="asdaf"图片提示符，鼠标移到图片上提示图片信息
-->
<a href="http://www.baidu.com" target="_blank" >www.baidu.com</a>
<!--
1.超链接，里面的内容可以是任意的东西，比如图片
target="_blank"在新的标签页打开
2.锚点:href="#id"
3.打电话:<a href="tel:1312239****">给强哥打电话</a>在手机上单击后就会拨出号码。同样可以用于发邮件，改为mailto:
4.协议限定符：<a href="javascript:while(1){alert(‘让你手欠’)}">你点我试试啊！</a>
-->
<form method="get" action="">
<p>
username:<input type="text" name="username" value="请输入用户名">
</p>
<p>
password:<input type="password" name="password" value="请输入密码">
</p>
你们所喜欢的球星：
1.科比<input type="radio" name="star" value="kobe" checked="checked">
2.詹姆斯<input type="radio" name="star" value="james">
3.乔丹<input type="radio" name="star" value="jordan">
<!--
name用于指定范围，在相同的范围内为单选框
type="radio"为单选框
type="checkbox"为复选框
checked="checked"表示默认选中
-->
<select name="city">
<option>北京</option>
<option>上海</option>
<option>重庆</option>
</select>
<!-- 下拉菜单 -->
<input type="submit" >
</form>
<!-- 引入CSS -->
<!--
1.行间样式
在行间：div内写样式
<div style=“”></div>
2.页面级CSS
在头标签head内写
<head>
<style type="text/css">
div{
}
</style>
</head>
3.外部CSS文件
创建xxx.css文件
<head>
<link rel="stylesheet" type="text/css" href="xxx.css">
</head>
-->
<!-- 选择器 -->
<!--
1.id选择器
<div id="only">123</div>
#only{
}
一对一的关系，即每个id对应一个纸，每个值也只能有一个id。
id前使用#
2.class选择器
<div class="demo1 demo2">123</div>
<div class="demo1">234</div>
.demo1{
}
.demo2{
}
多对多的关系，即每个class可以对应多个值，每个值也可以有多个class。
class前使用.
3.标签选择器
<div>123</div>
div{
}
对所有的对应标签都有效，无论标签在哪，嵌套多少层都有效
4.通配符选择器
*{
}
*表示所有、任意，表示对所有标签都有效，包括body、html等
5.属性选择器
[class]{
}
方括号里加某个属性名，所有包含这个属性的标签都适用；也可以给方括号中的属性赋值，表示所有有这个属性值的标签都适用。
6.选择器优先级：!import > 行间样式 > id选择器 > class选择器 = 属性选择器 > 标签选择器 > 通配符选择器
优先级原理：CSS权重
!important infinity
行间样式 1000
id 100
class|属性|伪类 10
标签|伪元素 1
通配符 0
（这里的1000、100、10、1、0等都是256进制的数，切计算机中的无穷大（infinity）不同于数学中的无穷大，是可以运算的）
7.父子选择器、派生选择器
父选择器 子选择器{
}
父选择器和子选择器可以是任意的选择器，层级可以任意多个，浏览器内部选择顺序是自右向左的
8.直接子元素选择器
父选择器 > 子选择器{
}
9.并列选择器
a选择器b选择器c选择器{
}
中间不加空格
***只要写在同一行的选择器，则该行的权重值为各选择器权重值相加。
10.分组选择器
a选择器， b选择器， c选择器{
}
各种选择器共用一个代码块
-->
</body>
</html>
<!--
浏览器=shell+内核
主流浏览器： 内核：
IE trident
Firefox Gecko
Google Chrome Webkit/blink
Safari Webkit
Opera presto
-->
4690
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
