HTML基本标签
2018-11-19 本文已影响0人
开心的小哈
HTML超文本标记语言
<meta charset="utf-8"/>gb2312 gbk
gb2312:除了繁体
gbk:包含繁体
utf-8:万国码
<!DOCTYPE html>
<html lang="en,zh">
<head>
<meta charset="utf-8"/>
<title>淘宝网,套配</title>
</head>
<body>
<!--告诉搜索引擎爬虫,我们的网站是干什么的-->
<!-- <p>this is pager</p> 段标签(单行标签)-->
<!-- <h1></h1>到h6标题文档给字体加粗-->
<!-- <strong>加粗</strong> -->
<!-- <em>斜体</em> -->
<!-- <strong><em>加粗斜体</em></strong> -->
<!-- <del style="color:#999;">$50</del>删除线 -->
<!-- <address>黑龙江大学30号教学楼</address> -->
<div style="color: #f40;">//容器
<em>斜体</em>
<del>删除线</del>
</div>
<span>哈哈哈</span>
</body>
</html>
<!DOCTYPE html>
<html lang="en,zh">
<head>
<meta charset="utf-8"/>
<title>淘宝网,套配</title>
<style type="text/css">
*{
list-style: none;
margin: 0;
padding: 0;
}
li{
margin:0 10px;
float: left;
color: #f40;
font-weight: bold;
font-size: 14px;
height: 25px;
line-height: 25px;
padding: 5px;
}
li:hover{
border-radius: 20px;
background-color: #FF4400;
color: #fff;
}
</style>
</head>
<body>
阿斯 空格
<br>换行;
<hr>线
接下来是<div>
<div style="width: 100px; height: 100px;background: #f40;">
my is brre button
</div>
喜欢看的电影
<ol type="1" reversed="reversed" start="2">
<!-- reversed 倒叙-->
<!-- start="2" 从二开始排序-->
<li>速度与激情8</li>
<li>哆啦A梦</li>
<li>复仇者联盟,无限战争</li>
</ol>
<!-- ul无须列表-->
<ul type="circle">
<li>天猫</li>
<li>聚划算</li>
<li>天猫超市</li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html lang="en,zh">
<head>
<meta charset="utf-8"/>
<title>淘宝网,套配</title>
<style type="text/css">
*{
list-style: none;
margin: 0;
padding: 0;
}
li{
margin:0 10px;
float: left;
color: #f40;
font-weight: bold;
font-size: 14px;
height: 25px;
line-height: 25px;
padding: 5px;
}
li:hover{
border-radius: 20px;
background-color: #FF4400;
color: #fff;
}
</style>
</head>
<body>
阿斯 空格
<br>换行;
<hr>线
接下来是<div>
<div style="width: 100px; height: 100px;background: #f40;">
my is brre button
</div>
喜欢看的电影
<ol type="1" reversed="reversed" start="2">
<!-- reversed 倒叙-->
<!-- start="2" 从二开始排序-->
<li>速度与激情8</li>
<li>哆啦A梦</li>
<li>复仇者联盟,无限战争</li>
</ol>
<!-- ul无须列表-->
<ul type="circle">
<li>天猫</li>
<li>聚划算</li>
<li>天猫超市</li>
</ul>
</body>
</html>
a标签
<!DOCTYPE html>
<html lang="en,zh">
<head>
</head>
<body>
<a href="http://www.baidu.com" >
<img id="dome2" src="https://timgsa.baidu.com/timg?im
age&quality=80&size=b9999_10000&sec=1542626862002&d
i=2fda7e5b4f8dc82ce20b7505b08fd609&imgtype=0&src=http%3A%2F
%2Fb-ssl.duitang.com%2Fuploads%2Fitem%
2F201706%2F04%2F20170604011431_ALNfz.jpeg"
style="width: 200px; height: 200px;"
alt="这是鹿晗"
title="我的天涯"/>
</a>
<!-- a连接 -->
<!-- 锚点 -->
<!-- 打电话 -->
<!-- 协议限定符 -->
<a href="tel:17600446278">打电话</a>
<a href="mailto:502900588@qq.com">发邮件</a>
<a href="javascript:while(1){alert('让你手欠')}">点我试试! come on! 来呀!</a>
<a href="https://www.baidu.com/" target="_blank">www.baidu.com</a>
<!-- alt图片站位图
title图片提示符 -->
<!-- 1.网上的图片
2.本地的绝对路径 c://a/b/123.jpg
3.本地的相对路径 123.jpg-->
<br>br*100
<div id="dome1" style="width: 100px; height: 100px; background-color: aqua;"></div>
br*100
<a style="display: block;position:fixed;bottom: 100px;right: 100px;border: 1px solid black;height: 50px;width: 200px;background-color: #fcc;" href="#dome1">find demo1</a>
<a style="display: block;position:fixed;bottom: 150px;right: 100px;border: 1px solid black;height: 50px;width: 200px;background-color: #fcc;"" href="#dome2">find demo2</a>
</body>
</html>
输入
<body>
<form method="get" action="发给谁">
用户:<input type="text" name="accout" id="user" value="请输入帐户名" onfocus="if(this.value=='请输入帐户名'){this.value='' ;this.style.color='#000'}" onblur="if(this.value==''){this.value='请输入帐户名' ;this.style.color='#999999'}" style="color: #999999;"/>
<p>密码:<input type="password" name="password" id="pwd" />
<p><input type="submit" value="登陆"/>
1我
<input type="radio" name="xuan" value="xiaobei"/>
2你
<input type="radio" name="xuan" value="xioalai"/>
3他
<input type="radio" name="xuan" value="wpd"/>
checked="checked"/>
</form>
</body>
感觉效果比placeholder="请输入密码"/>好一点
<body>
<form method="get" action="">
<select name="pro">
<option>beijing</option>
<option>beijing1</option>
<option>beijing2</option>
<option>beijing3</option>
</select>
<input type="submit"/>
</form>
</body>
主流浏览器
IE Trident
Firefox Gecko
Google chrome Webkit/blink
Safari Webkit
Opera Presto
html css javascript
结构 样式 行为
css cascading style sheet 层叠样式表
<head>
<!-- 2. -->
<style type="text/css">
div{
width: 100px;height: 100px; background-color:gold;
}
</style>
<!-- 3 -->
<link rel="stylesheet" type="text/css" href="css/new_file.css" />
</head>
<body>
<!-- 1.引入scc样式 -->
行间样式
<div style="width: 100px;height: 100px; background-color: aqua;"></div>
<!-- 2页面级css样式 -->
<div></div>
<!-- 3.外部css文件 -->
<div></div>
</body>
new_file.css
div{
width: 100px;
height: 100px;
border-radius: 50%;
background-color: blueviolet;
}
#only{
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #8A2BE2!important;
}
#lu{
width: 100px;
height: 100px;
background-color: chartreuse;
}
.demo{
background-color: #8A2BE2;
}
.demo1{
color: f40;
}
*{
background-color: #7FFF00;
}
[id="only"]{
background: #8A2BE2;
}
div span{
background-color: #8A2BE2;
}
div >em{
background-color: aqua;
}
/* 并列选择器 */
div.demo{
background-color: aqua;
}
<!-- 选择器 -->
<!-- 1.id -->
<!-- 2.class -->
<!-- 3.标签div... -->
<!-- 4.通配符 -->
<!-- 5.属性 -->
<!-- 6.父子选择器 -->
<!-- 7.直接子元素选择器 -->
<!-- 8.并列选择器 -->
<!--9.分组选择器-->
<div id="only"></div>
<div id="lu"></div>
<div class="demo1 demo">阿斯蒂芬</div>
<div>1</div>
<div class="demo">2</div>
<p class="demo">3</p>
id优先级高
id>class>标签>*
行间样式>id
优先级一样就去写的顺序属性选择器和class选择器==
!important:强制优先级
css权重
分组选择器
/* em{
background-color: aqua;
}
strong{
background-color: aqua;
}
span{
background-color: aqua;
} */
em,strong,span{
background-color: aqua;
}
