Web基础_HTML(二):基础类标签

1.<!DOCTYPE>
(1)<!DOCTYPE>声明不是HTML标签,它是指示web浏览器关于页面使用哪个html版本进行编写的指令,简单的说就是定义文档类型。
ps:虽然有的时候不写这个标签并不影响运行,但是还是要养成一个好习惯,向html文档添加<!DOCTYPE>声明,这样浏览器方便获知文档的类型。
(2)使用的时候要注意这个声明必须在html类型文件的第一行,在<html>标签之前。
(3)一般html标签都有开始和结束标签,但是<!DOCTYPE>声明是没有结束标签的(<!DOCTYPE>非HTML标签),而且<!DOCTYPE>声明对大小写也不敏感。
2.<html>
用于定义html文档,通俗地说就是用来告诉浏览器其自身是一个html文档的。<html>中应包含文档的头部和主体两部分,其中头部是由<head>标签定义的,主体是由<body>标签定义的。

<html>
    <head>
    <title>第一个HTML页面</title>
    </head>    
    <body>
    <p>body元素的内容会显示在浏览器中。</p>
    <p>title元素的内容会显示在浏览器的标题栏中。</p>
    </body>
 </html>

3.<br/> title是标题的意思,所以这个标签顾名思义就是定义文档标题的。当我们把文档放入收藏夹或者书签的时候,标题就成为该文档链接的默认名称,<br/> 一般浏览器的标题栏和状态栏上显示的内容也是该元素中的文本内容。<br/> 以下是<title>的三个标准属性。<br/> ①dir 可取值为"rtl"、“ltr” ,起到规定元素中内容的文本方向。<br/> ps:尝试了一下,分别对<title>应用后,效果是一样的。<br/> ②lang 取值为language_code(比如英文就是en),起到规定元素中内容的语言代码。<br/> ps:这个还是蛮常见的。<br/> ③xml:lang取值为language_code(比如英文就是en),用于规定 XHTML 文档中元素内容的语言代码。<br/> 4.<br/> 定义文档的主体。标签中包含文档的所有内容,例如文本、超链接、图象、表格和列表等等。<br/> 以下是的6个属性,但是都可以被CSS样式取代,所以也不太推荐使用了。<br/> ①alink,规定文档中活动链接(active link)的颜色;<br/> 使用:<br/> ps:当链接被点击时,该链接就处于活动状态。<br/> Apply:

	<html>
    <head>
        <meta charset="UTF-8">
        <title lang="en">body中alink属性</title>
    </head>
	<body alink="pink">
	<p><a href="http://www.baidu.com">百度一下</a></p>
	<p>点击“百度一下”,超链接会变成设置的颜色,然后本页面自动跳转到百度首页</p>
	<p>ps:在 HTML 4.01 中,不赞成使用 body 元素的 alink 属性;在 XHTML 1.0 Strict DTD 中,不支持 body 元素的 alink 属性。</p>
	</body>
	</html>

②background,规定文档的背景图像;
使用:<body background="value">
URL可能取值为绝对URL和相对URL。
1.绝对URL:指向另一个站点
2.相对URL:指向站点内的某个文件
ps:如果存储在本地中非站点内的图象文件不能被引用,必须是站内点的某个文件(就是在创建项目的目录下)或者指向其他的站点。

		<!DOCTYPE>
		<html>
		<head>
			<meta charset="UTF-8">
			<title>body标签中的background属性</title>
		</head>
		<body background="timg.jpg">
		<p>相对引用</p>
		<p>在HTML 4中background属性已废弃,HTML 4.01 Strict DTD或 XHTML 1.0 Strict DTD不支持,可以使用CSS代替。</p>
		</body>
		</html>

③bgcolor,规定文档的背景颜色。
使用:<body bgcolor="color_name|hex_number|rgb_number">
color_name:如"red"
hex_number:如"#ff0000"
rgb_number:如"(0,100,100)"

<!DOCTYPE>
		<html>
		<head>
			<meta charset="UTF-8">
		<title>body标签中的bgcolor属性</title>
		</head>
			<body bgcolor="#afeeee">
			<p><strong>注意:</strong>如果使用颜色名,不同浏览器的渲染结构不一样,如果使用RGB代码,火狐浏览器无法显示正确颜色。</p>
			<p><strong>提示:</strong> 如果所有浏览器要显示相同颜色,要使用十六进制的颜色代码。</p>
			<p>但是,在HTML 4中bgcolor属性已废弃,HTML 4.01 Strict DTD或 XHTML 1.0 Strict DTD已不支持该属性,可以使用CSS替代。</p>
			</body>
</html>

④link,规定文档中未访问链接的默认颜色;
使用:<body link="color_name|hex_number|rgb_number">
⑤text,规定文档中所有文本的颜色;
使用:<body text="color_name|hex_number|rgb_number">
⑥vlink,规定文档中已被访问链接的颜色。
<body vlink="color_name|hex_number|rgb_number">

<!DOCTYPE html>
		<html>
		<head> 
		<meta charset="utf-8"> 
		<title>body标签link、text、vlink属性</title> 
		</head>
		<body vlink="yellow"  bgcolor="#ffffe0" text="gray" link="green">
		<p><a href="http://www.w3cschool.cn">W3Cschool</a></p> 
		<p><a href="http://www.w3cschool.cn/html/">HTML 教程</a></p>
		<p><b>注意:</b> 如果使用颜色名,不同浏览器的渲染结构不一样,如果使用RGB代码,火狐浏览器无法显示正确颜色。</p>
		<p><b>提示:</b>如果所有浏览器要显示相同颜色,要使用十六进制的颜色代码。</p>
		<p>但是,在HTML 4中vlink/text/link属性已废弃,HTML 4.01 Strict DTD或 XHTML 1.0 Strict DTD已不支持该属性,可以使用CSS替代。</p>
		</body>
		</html>

5.<h1><h2>...<h6>
定义标题。
ps:HTML5不支持align属性。
6.<p>
定义段落。
ps:<p>标签和<br>标签都能换行,但是不同的地方在于前者换行是段落间的换行,而<br>是小换行。
7.<hr>
定义水平线,没有结束标签。一共有align、noshade、size、和width四个属性,不过HTML5已经不支持了。

  • align:规定水平线的对齐方式;

  • noshade:规定水平线的颜色为纯色而不是有阴影的颜色,noshade属性是一个布尔属性。

  • eg:<hr><hr noshade>效果是不一样的.
    size:规定水平线的高度;

  • eg:<hr size="30">,30是像素值。
    width:规定宽度。

  • eg:<hr width="100">,100是像素值。
    <hr width="50%">,可以用空间的百分比计的宽度也可以用以像素计的宽度。

8.<br>
定义简单的折行,该标签为空标签,也就是说没有结束标签,使用该标签的效果就是开始新的一行。
9.<!--...-->
注释.
Apply:

	<!DOCTYPE>
	<html>
	<head>
    <meta charset="UTF-8">
    <title>body标签中的bgcolor属性</title>
	</head>
	<body>
        <p>这里是p标签,顺便说明一下h1-h6一共有6个标签</p>
        <h1 align="right">h1标签  align属性为right</h1>
        <h2 align="left">h2标签  align属性为left</h2>
        <h3 align="center">h3标签  align属性为center</h3>
        <h4>h4标签1 未设置align属性</h4>
        <h5>h5标签 未设置align属性</h5>
        <h6>h6标签 未设置align属性</h6>
        <hr>
        <b>加粗文本</b><br><br>
        <i>斜体文本</i><br><br>
        <code>电脑自动输出</code><br><br>
        这是 <sub> 下标</sub><sup> 上标</sup>
		<strong>粗体强调,比那个b语气要强烈</strong><br>
        <em>听说这是倾斜强调,和i倾斜标签不同的是,该标签不仅仅形式上倾斜,语义上也进行强调,</em><br>
        <u>下换线文本</u><br>
        <s>删除线文本</s>
    </body>
	</html>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值