<!--
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
-->