Web标准_HTML标签（h,p,meta,font,hr,BUIS,strong，em，del，dody，img）和他们的属性_属性书写规则_绝对路径与相对路径_Unit_1;

最新推荐文章于 2022-01-08 23:14:57 发布

内涵是一种信仰

最新推荐文章于 2022-01-08 23:14:57 发布

阅读量1.1k

点赞数

分类专栏：基于黑马传智 HTML

本文链接：https://blog.csdn.net/qq_38053395/article/details/80995303

版权

基于黑马传智同时被 2 个专栏收录

25 篇文章 0 订阅

订阅专栏

HTML

16 篇文章 0 订阅

订阅专栏

Topic 1 : 前端标准

Web前端技术指的不是某一项技术，是一系列技术的集合，主要包括：

1、结构标准 -- html -- 作用：页面结构的搭建（骨骼的搭建）

2、样式标准 -- css -- 作用：页面样式的搭建，外观、美化作用

3、行为标准 -- JavaScript -- 作用：负责页面的行为、动作

总结web前端标准作用：制作网页

Topic 2：HTML的标签

我们学习 html 其实就是学习标签；

这个就跟我们学习 JavaSE 就是学习类一样；

标签的书写规范：

1、标签名称必须书写到一对英文状态的尖括号里面；

2、标签有的需要成对出现（双标记），有的不需要成对出现（单标记）

区分单双标记：需要划分选区使用双标记，不需要划分选区则是单标记

3、区分首尾，结束标签比开始标签多一个关闭符号

标题标签： h

h1-h6，一共6级

h1主标题，一个页面只能使用1次，通常会将logo放到h1中

h2副标题，一个页面通常使用2次

h3-h6 没有次数的限制

段落标签： p

代码如下：

<head>        
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
	<!-----这个是标题标签------>
	<h1>我是标题一（主标题）在文件中只能出现一次  那么在公司在就是放最重要的东西 就是公司的logo</h1>
	<h2>我是标题二（副标题）一般只出现两次</h2>
	<h3>标题三 我以后几乎没有次数的限制了 （三级标题）</h3>
	<h6>我是标题六 我们html就只有6级标题</h6>
	<!-----这个是段落标签------>
	<p> 这个就是段落 </p>
	<p> 每一段就用一个标签 就会变成一段<p>
</head>

注意：我们要给用户看的东西都要往<body></body>里面放；

我们要给浏览器看的东西都要往<head></head>里面存放（这里面的用户只能看到title）；

具有选区功能就是标签，需要划分选区就是用双标签了；

属性书写规则

任何一门语言书写属性的时候都要遵循键值对规则，不同的语言的键值对规则也不相同。

html属性键值对规则：K=“V”，各个键值对之间用空格隔开

注意：html属性是书写在开始标签的标签名称后面，且标签名称和属性之间也空格隔开

控制文字样式

颜色 -- color

字号 -- size，最大值为7，将来可以用css更灵活控制字号

字体 -- face

meta 标记：

他是一个单标记；

seo是搜索引擎优化：

主要设置关键字和描述：

对应搜索引擎的关键字；

<metaname="keywords" content="网页平面设计，代码课程" />

对应搜索引擎的描述；

代码如下：

<!----规定文档的dtd格式  就是规定浏览器以那种html语言来解析----->
<!doctype html 5>
<html>
<head>
<!----这个就是设置了编码集  编码集为UTF-8国际码----->	
<meta charset="utf-8">	
<meta name="keywords" content="网页平面设计，代码课程" />
<meta name="description" content="传智播客网页平面学院，包括设计课程有ps，ai" />

<title>wang_File</title>
</head>

<body>
	<h1>啊哈哈</h1>
</body>
</html>

编码集说明它对应的就是charset：

1、国际码：utf-8/u8，集成了所有已经被认证的国家的语言，体积大，下载速度稍慢

2、国家码：gbk/gb2312/gb18030，集成中文和英文

Topic 3：HTML一个小练习；

要实现如下图的样式：

代码如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Practice</title>
</head>

<body>
	<font color="red">我要成为一个<font size="7" >优秀</font>的全栈工程师</font>
	<hr size="10" color="green" width="50%" align="left"/>
	<h1 align="center">我是一个不甘于平凡的菜鸡</h1>
	<h3>我是一个不甘于平凡的菜鸡</h3>
	<h6>我是一个不甘于平凡的菜鸡</h6>
</body>
</html>

说明：

hr --是水平分割线

每个标签都有他对应的属性不同的标签的属性是不能乱用的；

align 属性是对齐方式 width 是宽度

Topic 4：BUI标签；

代码如下：

代码里面都解释了

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>

<body>
    <!----这三个的语义比较弱----->
    <p><b>加粗</b></p>
    <p><u>下划线</u></p>
    <p><i>倾斜</i></p>
    <p><s>删除线 就是中划线</s></p>
    <!----具有加强语义的------>
    <p><strong>具有加强语义的加粗</strong></p>
    <p><em>具有加强语义的i</em></p>
    <p>没有具有加强语义的u，因为下划线一般都是使用css里面的</p>
    <p><del>删除线 就是中划线</del></p>
</body>
</html>

注意：

标签都有自身的语义但是BUI和S语义并不是最强的；

strong，em，（u没有对应加强语义的），del；

语义都是给浏览器看到；

Topic 4：body属性

代码如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>body属性</title>
</head>
<!-----我们在为浏览器添加背景的时候呢  我们要加上后缀名  在一个文件夹里的时候我们可以直接洗图片的全称就好了 不用考虑路径-------->
<!-----背景图片是与背景颜色共存于浏览器上的  只不过我们的背景图片在上面所以你就看不见背景颜色了  ------>
<!-----背景图片在浏览器显示时候是不占位置的  所以后面的文字会在背景图片之上---->
<body bgcolor="red" background="bgImage.jpg">  <font size="7">我是测试背景图片</font>
	
</body>
</html>

Topic 5：img 标签

他是单标记：

插入图片：

代码如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>ImgPractice</title>
</head>

<body>
	<strong>正常显示的图片<br/></strong>
	<img src="hashiqi.jpg"/><br>

	<strong>等比缩放的图片<br/></strong>
	<img src="hashiqi.jpg"  width="102" height="52"/><br/>
	
	带边框的<br/>
	<img src="hashiqi.jpg" border="10" /><br/>
	
	拉伸的图片<br>
	<!-----注意你的height单词别拼错了  你这次拼错了害的我检查了好长时间------->
	<img src="hashiqi.jpg" border="10" width="500" height="800"/><br>

	替换文本<br>
	<!----这个替换文本只有在你的图片加载不出来（或者不存在）的时候  他才有用的------>
	<img src = "hashiqi1.jpg" border = "5" alt = "替换文本" /><br>
        
        提示文本<br>
        <!-----它实现的作用就是当你的鼠标放到图片上面的时候  会提示title里面的内容   也与seo优化有关系----->
        <img src="hashiqi.jpg" border = "5" title = "这是最逗比的一条狗" />  
   
</body>
</html>