html和css的一些常用标签使用
程序员文章站
2022-05-29 12:44:39
HTML（HyperText Mark-up Language）超文本标签语言 CSS（cascading style sheets）层叠样式表 作用：给标签设置样式外观样式：文本，字体，大小，网页背景色，图片 CSS书写方式：1、行内式（容易写过多的重复代码） 2、嵌入式（容易造成相同标签修饰同一 ......
html（hypertext mark-up language）超文本标签语言
<!doctype html> <!--声明这是一个html文档-->
<html> <!--最外层标签，界定标签的范围-->
<head> <!--头标签，用来引入外部文件，指定编码格式，设定标题（浏览器标签页标题）名称-->
<meta charset="utf-8"> <!--指定编码格式-->
<title></title> <!--标题标签-->
</head>
<body> <!--内容标签（主体）-->
<h1><!--标题标签，从大到小h1-h6--></h1>
<br/> <!--换行标签-->
<pre>
<!--格式化标签（可以识别内容中的换行符号-回车）-->
</pre>
<p><!--段落标签--></p>
<!--
图片标签：img
src:图片路径
alt:属性作用
①当图片不能正常显示，会提示alt中的文本内容，利于用户体验
②爬取图片数据，对图片进行分析（将属性值作为爬取的条件）
-->
<img src="" alt="" />
<!--
链接标签：a
用来跳转网页页面，也可以跳转html文件页面
href属性值是地址，如果没有默认#，点击后没有效果
target属性：_blank会重新弹出一个窗口
_self在当前页面进行显示，默认就是self
-->
<a href="http://www.baidu.com"></a>
<div id=""> 块标签
<span id="">
修饰一段文字中的一小段文字
</span>
</div>
</body>
</html>
css（cascading style sheets）层叠样式表
作用：给标签设置样式
外观样式：文本，字体，大小，网页背景色，图片
css书写方式：
1、行内式（容易写过多的重复代码）
<div style="width: 800px;height: 600px;font-size: 14px;"> ....... </div>
2、嵌入式（容易造成相同标签修饰同一种样式问题）
<html>
<head>
<meta charset="utf-8">
<title>css边框属性</title>
<style type="text/css">
div{
width: 200px;设置div宽度
height: 200px;设置div高度
border: 3px solid gold;设置边框属性
border-top: 4px dotted blue ;设置上边线属性
border-left: 5px solid green;设置左边线属性
border-bottom: solid #ff0000;设置底部边线属性
border-right: solid aqua;设置右边线属性
}
</style>
</head>
<body>
<div>
<h3>边框展示</h3>
aa
bb
</div>
</body>
</html>
3、外链式（降低代码的耦合性，高内聚，低耦合）
要先创建一个css文件（内容如下）link.css
div{
background-color: green;
color: red;
height: 300px;
width: 300px;
}
div p{
color: aqua;
font-family: serif;
fon
}
再在原html文件中引用css文件：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>css外链式</title>
<link rel="stylesheet" type="text/css" href="../css/link.css"/>
</head>
<body>
<div id="">
超文本标记语言(hyper text markup language)
<p>
"超文本"就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。
</p>
</div>
</body>
</html>
列表标签：
分类：
1、无序列表：ul
ul>li*5 tab同时生成ul标签下5个li标签
ul标签里还可以添加type属性（相当于编号）：circle空心圆，square实心方块，disc实心圆（默认）
2、有序列表：ol
默认为数字编号（type)
还可指定start属性，从哪个编号开始算
type：1，2，3，4
a,b,c
a,b,c
i,ii,iii,
i,ii,iii
3、自定义列表：dl
dt标题
dd列表项
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--无序列表-->
<ul type="square">
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<!--有序列表-->
<ol start="3" type="i">
<li>山水有相逢</li>
<li>搏一搏</li>
<li>单车变摩托</li>
</ol>
<!--自定义列表-->
<dl>
<dt>日常</dt>
<dd>学习</dd>
<dd>睡觉</dd>
</dl>
</body>
</html>