角标标签：

上角标：sup

下角标：sub

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title>角标</title>

	</head>

	<body>

		x<sup>2</sup> + y<sup>2</sup> = z<sup>2</sup>

		<br />

		H<sub>2</sub>O

	</body>

</html>

文本加粗：

b标签

strong加强版文本加粗，具有语气强调的特性

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title>加粗标签</title>

	</head>

	<body>

		<p>夜雨染成天水碧。有些人不需要姿态，也能成就一场惊鸿。</p>

		<br />

		<p><b>夜雨染成天水碧。有些人不需要姿态，也能成就一场惊鸿。</b></p>

		<br />

		<p><strong>夜雨染成天水碧。有些人不需要姿态，也能成就一场惊鸿。</strong></p>

	</body>

</html>

斜体标签：

em

i

cite主要用于修饰书名

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title>斜体标签</title>

	</head>

	<body>

		<p><em>夜雨染成天水碧。有些人不需要姿态，也能成就一场惊鸿。</em></p>

		<br />

		<p><i>夜雨染成天水碧。有些人不需要姿态，也能成就一场惊鸿。</i></p>

		<br />

		<p><cite>《西游记》</cite>这个神话，从小就喜欢。</p>

	</body>

</html>

下划线标签：

u

删除线标签：

del

CSS引入方式优先级：

行内式最高，无行内式时，内嵌式和外链式遵循后定义原则（就近原则）

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title>引入方式优先级</title>

		<!--

			行内式优先级最高

			在没有行内式的情况下：

				内嵌式和外链式同时引入：就近原则（从上往下）

		-->

		<link rel="stylesheet" type="text/css" href="../css/main.css"/>

		<style type="text/css">

			div{

				width: 100px;

				height: 100px;

				background-color: blueviolet;

			}

		</style>

		<!--<link rel="stylesheet" type="text/css" href="../css/main.css"/>-->

	</head>

	<body>

		<div <!--style="width: 100px; height: 100px; background-color: chartreuse;"-->>

			这是一段文字

		</div>

	</body>

</html>

CSS元素溢出：

属性：overflow：hidden 隐藏超出div边框部分

visible 默认（显示超出边框部分）

scroll 滚动查看隐藏的文字

auto 调用scroll方式，滚动查看隐藏的文字

     <!DOCTYPE html>

     <html>

     	<head>

     		<meta charset="UTF-8">

     		<title>元素溢出</title>

     		<style type="text/css">

     			div{

     				width: 200px;

     				height: 300px;

     				border: 1px solid cadetblue;

     				/*overflow: hidden;隐藏超出边框的文字*/

     				/*overflow: visible;默认*/

     				/*overflow: scroll;滚动显示文字*/

     				overflow: auto;/*默认使用scroll方式*/

     			}

     		</style>

     	</head>

     	<body>

     		<div id="">

     			秋意尚浓，恍然就到了初冬，月亮也带着秋温，走进了冬的夜空。

     天黑得早了，晚饭后摸黑回宿舍，过了山头，豁然见西南山坡上空这轮橙黄明净的初冬月，低垂圆满，硕大清新，一种美好亲切的感觉顿从心底漾起。夜幕中，黑森森的山峰错落而列，视野尽处，一岭横天际接晚霞；渐暗的余霞边，山的剪影如淡淡的水墨画，近山的轮廓则像浓墨涂出的一样；山坡西南出口方向，山势迅速开阔，峰峦连绵起伏，像一片黑色的波涛，磅礴在融融的月光下；月下的山坡和附近的山川上空月光旖旎，给人今月专为此处明的美感。这月光山色太美了！望着明月，似乎忘却了自身的存在，只剩下一缕美好的情感，羽化在这月色之中。

     		</div>

     	</body>

     </html>

文本输出顺序标签：

bdo

dir属性：rtl倒序

ltr正序

     <!DOCTYPE html>

     <html>

     	<head>

     		<meta charset="UTF-8">

     		<title>文本输出顺序bdo</title>

     	</head>

     	<body>

     		<!--<bdo dir="ltr">helloworld</bdo>-->

     		<bdo dir="rtl">helloworld</bdo>

     	</body>

     </html>

CSS文本样式：

font-family字体

font-size字体大小

font-style修改字体风格 italic斜体

line-height行高

font-weight:bold设置加粗

上述也可简写：

font：italic bold 18px/40px ''楷体‘’；

text-decoration取出a标签默认下划线

a标签中title属性说明：

鼠标放在链接上可以提示指定信息

选择器：

①标签选择器：

影响范围较大，一般用来做一些通用的设置

②id选择器：

通过id找到元素，一个id只能作用在一个元素上，id值不能相同，使用方式：#id值{}

③类选择器：

通过类名找到标签元素，一个类名可以应用多个标签，一个标签可以使用多个类名（空格分隔多个类名），使用方式：.类名

④层级选择器（后代选择器）：

主要应用在嵌套标签中

类似#id_1 p span{}

⑤伪类选择器：

鼠标移动到元素标签，会发生设定的改变效果（用于a标签）

a:hover{

}

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title>选择器</title>

		<style type="text/css">

			/*标签选择器*/

			div{

				width: 200px;

				height: 200px;

				background-color: #FF0000;

			}

			/*id选择器*/

			#m_id{

				width: 100px;

				height: 100px;

				background-color: green;

			}

			/*类选择器*/

			.math{

				width: 100px;

				height: 100px;

				color: #008000;

			}

			.kj{

				width: 300px;

				height: 300px;

				background-color: aquamarine;

			}

			.bj{

				margin: auto;

			}

			/*层级选择器*/

			#m_id p span{

				font-family: "微软雅黑";

				font-size: 20px;

				font-style: italic;

			}

			/*伪类选择器*/

			a:hover{

				background-color: darkturquoise;

				color: red;

				font-style: italic;

				font-size: 30px;

				text-decoration: none;

			}

		</style>

	</head>

	<body>

		<div id="m_id">

			我想静一静

			<p class="math">晚饭后摸黑回宿舍，<span>过了山头</span>，豁然见西南山坡上空这轮橙黄明净的初冬月晚饭后摸黑回宿舍</p>

		</div>

		<br />

		<br />

		<div class="kj bj">

			豁然见西南山坡上空这轮橙黄明净的初冬月晚饭后摸黑回宿舍

		</div>

		<br />

		<a href="#" title="快来点我吧！">更多</a>

	</body>

</html>

选择器优先级：

行内式>id选择器>类选择器>标签选择器

补充：HTML标签和CSS的更多相关文章

  1. 今天我们要说的画一个三角形，恩，画一个三角形，第一种呢是利用我们的html标签结合css来实现；而第二种方法就就是我们的html5新增的一个标签canves,这个canves就是网页画幕，那么顾名思义就是在网页里建造一个画板，用来画画，好，那接下来就和我一起去看看吧！

    第一种方法:利用我们的html标签结合css来实现 span{ width:0px; height:0px; border-width:7px; border-style:solid; border- ...

  2. input标签写CSS时需要注意的几点（先收藏）

    (从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期2014-05-05) 飞鱼的声纳顶部的搜索框让我头疼了很长时间,原因是总不能获得跨浏览器的统一样式.主要的问题有这么两个:一是inpu ...

  3. Bootstrap入门（三）<p>标签的css样式

    Bootstrap入门(三)<p>标签的css样式 前提:引入css文件,内容放在一个class为container的div中   <p>标签属性 1.“ text-left ...

  4. 【onclick事件】【改变 HTML 内容innerHTML】【图片替换】【改变标签的css】【判断输入是否是数字】

    1.onclick事件 <button type="button" onclick="alert('Welcome!')">点击这里</but ...

  5. PHP使用echo输出标签设置CSS样式问题

    使用php是可以输出HTML标签的,这为页面设计带来很大方便. 在此记录php输出标签设置CSS样式的问题: echo可使用''.""或你不用引号,如果想要输出带CSS样式的HTM ...

  6. 前端基础之CSS的引入+HTML标签选择器+CSS操作属性

    clear:left/ringt属性 CSS:语法形式上由选择器+以及一条或多条声明组成:选择器查找到指定的html标签后,使用css属性设置html标签的样式:                   ...

  7. day--43 HTML标签和CSS基本小结

    HTML标签和CSS基本小结一:常用标签 01:块标签 p,h1--h6 ,hr ,div 02:内联标签 b,i,u,s 小提示:块标签可以嵌套内置元素或者某些块级元素,但内联元素不能包含块级元素 ...

  8. 后端数据中含有html标签和css样式，前端如何转译展示样式效果。

    后端含有html标签和css样式的数据: domain="<span style='color:red'>www.baidu.com</span>" (vu ...

  9. 20190326-HTML5标签、CSS的引用

    目录 1.HTML5标签 H5前的DIV+CSS布局 H5解决的问题 H5新标签header.footer.nav.aside.article.address.main.figure.figcapti ...

随机推荐

  1. 使用ClientScriptManager向客户端注册脚本

    ClientScriptManager在非异步(就是说非AJAX)环境下使用的.如果要在异步环境下注册脚本应该使用ScriptManager的静态方法来注册(ScriptManager兼容异步于非异步 ...

  2. 如何调试Maven软件的源代码

    和调试maven插件方法一样 修改maven源代码 打包模块apache-maven,生成apache-maven-x.x.x-bin.tar.gz 解压上面的压缩包,生成目录apache-maven ...

  3. SQLPrompt 6.3.0.354 完美破解 安装于 SQL Server 2012/2014

    SQL SERVER 2012格式化 SQL SERVER 2014格式化 SQLPrompt_6.4.0.641 破解版 百度云下载 迅雷下载 百度网盘下载 SQL Prompt 是一款拥有SQL智 ...

  4. 【POJ - 3268 】Silver Cow Party （最短路 Dijkstra算法）

    Silver Cow Party Descriptions 给出n个点和m条边,接着是m条边,代表从牛a到牛b需要花费c时间,现在所有牛要到牛x那里去参加聚会,并且所有牛参加聚会后还要回来,给你牛x, ...

  5. csu 1909: Perfect Chocolate

    1909: Perfect Chocolate Submit Page   Summary   Time Limit: 3 Sec     Memory Limit: 128 Mb     Submi ...

  6. FCM实现手机推送，推送的方式，真机调试

    FCM实现手机 1 下载Androidstudio 3.2 版本,之后新建一个项目 2  创建完项目之后查找文件AndroidMainifest.xml 3  访问网站注册一个自己的firebase的 ...

  7. [官网]Postgresql 的客户端应用 pg_config

    pg_config Name pg_config -- 检索已安装版本的 PostgreSQL 的信息 Synopsis pg_config {--bindir | --includedir | -- ...

  8. [转帖]PostgreSQL 昨天,今天和明天

    PostgreSQL 昨天,今天和明天 http://www.postgres.cn/v2/news/viewone/1/52 原作者:何伟平(laser) 创作时间:2005-01-15 11:44 ...

  9. Visual Studio中Debug与Release以及x86、x64、Any CPU的区别

    Visual Studio中Debug与Release的区别: 在Visual Studio中,编译模式有2种:Debug与Release.这也是默认的两种方式,在新建一个project的时候,就已经 ...

  10. swagger 爬坑记

    Swagger 的好处不用我多说,但是一不小心可能就被坑……今天下午就被上了一课,废话不多说,直接上代码(图) 实体类: 好像没啥问题,对吧? 但是,在http://localhost:8080/sw ...