html和css的一些常用标签使用
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>
html和css的一些常用标签使用的更多相关文章
- HTML|CSS之HTML常用标签
知识内容: 1.标签 2.head内标签 3.body内常用标签 注:本人使用的HTML为HTML5 一.标签 1.标签格式 标签的语法: <标签名 属性1=“属性值1” 属性2=“属性值2”… ...
- CSS网页制作常用标签
做了一个简单的网页,从布局到加内容,遇到了很多小问题.很多标签和属性都不会用或者忘记了.所以以此记录一下. 一.如何将边框四角变圆?(或做一个圆形) 顾名思义,如果要更改边框的角需要用到边框(bord ...
- CSS常用标签
CSS常用标签 一 CSS文字属性 color : #999999; /*文字颜色*/ font-family : 宋体,sans-serif; /*文字字体*/ font-size : 9pt; / ...
- 前端之常用标签和CSS初识
外层div的宽度是100%,就是视口的大小,当视口被拉窄到小于内层div的宽度980px时,比如800px,此时 外层div宽度为800px,内层div宽度依然为980px,而css中只设置了外层di ...
- html(常用标签,标签分类),页面模板, CSS(css的三种引入方式),三种引入方式优先级
HTML 标记语言为非编程语言负责完成页面的结构 组成: 标签:被<>包裹的由字母开头,可以结合合法字符( -|数字 ),能被浏览器解析的特殊符号,标签有头有尾 指令:被<>包 ...
- web@前端--html,css,javascript简介、第一个页面(常用标签简介)
1.什么是标签#1.在HTML中规定标签使用英文的的尖括号即`<`和`>`包起来,如`<html>`.`<head>`.`<body>`都是标签,#2. ...
- css常用标签及属性
css样式表常用的形式有三种,一.行内样式表.二.内部样式表.三.外部样式表 一. <p style="color:red;">nice to meet you< ...
- CSS常用标签-手打抄录-感谢原未知博主-拜谢了
CSS常用标签 CSS常用标签 一 CSS文字属性 color : #999999; /*文字颜色*/ font-family : 宋体,sans-serif; /*文字字体*/ font-siz ...
- 实用掌中宝--HTML&CSS常用标签速查手册 PDF扫描版
实用掌中宝--HTML&CSS常用标签速查手册 内容推荐: 本书第一篇以语法和实例相结合的形式,详细讲解了HTML语言中各个元素及其属性的作用.语法和显示效果:第二篇从CSS基本概念开始,分别 ...
随机推荐
- iOS技术面试03:Foundation
是否可以把比较耗时的操作放在NSNotificationCenter中 如果在异步线程发的通知,那么可以执行比较耗时的操作: 如果在主线程发的通知,那么就不可以执行比较耗时的操作 3.Foundati ...
- 解决X-Scan安装后“无法启动此程序,因为计算机丢失NPPTools.dll”
最近在一本书中看到X-Scan这个扫描器,虽说X-Scan相比现在的扫描器已经有点过时了,但也想下载来试一试,谁知道在VM中Win7安装时出现这种问题 可以在脚本之家找到缺失的这个文件:https:/ ...
- ant design pro v2 关于用户登录有多个权限的解决方法
ant design pro V2菜单栏显示流程, 用户输入用户名,密码,登录调用登录接口,校验后返回该用户的权限字段currentAuthority,然后通过调用setAuthority(curre ...
- Django简介 --Python Web
Python Web主流的三种框架:Django.Flask.Tornado,使用频度:Django>Flask>Tornado 一.设计模式 MVC:模型(Model).View(视图) ...
- Java Foreach用法
java中的while.for.if.switch等用法和c语言差不多,所以我们关注下foreach就行了. 一.创建ForeachTest.java public class ForeachTest ...
- Java 最常见 200+ 面试题 + 全解析
本文分为十九个模块,分别是: Java 基础.容器.多线程.反射.对象拷贝.Java Web .异常.网络.设计模式.Spring/Spring MVC.Spring Boot/Spring Clou ...
- C语言 - 获取系统时间 以年月日时分秒的形式输出
ESP32需要给下位机通过UART发送时间戳,形式是年月日时分秒的十六进制数据包. #include <stdio.h> #include <time.h> int main( ...
- python学习-42 装饰器 --- 函数闭包1
函数闭包举例: def father(name): print('hello world') def son(): print('儿子说:我的爸爸是%s' % name) def grandfson( ...
- python学习-34 内置函数的补充
其他内置函数 1.ord() 与chr()相反 2.pow() print(pow(3,3)) # 相当于3**3 print(pow(3,3,2)) # 相当于3*3%2 运行结果: 27 1 ...
- 20191011-构建我们公司自己的自动化接口测试框架-Util的AssertResult模块
AssertResult主要就是进行结果断言的了,因为断言结果分2种情况,一种是断言词,一种是断言sheet,如果涉及断言sheet,则需要操作excel到对应的断言表断言所有的字段并且书写断言结果主 ...