html和css的一些常用标签使用
程序员文章站
2022-12-24 16:00:59
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>
上一篇: 配置中心框架IConfCenter
下一篇: 前端基础之JavaScript_1