福州网站关键词推广,信誉比较好的网上做任务的网站,广州网站建设专家,百度学术搜索入口目录重要的H标签主要标签h系列标签主要用来做标题。h1到h6 依次缩小。p标签#xff1a;段落。div标签#xff1a;表示大的容器。span:放一些文本。a标签#xff1a;超链接。img标签#xff1a;增加背景图片块级标签和行内标签补充br换行符hr水平线style标签优先级 #xf…
目录重要的H标签主要标签h系列标签主要用来做标题。h1到h6 依次缩小。p标签段落。div标签表示大的容器。span:放一些文本。a标签超链接。img标签增加背景图片块级标签和行内标签补充br换行符hr水平线style标签优先级 !important 绝对优先文本标签重要的H标签
主要标签
h系列标签主要用来做标题。h1到h6 依次缩小。
!DOCTYPE html
htmlheadmeta charsetUTF-8title/title/headbodyh11/h1h21/h2h31/h3h41/h4h51/h5h61/h6/body
/html
运行结果
p标签段落。
p 元素会自动在其前后创建一些空白段间距。浏览器会自动添加这些空间您也可以在样式表中规定。
!DOCTYPE html
htmlheadmeta charsetUTF-8title/title/headbodypp 元素会自动在其前后创建一些空白。浏览器会自动添加这些空间您也可以在样式表中规定。/ppp 元素会自动在其前后创建一些空白。浏览器会自动添加这些空间您也可以在样式表中规定。/ppp 元素会自动在其前后创建一些空白。浏览器会自动添加这些空间您也可以在样式表中规定。/ppp 元素会自动在其前后创建一些空白。浏览器会自动添加这些空间您也可以在样式表中规定。/ppp 元素会自动在其前后创建一些空白。浏览器会自动添加这些空间您也可以在样式表中规定。/p/body
/html https://blog.csdn.net/hanhanwanghaha宝藏女孩 欢迎您的关注 欢迎关注微信公众号宝藏女孩的成长日记 让这个可爱的宝藏女孩在努力的道路上与你一起同行 如有转载请注明出处如不注明盗者必究 div标签表示大的容器。
标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具并且不使用任何格式与其关联。
如果用 id 或 class 来标记 那么该标签的作用会变得更加有效。
注意 Div span两个标签没有特殊的功能只是作为一个内容容器但使用频率很高主要与CSS配合使用。 Div块标签(它会独占一行主要用于布局)
!DOCTYPE html
htmlheadmeta charsetUTF-8title/title/headbodydiv idooo周杰伦的情歌不只有RB《彩虹》就是证明。/divdiv idooo周杰伦的情歌不只有RB《彩虹》就是证明。/divdiv idooo周杰伦的情歌不只有RB《彩虹》就是证明。/divdiv idooo周杰伦的情歌不只有RB《彩虹》就是证明。/div/body
/html
运行结果
span:放一些文本。
Span:行内标签(不会独占一行) 标签被用来组合文档中的行内元素。 注意span 没有固定的格式表现。当对它应用样式时它才会产生视觉上的变化。
!DOCTYPE html
htmlheadmeta charsetUTF-8title/title/headbodyspan 哪里有彩虹告诉我能不能把我的愿望还给我为什么天这么安静所有的云都跑到我这里有没有口罩一个给我释怀说了太多就成真不了也许时间是一种解药/spanspan 也是我现在正服下的毒药看不见你的笑 我怎么睡得着你的声音这么近我却抱不到没有地球太阳还是会绕没有理由我也能自己走你要离开 我知道很简单你说依赖 是我们的阻碍/spanspan就算放开 但能不能别没收我的爱当作我最后才明白有没有口罩一个给我释怀说了太多就成真不了也许时间是一种解药也是我现在正服下的毒药看不见你的笑 我怎么睡得着/span/body
/html
运行结果
a标签超链接。
页面的切换一个网站一般由很多个页面组成这些页面之间的切换是通过超链接来完成的。超链接可以链接到站点内部的页面也可以链接到外面站点的页面。如果要链接到站点下面某个子目录里面的文件需要加上路径的名称。如果要从当前页面链接到上一级目录里面的页面需要用到…/ 表示回到上一级目录如果还有再上一级 …/…/在新的页签打开页面需要给a标签添加一个target属性。_blank新页签打开。_parent在父窗口打开。 _self:表示在当前窗口打开默认。_top:在顶层窗口打开。在网页中添加一个锚点给这个锚点取一个name属性 就可以在其他地方添加一个锚点链接点击链接就可以打开一个页面的指定的锚点。 注意锚点所在的位置前面和后面都要有距离。mailto:后面跟上一个邮箱地址当点击链接的时候会自动打开发邮件的软件前提是你的电脑已经安装了发邮件的软件。 a href“javascript:void(0);”点击我 /a 这种写法就屏蔽了a标签默认的行为链接。就相当于是一个独立的按钮。
例如
!DOCTYPE html
htmlheadmeta charsetUTF-8title/title/headbodya hrefhttp://www.qq.com腾讯(外部站点)/aa hrefindex.html首页(内部站点)/a !--我在同级目录中有index.html--a hrefadmin/login.html登录/a!--某个文件夹下的子目录--a hrefhttp://www.qq.com target_blank打开新的页签访问腾讯(外部站点)/a !--在新标签页打开外部站点--a href#aa去购买住房/a !--链接到其他的锚点--a hrefmailto:123qq.com123qq.com/a!--自动打开发邮件的软件--a hrefjavascript:void(0);点击我/a !--独立按钮--div styleheight: 2600px; background-color: seagreen;/diva nameaa住房层/adiv styleheight: 2600px; background-color: red;/div/body
/html
这个不好演示你去运行一下就知道啦
img标签增加背景图片
比如说我在同级目录img下面增加了一张图片 !DOCTYPE html
htmlheadmeta charsetUTF-8title/title/headbodyimg srcimg/dog.jpg alt这是alt内容 title这是一张背景图片/!--通过img标签在网页中加入一张图片。title当鼠标移动到图片上的时候显示title里面的文字内容。alt当图片加载失败的时候显示alt属性中的内容。table / form --/body
/html
运行效果 当图片加载错误的时候回提示
块级标签和行内标签
任何一个标签都相当于一个容器。不管是块级的还是行内的都可以通过display这个属性去设置它。 块级元素独占一行div p ul 块级元素可以设置它的宽高。 行内元素都排在一行一行排满之后再从第二行开始排列。span a 行内元素不能设置它的宽高设置了宽高也没有效果。 注意行内元素如果设置了浮动属性也可以对它设置宽高。
eg: Div块标签(它会独占一行主要用于布局) Span:行内标签(不会独占一行)
块标签与行内标签的区别
块标签独占一行宽度默认为100% 行内标签多个并排一行宽高为内容大小。
行内元素和块级元素是可以相互转换的。 display: inline; 这个元素就是行内元素。 display: block; 这个元素就是一个块级元素。
例如看下面的代码来理解
!DOCTYPE html
htmlheadmeta charsetUTF-8title/titlestyle typetext/css#box1{width: 200px;height: 100px;background-color: red;display: inline;}#box2{width: 200px;height: 150px;background-color: salmon;display: inline;}span{display: block;}/style/headbodydiv idbox1我是/divdiv idbox2周杰伦/divspan我是行内元素但display: block了/spanspan我是行内元素但display: block了/spanspan我是行内元素但display: block了/spanspan我是行内元素但display: block了/spanspan我是行内元素但display: block了/spanspan我是行内元素但display: block了/spanspan我是行内元素但display: block了/spanspan我是行内元素但display: block了/span/body
/html
运行结果
补充
br换行符
htmlheadmeta charsetutf-8title/title/headbodyp宝藏女孩的成长日记/pbr标签是单标签意味着它没有结束标签因此这是错误的!-- br/br --p宝藏女孩的成长日记/p/body
/html
运行结果
hr水平线
!DOCTYPE html
htmlheadmeta charsetutf-8title/title/headbodyp宝藏女孩的成长日记/phr!-- 我是一条水平线 --p宝藏女孩的成长日记/p/body
/html style标签
定义和用法 style标签用于为 HTML 文档定义CSS样式。
!DOCTYPE html
htmlheadmeta charsetutf-8title/titlestyle typetext/cssp{background-color: #FFDD33;}/style/headbodyp stylebackground-color: #FFC0CB;宝藏女孩的成长日记/phr!-- 我是一条水平线 --p宝藏女孩的成长日记/p/body
/html
这个就会引入一个优先级的知识
优先级 !important 绝对优先
CSS优先级!important 行内样式 id选择器 类选择器 标签选择器
!DOCTYPE html
htmlheadmeta charsetutf-8title/titlestyle typetext/cssp{background-color: #FFDD33 !important;}/style/headbodyp stylebackground-color: #FFC0CB;宝藏女孩的成长日记/phr!-- 我是一条水平线 --p宝藏女孩的成长日记/p/body
/html 文本标签
b标签和 strong标签 b strong标签呈现粗体文本效果。 就这样记嘛b是big的缩写 s是strong的缩写
i标签和 em 标签 i em标签告诉浏览器把其中的文本表示为强调的内容。对于所有浏览器来说这意味着要把这段文字用斜体来显示。
small标签 small标签呈现小号字体效果。
注意如果被包围的字体已经是浏览器所支持的最小字号那么 标签将不起任何作用。
big标签 标签呈现大号字体效果。
u标签 u标签可定义下划线文本。
del标签 del定义文档中已被删除的文本。
sub标签 sub 定义文档中的下标文本。
sup标签 sup定义文档中的上标文本。
https://blog.csdn.net/hanhanwanghaha一个超级无敌可爱的人鸭 欢迎您的关注 欢迎关注微信公众号宝藏女孩的成长日记 创作不易如有转载请注明出处
