欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

HTML(一)行内元素&块级元素

程序员文章站 2022-03-12 20:00:44
HTML-标签总结行内元素a标签:超链接标签,双标签,常用标签属性href:指定打开的页面;锚点;target:用于指定在哪个窗口打开href标签属性指定的页面,常用属性值有_self 、_blank 等;百度一下 在新的网页标签打开百度一下 在本页网页打开....

 HTML-标签总结

行内元素

b标签:粗体,双标签

HTML(一)行内元素&块级元素HTML(一)行内元素&块级元素

i标签:斜体,双标签

HTML(一)行内元素&块级元素

HTML(一)行内元素&块级元素
a标签:超链接标签,双标签,常用标签属性

href:指定打开的页面;锚点;

target:用于指定在哪个窗口打开href标签属性指定的页面,常用属性值有_self 、_blank 等;

		<a href="http://www.baidu.com"target="_blank">百度一下</a> 在新的网页标签打开
		<a href="http://www.baidu.com">百度一下</a> 在本页网页打开


img标签:图片标签,单标签,常用标签属性

  1. src:设置图片路径
  2. alt:设置图片不存在时替代文本,该属性的显示效果与浏览器以及浏览器版本有关
  3. height和width:设置图片的高度和宽度,单位为像素或%
  4. title:设定鼠标移到元素上时显示的信息
		<img src="img/sexy_girl.gif" title="搞笑" alt="这是一个美女" />
  •  注意
  1. 任何标签都有title属性,它不是img标签特有的
  2. img标签中src和alt标签属性不能省略

span标签:常用于组合文档中的行内元素,双标签

  • 注意

 

  1. span标签没有固定的格式表现,只有对它应用CSS样式时才会产生视觉上的变化
  2. 推荐使用 <span> 来组合行内元素,以便通过样式来格式化它们

块级元素


div标签:常用于文档中分区,双标签

		<div style="border: black 1px solid;">shima</div>

HTML(一)行内元素&块级元素


p标签:段落标签,双标签,常用标签属性

  • align:设定文本显示的位置,属性值如下
描述
left 把文本排到左边
right 把文本排到右边
center 把文本排列中间
justify 实现两端对齐文本效果

 

 

 

 

 

 

  • 不建议使用align标签属性,推荐使用text-align样式属性代替,该样式属性常用值如下
描述
left 把文本排到左边.默认值,有浏览器决定
right 把文本排到右边
center 把文本排列中间
justify 实现两端对齐文本效果
inherit 从父元素继承text-aligh属性的值

 

 

 

 

 

 

 

hn标签:标题标签,双标签,n的值为1~6,其中<h1></h1> 定义最大的标题;<h6></h6> 定义最小的标题,常用标签属性

		<h1>郑州大学</h1>
		<h2>郑州大学</h2>
		<h3>郑州大学</h3>
		<h4>郑州大学</h4>
		<h5>郑州大学</h5>
		<h6>郑州大学</h6>

HTML(一)行内元素&块级元素

  • align:设定文本显示的位置,但不建议使用该align属性,推荐使用text-align样式代替,其使用方法和值参见p标签

ol标签:有序列表标签,双标签,常用标签属性

		<ol type="A" start="3">
			<li>语文</li>
			<li>数学</li>
			<li>英语</li>
		</ol>
描述
1 数字,默认值
A 大写字母
a 小写字母
I 大写罗马数字
i 小写罗马数字
  1. type:指定ol子标签li的编号类型,其属性值有(如上表示)
  2. start:指定ol子标签li序号起始点,默认为1,必须为整形数字
  3. reversed:HTML5新增标签属性,用于设定列表顺序为降序,其属性值为reversed

ul标签:无序列表标签,双标签,常用标签属性

		<ul type="square">
			<li>语文</li>
			<li>数学</li>
			<li>英语</li>
		</ul>
  • type:指定ul子标签li的编号类型,其属性值有 
描述
disc 实心圆,默认值
square 实心方块
circle 空心圆

本文地址:https://blog.csdn.net/ArcsinTao/article/details/107348241

相关标签: HTML html