Html与Css样式
######Html与Css样式######
## 01_文本标签
h1-h6:标题
b/strong:加粗
u:下划线
s:横杠划去
 :加入空格
换行标签: br-----(第一个没有成对出现的标签)
水平分隔符标签: hr-----(第一个没有成对出现的标签)
预格式化文本标签(保留文本的原有格式): pre标签
上标和下标: sup， sub
块引用标签: blockquote
普通的文本: span --- 行内标签
普通文本的标签:div------块级标签
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<h3 style="color: aqua"><span>hello world</span></h3>
<p>hello</p>
<hr>
<p>world</p>hello<br>
world<blockquote style="color: blue">x<sup>2</sup>+2x+3=5<br>x<sub>1</sub>=3;x<sub>2</sub>=5
</blockquote>
</body>
</html>
## 02_超链接标签<a>
<!--a标签-->
<!--1. 跳转到指定的url地址-->
<a href="http://www.baidu.com"> 百度</a>
<a href="http://www.baidu.com" target="_parent"> 百度</a>
<!--新建一个浏览器窗口并打开-->
<a href="http://www.baidu.com" target="_blank"> 百度</a>
<!--2. 跳转到当前页面的指定位置（锚点）-->
<a href="#C1">第一个标题 </a>
<a href="#C2">第2个标题 </a>
<a href="#C3">第3个标题 </a>
<a href="#C4">第4个标题 </a>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><a href="http://www.baidu.com">百度</a>
<!--_blank重新打开一个网页页面-->
<a href="http://www.baidu.com" target="_blank">百度</a>
<!--_parent当前页面直接跳转至百度-->
<a href="http://www.baidu.com" target="_parent">百度</a></body>
</html><!--标题跳转-->
<a href="#t1">第1个标题</a>
<a href="#t2">第2个标题</a>
<a href="#t3">第3个标题</a><h1><a name="t1">第一个标题</a></h1>
科比·布莱恩特（Kobe Bryant），1978年8月23日出生于美国宾夕法尼亚州费城，
前美国职业篮球运动员，司职得分后卫/小前锋（锋卫摇摆人），绰号“黑曼巴”/“小飞侠”
科比·布莱恩特（Kobe Bryant），1978年8月23日出生于美国宾夕法尼亚州费城，
前美国职业篮球运动员，司职得分后卫/小前锋（锋卫摇摆人），绰号“黑曼巴”/“小飞侠”
科比·布莱恩特（Kobe Bryant），1978年8月23日出生于美国宾夕法尼亚州费城，
前美国职业篮球运动员，司职得分后卫/小前锋（锋卫摇摆人），绰号“黑曼巴”/“小飞侠”
科比·布莱恩特（Kobe Bryant），1978年8月23日出生于美国宾夕法尼亚州费城，
前美国职业篮球运动员，司职得分后卫/小前锋（锋卫摇摆人），绰号“黑曼巴”/“小飞侠”
科比·布莱恩特（Kobe Bryant），1978年8月23日出生于美国宾夕法尼亚州费城，
前美国职业篮球运动员，司职得分后卫/小前锋（锋卫摇摆人），绰号“黑曼巴”/“小飞侠”
科比·布莱恩特（Kobe Bryant），1978年8月23日出生于美国宾夕法尼亚州费城，
前美国职业篮球运动员，司职得分后卫/小前锋（锋卫摇摆人），绰号“黑曼巴”/“小飞侠”
科比·布莱恩特（Kobe Bryant），1978年8月23日出生于美国宾夕法尼亚州费城，
前美国职业篮球运动员，司职得分后卫/小前锋（锋卫摇摆人），绰号“黑曼巴”/“小飞侠”
科比·布莱恩特（Kobe Bryant），1978年8月23日出生于美国宾夕法尼亚州费城，
前美国职业篮球运动员，司职得分后卫/小前锋（锋卫摇摆人），绰号“黑曼巴”/“小飞侠”
科比·布莱恩特（Kobe Bryant），1978年8月23日出生于美国宾夕法尼亚州费城，
前美国职业篮球运动员，司职得分后卫/小前锋（锋卫摇摆人），绰号“黑曼巴”/“小飞侠”<h1><a name="t2">第二个标题</a></h1>
科比·布莱恩特（Kobe Bryant），1978年8月23日出生于美国宾夕法尼亚州费城，
前美国职业篮球运动员，司职得分后卫/小前锋（锋卫摇摆人），绰号“黑曼巴”/“小飞侠”
科比·布莱恩特（Kobe Bryant），1978年8月23日出生于美国宾夕法尼亚州费城，
前美国职业篮球运动员，司职得分后卫/小前锋（锋卫摇摆人），绰号“黑曼巴”/“小飞侠”
科比·布莱恩特（Kobe Bryant），1978年8月23日出生于美国宾夕法尼亚州费城，
前美国职业篮球运动员，司职得分后卫/小前锋（锋卫摇摆人），绰号“黑曼巴”/“小飞侠”
科比·布莱恩特（Kobe Bryant），1978年8月23日出生于美国宾夕法尼亚州费城，
前美国职业篮球运动员，司职得分后卫/小前锋（锋卫摇摆人），绰号“黑曼巴”/“小飞侠”
科比·布莱恩特（Kobe Bryant），1978年8月23日出生于美国宾夕法尼亚州费城，
前美国职业篮球运动员，司职得分后卫/小前锋（锋卫摇摆人），绰号“黑曼巴”/“小飞侠”
科比·布莱恩特（Kobe Bryant），1978年8月23日出生于美国宾夕法尼亚州费城，
前美国职业篮球运动员，司职得分后卫/小前锋（锋卫摇摆人），绰号“黑曼巴”/“小飞侠”
科比·布莱恩特（Kobe Bryant），1978年8月23日出生于美国宾夕法尼亚州费城，
前美国职业篮球运动员，司职得分后卫/小前锋（锋卫摇摆人），绰号“黑曼巴”/“小飞侠”
科比·布莱恩特（Kobe Bryant），1978年8月23日出生于美国宾夕法尼亚州费城，
前美国职业篮球运动员，司职得分后卫/小前锋（锋卫摇摆人），绰号“黑曼巴”/“小飞侠”
科比·布莱恩特（Kobe Bryant），1978年8月23日出生于美国宾夕法尼亚州费城，
前美国职业篮球运动员，司职得分后卫/小前锋（锋卫摇摆人），绰号“黑曼巴”/“小飞侠”
<h1><a name="t3">第三个标题</a></h1>
科比·布莱恩特（Kobe Bryant），1978年8月23日出生于美国宾夕法尼亚州费城，
前美国职业篮球运动员，司职得分后卫/小前锋（锋卫摇摆人），绰号“黑曼巴”/“小飞侠”
科比·布莱恩特（Kobe Bryant），1978年8月23日出生于美国宾夕法尼亚州费城，
前美国职业篮球运动员，司职得分后卫/小前锋（锋卫摇摆人），绰号“黑曼巴”/“小飞侠”
科比·布莱恩特（Kobe Bryant），1978年8月23日出生于美国宾夕法尼亚州费城，
前美国职业篮球运动员，司职得分后卫/小前锋（锋卫摇摆人），绰号“黑曼巴”/“小飞侠”
科比·布莱恩特（Kobe Bryant），1978年8月23日出生于美国宾夕法尼亚州费城，
前美国职业篮球运动员，司职得分后卫/小前锋（锋卫摇摆人），绰号“黑曼巴”/“小飞侠”
科比·布莱恩特（Kobe Bryant），1978年8月23日出生于美国宾夕法尼亚州费城，
前美国职业篮球运动员，司职得分后卫/小前锋（锋卫摇摆人），绰号“黑曼巴”/“小飞侠”
科比·布莱恩特（Kobe Bryant），1978年8月23日出生于美国宾夕法尼亚州费城，
前美国职业篮球运动员，司职得分后卫/小前锋（锋卫摇摆人），绰号“黑曼巴”/“小飞侠”
科比·布莱恩特（Kobe Bryant），1978年8月23日出生于美国宾夕法尼亚州费城，
前美国职业篮球运动员，司职得分后卫/小前锋（锋卫摇摆人），绰号“黑曼巴”/“小飞侠”
科比·布莱恩特（Kobe Bryant），1978年8月23日出生于美国宾夕法尼亚州费城，
前美国职业篮球运动员，司职得分后卫/小前锋（锋卫摇摆人），绰号“黑曼巴”/“小飞侠”
科比·布莱恩特（Kobe Bryant），1978年8月23日出生于美国宾夕法尼亚州费城，
前美国职业篮球运动员，司职得分后卫/小前锋（锋卫摇摆人），绰号“黑曼巴”/“小飞侠”## 03_图片标签
<!--1. 插入图像并设置大小
src指定图片的位置， 可以是url地址， 也可以是本地的图片;
alt: 如果图片不能正常加载， 则显示alt里面的文字;
-->
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>picture</title><style>.Local{width: 20px;height: 20px;}.Url{width: 100px;height: 100px;}</style>
</head>
<body>
<div class="Local"><img src="AJ.jpg" alt="local">
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="Url"><img src="http://img1.imgtn.bdimg.com/it/u=3348906052,3622627393&fm=26&gp=0.jpg" atl="url"></div>
</body>
</html>## 04_序列化标签
<!--1. 无序标签之ul和li-->
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<h2>无序标签</h2>
<!--去掉ul里面的所有li标签里面的样式-->
<!--案例1： 实现水平导航栏
list-style-type: none ---- 去掉圆点
display: inline-block ---- 变为行内元素， 并且可以设置高度和宽度
width: -----可以使用300px表示， 也可以用百分比来表示； 20%
-->
<ul style="list-style-type: none"><li style="display: inline-block;width: 5%;background: crimson"><a href="http://www.w3school.com.cn/h.asp">HTML</a></li><li style="display: inline-block">CSS</li><li style="display: inline-block">JavaScript</li>
</ul>
</body>
</html>
<ul style="list-style-type: none"><li style="display: block; width: 20%; background: azure;">HTML</li><li style="display: block; width: 20%; background: azure;">CSS</li><li style="display: block; width:20%; background: azure;">JS</li><li style="display: block; width: 20%; background: azure;">python</li>
</ul>
<!--2. 有序标签之ol和li-->
type可以指定有序列表符号的类型
text-decoration: none; ---去掉原有标签的文本装饰
<h2>有序标签</h2>
<ol type="A"><li><a href="http://www.w3school.com.cn/h.asp">HTML</a></li><li><a href="#">CSS</a></li><li><a href="#">JavaScript</a></li>
</ol>
<!--3. 嵌套标签之dl, dt和dd-->
<dl><dt>HTML</dt><dd>li</dd><dd>span</dd><dd>div</dd><dd>hr</dd><dd>sub</dd><dt>CSS</dt><dd>text-decoration</dd><dd>color</dd></dl>
## 05_表格标签
<!--
1. table代表一个表格
2. caption 表示表格的标题
3. td:列 (th 表头加粗)
4. tr: 行
5. cellpadding="3" -----设置表格的内边距
6. cellspacing="5" ----设置表格的外边距
-->
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.server{text-align: center;}</style>
</head>
<body>
<table style="width: 80%;" border="1px" cellpadding="5px" cellspacing="0px"><caption>services</caption><tr class="server"><th>主机名</th><th>IP地址</th></tr><tr class="server"><td>server1</td><td>172.25.254.40</td></tr><tr class="server"><td>server2</td><td>172.25.254.50</td></tr><tr class="server"><td>server3</td><td>172.25.254.60</td></tr><tr class="server"><td>server4</td><td>172.25.254.250</td></tr>
</table>
</body>
</html>
## 合并列单元格
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<table style="width: 80%" border="1px"><caption>这是一个表格</caption><tr><th>主机名</th><!--<th>IP地址</th>--><!--<th>IP地址</th>--><!--<th>IP地址</th>--><th colspan="3">IP地址</th></tr><tr><td>server1</td><td>172.25.254.1</td><td>172.25.0.1</td><td>172.25.0.254</td></tr>
</table>
</body>
</html>
## 合并行单元格
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<table style="width: 60%" border="2px"><tr><td>IP地址</td><td>server1</td><td>server2</td><td>server3</td></tr><tr><td rowspan="2">IP</td><td>172.25.254.1</td><td>172.25.254.1</td><td>172.25.254.1</td></tr><td>172.25.254.2</td><td>172.25.254.2</td><td>172.25.254.2</td></tr>
</table></body>
</html>
## 表格嵌套标签
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<table style="width: 80%" border="2px"><tr><td><img src="AJ.jpg"></td><td><ul style="list-style-type: none"><li>html</li><li>html</li><li>html</li></ul></td></tr><tr><td><pre>helloworld</pre></td><td><strong>houzeyu</strong></td></tr></table>
</body>## 06_表单标签
<form></form>表单标签的用法
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<form method="post"><span>用户名：<input type="text"></span><br><span>密码：<input type="password"></span><br><span>出生日期：<input type="date"></span><br><input type="submit" value="login"><input type="reset" value="reset">
</form>
</body>
</html>注：表单标签中method=get 在url显示操作内容；而method=post 直接跳转
type 类型里根据表单需求来选择，有文本、密码等
value 值是显示的信息
## <!--单选按钮以及多选按钮-->
<!--name和value是为了将用户选择的信息传递给服务器， gender=1-->
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<span>性别：</span>
<span style="font-size: medium">男</span><input type="radio" name="gender" value="1">
<span style="font-size: medium">女</span><input type="radio" name="gender" value="2">
<br>
<br>
<br>
<br>
<br><span>课程</span>
<ul><li><span>html</span><input type="checkbox" name="html"></li><li><span>css</span><input type="checkbox" name="css"></li><li><span>javascript</span><input type="checkbox" name="javascript"></li>
</ul>
</body>
</html>
## <!--下拉列表-->
<select><option>选择省份</option><option>陕西</option><option>沈阳</option><option>成都</option><option>河南</option>
</select>
## <!--围绕数据的标签-->
<fieldset><legend>个人简介</legend><h1>用户登陆</h1><hr/>用户名: <input type="text"><br/><input type="submit" value="登陆">
</fieldset>
## 总结:
1. 学习的行内标签和 块级元素分别有哪些?
行内标签:span, strong, a, img, input, textarea
块级元素:div, h1-h6, p, hr, pre, ul, ol, dd, dt, th. tr, td
2. 两者的区别与特性；
1).块级元素独占一行空间， 行内元素只占据自身宽度的空间;
2).块级元素是可以包含块级元素和行内元素; 行内元素只能包含文本信息和行内元素;
3). 块级元素可以设置宽和高， 行内元素设置的宽和高失效；
3. 如何让块级元素居中? 如何让行内元素居中?
1); 块级元素居中： margin: 0 auto
2> 行内元素居中: text-aligin:center
## CSS样式
## CSS 概述
CSS 指层叠样式表 (Cascading Style Sheets)
样式定义如何显示 HTML 元素
样式通常存储在样式表中
把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在 CSS 文件中
多个样式定义可层叠为一
<!--引入方式:
1). 行内引入: <a style="行内引入的样式">
2). 内部引入: 写在head标签里面的style标签里面的样式;
3). 外部引入: 将css样式独立成一个文件， 通过<link rel="stylesheet" href="css/main.css">与当前html文件链接在一起.
三种引入方式的优先级: 就近原则
-->
## CSS样式——类选择器和标签选择器
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>div{width:100px;height: 100px;border-radius:25px;border: 1px solid blueviolet;text-align: center;margin: 0 auto;padding-top: 20px;text-shadow: 5px 5px 5px gray;}.num{width: 20px;height: 20px;font-size: large;padding-top: 10px;border-radius: 5px;}</style>
</head>
<body>
<div class="num">one</div>
<div>two</div>
<div>three</div>
<div>four</div>
</body>
</html>
## CSS样式_ID选择器
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>#num{width:100px;height: 100px;border-radius:25px;border: 1px solid blueviolet;text-align: center;margin: 0 auto;padding-top: 20px;text-shadow: 5px 5px 5px gray;}</style>
</head>
<body>
<div id="num">one</div>
<div>two</div>
<div>three</div>
<div>four</div>
</body>
</html>
## 利用CSS选择器进行分页练习
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>ul {list-style-type: none;}li {text-decoration: none;display: inline-block;width: 10%;padding-top: 5px;padding-bottom: 5px;background: snow;color: #333333;text-align: center;font-size: large;text-transform: capitalize;}li:hover {background: green;color: snow;}a:hover {color: snow;}.active {background: gray;}#pageintor {width: 80%;margin: 0 auto;/*border: 1px solid red;*/}</style>
</head>
<body>
<div id="pageintor"><ul><li><a href="#">上一页</a></li><li class="active"><a href="#">1</a></li><li><a href="#">2</a></li><li><a href="#">3</a></li><li><a href="#">4</a></li><li><a href="#">...</a></li><li><a href="#">28</a></li><li><a href="#">下一页</a></li></ul>
</div>
</body>
</html>
#######################################
Html与Css样式相关推荐
- 内联式css样式，直接写在现有的HTML标签中
CSS样式可以写在哪些地方呢?从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式.嵌入式和外部式三种.这一小节先来讲解内联式. 内联式css样式表就是把css代码直接写在现有的HTML标签中 ...
- css样式之边框和内外边距
1.css样式之边框:border 实心的边框: <!DOCTYPE html> <html> <head> <meta http-equiv="c ...
- CSS（2 ）-- CSS样式大全
常用css样式大全Author:xu_shuyi201504039.CSS颜色代码大全http://www.cnblogs.com/axing/archive/2011/04/09/CSS.html1 ...
- MOSS的CSS样式说明，一个老外总结的
MOSS的CSS样式说明,一个老外总结的 http://www.heathersolomon.com/content/sp07cssreference.htm 转载于:https://www.cnbl ...
- float属性html,详解CSS样式中的float属性
详解CSS样式中的float属性.float是 css 样式的定位属性.我们在印刷排版中,文本可以按照需要围绕图片.一般把这种方式称为"文本环绕".在网页设计中,应用了CSS的fl ...
- 一个DIV调用多个CSS样式
1使用以上两个CSS样式表对描述同一个DIV的写法class利用class可以对于同一个标签多重定义样式. 比如用1.2两种样式同时控制一个DIV,可以写成以下格式: <div class=&q ...
- 关于CSS样式浏览器兼容问题的一些注意事项
CSS技巧 1.div的垂直居中问题 vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了.缺点是要控制内容不 ...
- asp.net 控制页面css样式
asp.net 控制页面css样式 fontDiv.Style["display"] = "none"; fontDiv.Style["dis ...
- Web前端开发最佳实践（8）：还没有给CSS样式排序？其实你可以更专业一些
前言 CSS样式排序是指按照一定的规则排列CSS样式属性的定义,排序并不会影响CSS样式的功能和性能,只是让代码看起来更加整洁.CSS代码的逻辑性并不强,一般的开发者写CSS样式也很随意,所以如果不借 ...
- Emmet语法（快速生成HTML结构语法、快速生成CSS样式语法）
1. 快速生成HTML结构语法 生成标签直接输入标签名按tab键即可 比如div然后tab键,就可以生成<div></div> 如果想要生成多个相同标签加上*就可以了 ...
最新文章
- Linux运维系统工程师系列---25
- ASP.NET—001：GridView绑定List、页面返回值
- 打印机可以打印不能扫描怎么弄_为什么打印机可以通过电脑打印可不能扫描呢...
- jmeter3.3—插件管理器的安装
- 高性能 TCP UDP 通信框架 HP-Socket v3.2.3
- 第19次csp认证 202006-2 稀疏向量（C++）
- System学习笔记003---Windows把内存变成快速虚拟硬盘
- Linux文件类型及颜色标识整理
- php json数组大小,php json转换成数组形式
- vux和iview的弹出框总结
- JavaWeb之Cookie与Session
- 最基础eacharts图带数字，百分比,tab切换
- linux raid类型,Linux学习笔记：RAID种类
- 用原生javascript制作日历
- 输入某年某日，判断这一天是这一年的第几天
- 《Real-Time Rendering 4th Edition》全文翻译 - 第15章 非真实感渲染（下）15.3 ~ 15.5
- 8*8点阵引脚图 行列定义
- 漫画：二分法系列篇（第一讲）
- 正则表达式基本语法和Java中的简单使用
- JS实现手机号码以及姓名的脱敏处理