HTML之样式设置和标签使用

最新推荐文章于 2024-02-10 05:15:00 发布

无处安放的小曾

最新推荐文章于 2024-02-10 05:15:00 发布

阅读量2.4k

点赞数 1

文章标签： html css 前端

本文链接：https://blog.csdn.net/m0_51152186/article/details/123306877

版权

HTML
超文本标记语言
是一种创建网页的标准标记语言
html不是编程语言，是标记语言，就是一套标记标签

一、html语法格式。

写法：尖角号包裹着关键词
比如：<html></html>

html 通常是成对出现的
分为开始标签和结束标签

<!DOCTYPE html>（这一层不区分大小写）
作用：声明HTML5文档

根元素：<html></html>

根元素中划分为
<head></head>放元素、文件、样式和
网页中能看见的都放在body中<body></body>

meta 设置
charset 字符集

字符：UTF-8 gbk gb2312
（文件中的字符集和浏览器中的字符集得对应上，否则出现乱码）

<title></title> 对应整个网页上边的标题

二、注释事项。

1.命名：数字字母下划线数字不能开头 d01 d_01
2.符号要在英文状态下打

3.改 title
4.是标签就可以有属性
属性="属性值"

单标记：<meta/>
双标记：<body></body>

F12或右键检查可以查看代码
<p></p> 段落

三、标签的使用。

p标签独占一行，宽度100%
嵌套标签：因为标签能加样式

<span></span> 中也能装文字，不独占一行，宽高也不是100%

<h1>---<h6> 标题标签
<h1></h1>~<h6></h6>标题由大到小，自带加粗属性。

<br/> 换行单标记标签
<hr/> 分割线单标记标签
网页中按空格键只显示一个空格
一个 代表一个空格
空格： 

尖角号： < >
左尖角号<
右尖角号>
<>

<img/> 图片（是标签就有属性）
src 路径
src="图片路径"(属性="属性值")

<b></b>加粗效果
<i></i>斜体效果
<em></em>斜体效果
<sup></sup>上标效果
<sub></sub>下标效果

标签嵌套
<h1>
标题
<sub>下标</sub>
</h1>
效果：标题下标

既是粗体又是倾斜
<b><i>加粗倾斜</i></b>
标签开始与结束必须对称

四、练习代码和注释。

index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>海康</title>
		<!-- 头部加入外部链接，link标签引入css样式表，href表示路径，"样式表的地址"-->
		<!-- rel说明这是一个样式表，type说明他是css文本 -->
		<!-- href根据文件路径来定，rel和type不变 -->
		<link href="css/style.css" rel="stylesheet" type="text/css" />
		<!-- 页内样式style放在head里面,凡是页面中相同的标签都会被加上相同的样式 -->
		<style>
			i{
				color: aquamarine;
				width:6.25rem;
				height: 6.25rem;
			}
			b{
				color: aquamarine;
				width:6.25rem;
				height: 6.25rem;
			}
			/* 样式用类选择器，允许重复命名 */
			.d_1{
				background-color: antiquewhite;
			}
			/* js中的功能时可以用id，不允许重复命名 */
			#a1{
				background-color: #0055ff;
			}
		</style>
	</head>
	<body>
		<!-- 行内样式都写在style里面，样式与样式之间用分号隔开 -->
		<!-- <p style="color:blue;width: 31.25rem;height: 3.125rem;">
			您好！hello!
		</p> -->
		<i>
			hello!
		</i>
		<b>
			加粗！
		</b>
		<!-- 类选择器,给这个标签取一个名字，只给这个标签加样式 -->
		<b class="d_1">
			加粗！
		</b>
		<b id="a1">
			加粗！
		</b>
		<b>
			加粗！
		</b>
		<b>
			加粗！
		</b>
		<br />
		<em>
			层叠样式表
		</em>
		<!-- <p>
			13060713716
			
			<b>
			<i>
			网页设计师		
			</i>
			</b>
		</p> -->
		<p>
			successful!
		</p>
		
	</body>
</html>

style.css

em{
	width: 18.75rem;
	height: 18.75rem;
	background-color: red;
	color:white;
	text-align: center;
	
}
/* p标签可以设置长宽形成四边形 */
p{
	width: 18.75rem;
	height: 18.75rem;
	background-color: red;
	color:white;
	/* text-align: center;
	line-height: 18.75rem; */
	/* line-height经常和文本对齐方式一起使用实现居中对齐,行高的属性值一般给外侧包裹盒子的高度。 */
    /* 文本装饰text-decoration */
	/* none   默认
	underline 下横线
	overline  上横线
	line-through 贯穿横线
	blink 闪烁文本
	wavy    波浪线
	dotted   点虚线 */
	text-decoration: underline overline line-through wavy blue;
	/* 线,线的类型,颜色 */
	text-transform: capitalize;
	/* 文本转换：text-transform:
	值：
	uppercase  大写
	lowercase  小写
	capitalize 开头字幕大写
	 */
	/* 文本缩进,text-indent后面接像素值。 */
	text-indent: 3.125rem;
	
}