Html基本标签与CSS样式基本使用

最新推荐文章于 2022-06-12 01:27:45 发布

陈皮小桔

最新推荐文章于 2022-06-12 01:27:45 发布

阅读量1.2k

点赞数

分类专栏：学习笔记

学习笔记专栏收录该内容

14 篇文章 0 订阅

订阅专栏

一、HTML语言

1、什么是HTML语言

HTML（英文Hyper Text Markup Language的缩写）中文译为“超文本标签语言”，主要是通过HTML标签对网页中的文本、图片、声音等内容进行描述。

标签：标记的意思，在日常生活中，我们也经常会见到一些标记，例如交通规则的标记，告诉你应该怎样走。

而这里的标签就是告诉浏览器，在网页上显示什么内容，例如图片，文字，视频等。

文本：文字，那么什么是”超文本“，不仅可以显示文字，而且可以显示出图片，视频等，并且可以对文字，图片加上链接（所谓链接，就是单击一下，可以打开别的页面。）。

2、网页创建

了解了什么是HTML以后，怎样使用HTML编写网页呢？

先创建一个记事本文件，然后重命名，格式为.html。用记事本工具编写，比较麻烦，这里可以写一个标记，演示一下，同时也说清楚了什么是标记。

我们可以用一下其它的工具来编写，提供相应的代码提示。

2.1 常用工具

2.2 Html基本结构

说明：
1、<html>标签的作用是所有HTML中标签的一个根节点。
2、<head> 头部标签，在头部标签中我们必须设置的标签是<title>标签
3、<title> 标签设置网页的标题
4、<body> 页面在的主体部分，用于存放所有的HTML标签

这个结构要记住。

注意：在使用sublime进行演示时，最开始敲完后不要敲回车键，否则会自动填充整个代码。

通过整个HTML结构我们可以看出来，标签之间都是有关系的。

在里面，而和是并列的。

2.3 标签关系

标签的相互关系就分为两种：

1.嵌套关系

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

2.并列关系

<head></head>
<body></body>

建议：如果两个标签之间的关系是嵌套关系，子元素最好缩进一个tab键的身位。如果是并列关系，最好上下对齐。

我们发现在手敲上面的代码的时候，会比较麻烦，所以可以如下的快速输入方式：

再页面中输入 以下2个单词

1. html: 5   
2. !
      在sublime里面然后按下tab键盘即可生成HTML骨架

参考地址：http://www.runoob.com/css/css-rwd-viewport.html

2.4 文档类型<!DOCTYPE>

<!DOCTYPE html>

这句话就是告诉我们使用哪个html版本？我们使用的是 html 5 的版本。 html有很多版本，那我们应该告诉用户和浏览器我们使用的版本号。

2.5 字符集

utf-8是目前最常用的字符集编码方式，常用的字符集编码方式还有gbk和gb2312。

gb2312 简单中文包括6763个汉字

BIG5 繁体中文港澳台等用

GBK包含全部中文字符是GB2312的扩展，加入对繁体字的支持，兼容GB2312

UTF-8则包含全世界所有国家需要用到的字符

记住一点，以后我们统统使用UTF-8 字符集, 这样就避免出现字符集不统一而引起乱码的情况了。

二、HTML常用标签

我们学习HTML，最主要的就是用来学习标签

1、排版标签

排版标签主要和css搭配使用，显示网页结构的标签，是网页布局最常用的标签。

1.1 标题标签 (熟记)

我们经常会在页面中用到标题标签，HTML提供了6个等级的标题，即

、

和

用来修饰网页的主标题，

表示一个段落的标题，

表示段落的小节标题

标题标签语义：  作为标题使用，并且依据重要性递减

其基本语法格式如下：

<hn>   标题文本   </hn>

H1标签最常见的使用方法是用在logo上，如果我们要把H1标签使用在logo上，那么我们记得为图片添加alt标签以及a链接来指向首页，因为蜘蛛是无法识别图片的，所以我们要用alt标签来解释图片的意思。

1.2 段落标签( 熟记)

单词缩写： paragraph 段落

在网页中要把文字有条理地显示出来，离不开段落标签，就如同我们平常写文章一样，整个网页也可以分为若干个段落，而段落的标签就是

<p>  文本内容  </p>

是HTML文档中最常见的标签，默认情况下，文本在一个段落中会根据浏览器窗口的大小自动换行。

1.3 水平线标签(认识)

单词缩写： horizontal 横线

在网页中常常看到一些水平线将段落与段落之间隔开，使得文档结构清晰，层次分明。这些水平线可以通过插入图片实现，也可以简单地通过标签来完成，

就是创建横跨网页水平线的标签。其基本语法格式如下：

<hr />是单标签

在网页中显示默认样式的水平线。建议在hr与/之间加上空格。

1.3.1 标签属性

属性就是特性比如手机的颜色手机的尺寸，总结就是手机的。。

使用HTML制作网页时，如果想让HTML标签提供更多的信息，可以使用HTML标签的属性加以设置。其基本语法格式如下：

<标签名 属性1="属性值1" 属性2="属性值2" …> 内容 </标签名>

在上面的语法中，

1.标签可以拥有多个属性，必须写在开始标签中，位于标签名后面。

2.属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。

3.任何标签的属性都有默认值，省略该属性则取默认值。

比如:

<hr width="400" />

1.4 HTML标签分类

在HTML页面中，带有“< >”符号的元素被称为HTML标签，如上面提到的 HTML、head、body都是HTML标签。所谓标签就是放在“< >” 标签符中表示某个功能的编码命令，也称为HTML标签或 HTML元素

1.双标签

<标签名> 内容 </标签名>

该语法中“<标签名>”表示该标签的作用开始，一般称为“开始标签（start tag）”，“</标签名>” 表示该标签的作用结束，一般称为“结束标签（end tag）”。和开始标签相比，结束标签只是在前面加了一个关闭符“/”。

比如 <body>我是文字  </body>

2.单标签

<标签名 />

单标签也称空标签，是指用一个标签符号即可完整地描述某个功能的标签。

1.5 换行标签(熟记)

单词缩写： break 打断 ,换行

在HTML中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后自动换行。如果希望某段文本强制换行显示，就需要使用换行标签

<br />

这时如果还像在word中直接敲回车键换行就不起作用了。

1.6 div span标签(重点)

div span 是没有语义的是我们网页布局主要的2个盒子

div 就是 division 的缩写分割，分区的意思其实有很多div 来组合网页。

div是块级元素，都是独占一行。

span, 跨度，跨距；范围

span都是行内元素，都是在一行，主要用来展示文本。

语法格式：

<div> 这是头部 </div>    <span>今日价格</span>

2、HTML标签的语义化

白话：所谓标签语义化，就是指标签的含义。

为什么要有语义化标签

方便代码的阅读和维护
同时让浏览器或是网络爬虫可以很好地解析，从而更好分析其中的内容
使用语义化标签会具有更好地搜索引擎优化，搜索引擎会认为权重比较高。

核心：合适的地方给一个最为合理的标签。

3、文本格式化标签(熟记)

在网页中，有时需要为文字设置粗体、斜体或下划线效果，这时就需要用到HTML中的文本格式化标签，使文字以特殊的方式显示。

b i s u 只有使用没有强调的意思 strong em del ins 语义更强烈

4、图像标签img (重点)

单词缩写： image 图像

HTML网页中任何元素的实现都要依靠HTML标签，要想在网页中显示图像就需要使用图像标签，接下来将详细介绍图像标签以及和他相关的属性。其基本语法格式如下：

该语法中src属性用于指定图像文件的路径和文件名，他是img标签的必需属性。

<img src="图像URL" />

三、路径(重点、难点)

实际工作中，通常新建一个文件夹专门用于存放图像文件，这时再插入图像，就需要采用“路径”的方式来指定图像文件的位置。

路径可以分为：相对路径和绝对路径

1、相对路径

图像文件和HTML文件位于同一文件夹：只需输入图像文件的名称即可，如img src=“logo.gif” /。
图像文件位于HTML文件的下一级文件夹：输入文件夹名和文件名，之间用“/”隔开，如img src=“img/img01/logo.gif” /。
图像文件位于HTML文件的上一级文件夹：在文件名之前加入“…/” ，如果是上两级，则需要使用 “…/ …/”，以此类推，如img src="…/logo.gif" /。

2、绝对路径

绝对路径

“D:\web\img\logo.gif”，或完整的网络地址，例如“http://www.itcast.cn/2018czgw/images/logo.png ”。

四、链接标签(重点)

单词缩写： anchor 的缩写。基本解释锚, 铁锚的

在HTML中创建超链接非常简单，只需用标签环绕需要被链接的对象即可，其基本语法格式如下：

<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>

href：用于指定链接目标的url地址，当为标签应用href属性时，它就具有了超链接的功能。 Hypertext Reference的缩写。意思是超文本引用

target：用于指定链接页面的打开方式，其取值有self和blank两种，其中self为默认值，blank为在新窗口中打开方式。

注意：

1.外部链接需要添加 http:// www.baidu.com

2.内部链接直接链接内部页面名称即可比如 < a href=“index.html”> 首页

3.如果当时没有确定链接目标时，通常将链接标签的href属性值定义为“#”(即href="#")，表示该链接暂时为一个空链接。

4.不仅可以创建文本超链接，在网页中各种网页元素，如图像、表格、音频、视频等都可以添加超链接。

1、base 标签

base 可以设置整体链接的打开状态

base 写到之间

2、锚点定位（难点）

通过创建锚点链接，用户能够快速定位到目标内容。
创建锚点链接分为两步：

1.使用“a href=”#id名>“链接文本"创建链接文本。

2.使用相应的id名标注跳转目标的位置。

1.6 div span标签(重点)

div span 是没有语义的是我们网页布局主要的2个盒子

div 就是 division 的缩写分割，分区的意思其实有很多div 来组合网页。

div是块级元素，都是独占一行。

span, 跨度，跨距；范围

span都是行内元素，都是在一行，主要用来展示文本。

语法格式：

<div> 这是头部 </div>    <span>今日价格</span>

五：CSS样式

1、CSS初识

CSS(Cascading Style Sheets)

CSS通常称为CSS样式表或层叠样式表（级联样式表），主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。

CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。

2、CSS 网页的美容师

CSS的出现，拯救了混乱的HTML，当让更加拯救了我们web开发者。让我们的网页更加丰富多彩。

CSS的最大贡献就是：让 HTML 从样式中解脱苦海，实现了 HTML 专注去做结构呈现。而样式交给 CSS 后，你完全可以放心的早点洗洗睡了！

3、CSS样式规则

使用HTML时，需要遵从一定的规范。CSS亦如此，要想熟练地使用CSS对网页进行修饰，首先需要了解CSS样式规则，
4:选择器（重点）

要想将CSS样式应用于特定的HTML元素，首先需要找到该目标元素。在CSS中，执行这一任务的样式规则部分被称为选择器（选择符）。

4.1 标签选择器（元素选择器）

标签选择器是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。其基本语法格式如下：

标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }  或者
元素名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

标签选择器最大的优点是能快速为页面中同类型的标签统一样式，同时这也是他的缺点，不能设计差异化样式。

4.2 类选择器

类选择器使用“.”（英文点号）进行标识，后面紧跟类名，其基本语法格式如下：

.类名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

 标签调用的时候用 class=“类名”  即可。

类选择器最大的优势是可以为元素对象定义单独或相同的样式。

<!DOCTYPE html>
<html>
<head>
	<title>类选择器</title>
	<style type="text/css">
	.c-apple {color: red;}
	.banana { color: blue; }
    #blue { color:blue; }    
	</style>
</head>
<body>
   <p class="c-apple">苹果</p>
   <p class="banana">橘子</p>
    <p class="c-apple">香蕉</p>
    <p id="blue">菠萝</p>
</body>
</html>

4.3 选择器命名规范

1.长名称或词组可以使用中横线来为选择器命名。
2.不建议使用“_”下划线来命名CSS选择器。

	能良好区分JavaScript变量命名(JS变量命名是用“_”)

3.不要纯数字、中文等命名，尽量使用英文字母来表示。

4.4 ID选择器

id选择器使用“#”进行标识，后面紧跟id名，其基本语法格式如下：

#id名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

该语法中，id名即为HTML元素的id属性值，大多数HTML元素都可以定义id属性，元素的id值是唯一的，只能对应于文档中某一个具体的元素。

用法基本和类选择器相同。

4.5 类选择器与ID选择器区别

在同一个页面内，不允许有相同名字的id对象出现，但是允许相同名字的class。

类选择器（class）好比人的名字，是可以多次重复使用的，比如张伟王伟李伟李娜

id选择器好比人的身份证号码，全中国是唯一的，不得重复。只能使用一次。

id选择器和类选择器最大的不同在于使用次数上。

<style type="text/css">
     .fontSize{
     	font-size: 25px;
     }
     #blue{
     	color: red;
     }
	</style>
</head>
<body>
	<p class="fontSize">张三</p>
	<p class="fontSize">李四</p>
	<p id="blue">王五</p>
	<p id="blue">马六</p>
	<!-- 及时浏览器的兼容性比较好，使用多次id也能够显示，但是坚决不能使用id多次。 -->

</body>
</html>

4.6 案例

制作一个完善的新闻详情页面。

第一步：我们首先通过HTML来进行网页结构的设计

第二：通过CSS样式来进行相应的美化。

在这个案例中，我们会讲解几个关于文本修饰的样式。

text-align: center;  /*让文本居中显示*/
text-indent: 2em; /*首行缩进2个字*/
font-weight: bolder; /* 对文字进行加粗*/

具体案例如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>新闻详情页面</title>
	<style type="text/css">
		h1 {
			font-size: 25px;
			text-align: center;  /*让文本居中显示*/
		}
		div {
			font-size: 14px;
			text-align: center;
		}
		p {
			font-size: 14px;
			line-height: 22px;
			text-indent: 2em; /*首行缩进2个字*/
		}
		.sports{
			color: red;
		}
		.co{
			color:#ccc;
			font-weight: bolder;
		}

	</style>
</head>
<body>
	<h1>中乙队赛前突然换帅仍胜毅腾 高原黑马欲阻击舜天</h1>	
  	<div>2017年07月16日20:11 <span class="sports">新浪体育 评论中大奖</span>（11人参与）<span class="co">收藏本文</span></div>
  	<hr />
    <p>新浪体育讯　7月16日是燕京啤酒[微博]2017中国足协杯第三轮比赛，丽江嘉云昊队主场迎战哈尔滨毅腾队的比赛日。然而就在比赛日中午，丽江嘉云昊队主帅李虎和另外两名成员悄然向俱乐部提出了辞呈，并且收拾行囊准备离开。在这样的情况下，丽江嘉云昊队不得不由此前的教练员杨贵东代理指挥了本场比赛。</p>


<p>在昨日丽江嘉云昊队主帅李虎就缺席了赛前的新闻发布会，当时俱乐部给出的解释是李虎由于身体欠佳，去医院接受治疗。然而今日李虎出现在俱乐部时，向记者否认了这一说法，并且坦言已经向俱乐部提出了辞呈。</p>

<p>据记者多方了解的情况，李虎[微博]极其教练组近来在执教成绩上承受了不小的压力，在联赛间歇期期间，教练组曾向俱乐部提出能够多引进有实力的球员补强球队，然而由于和俱乐部在投入以及成绩指标上的分歧，李虎最终和教练组一起在比赛日辞职。</p>

<p>这样的情况并没有影响到丽江嘉云昊队[微博]的队员，在比赛中丽江队在主场拼的非常凶，在暴雨之中仍然发挥出了体能充沛的优势，最终凭借点球击败了中超球队哈尔滨毅腾，顺利晋级下一轮比赛。根据中国足协杯的赛程，丽江嘉云昊队将在本月23日迎战江苏舜天队。</p>
    </body>

</body>
</html>

4.8 后代选择器

后代选择器又称为包含选择器，用来选择元素或元素组的后代，其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。

<style type="text/css">
	/*
	div p {
		color: red;
	}
	*/
   .father p span {
	color:blue;

   }

	</style>
</head>
<body>
	<p>张三</p>
	<div>
		<p>王五</p>
	</div>
	<div class="father">
		<p>马六
			<span>啊啊啊</span>
			
		</p>
	
	</div>
</body>

4.9 选择器的优先级

前面，我们学习了，标签选择器，类选择器，ID选择器，后代选择器，那么我们来看一下它们的优先级问题。

1、类选择器优先级高于标签选择器。

2、ID选择器优先级高于类选择器，也高于标签选择器。

3、后代选择器，要根据情况确定，与ID选择器结合使用优先级要高于与类选择器结合使用优先级

<style type="text/css">	
	.bxg{
		color: red;
	}
	div {
		color: blue;
	}
	#box{
		color:green;
	}
	div .bxg{
			color:orange
	}
	</style>
</head>
<body>
   <div>
		<div id="box" class="bxg" >博学谷线上平台</div>
	</div>
</body>
</html>

5、块级标签显示模式

5.1、块级元素(block-level)（重点）

每个块元素通常都会独自占据一整行或多整行，可以对其设置宽度、高度、对齐等属性，常用于网页布局和网页结构的搭建。

常见的块元素有<h1>~<h6>、<p>、<div>、等，其中<div>标签是最典型的块元素。

块级元素非常适合布局(可以打开某个网站，看一下其对应的布局)，所以我们常说DIV+CSS

块级元素的特点：

（1）总是从新行开始

（2）高度，行高、外边距以及内边距都可以控制。

（3）宽度默认是容器的100%

（4）可以容纳内联元素（行内元素）和其他块元素。

<meta charset="UTF-8">
	<title>块级元素</title>
	<style type="text/css">
	div {
		background-color: orange;
		width: 500px;
		height: 200px;
	}
	</style>
</head>
<body>
	<div>张三</div>
	<div>王五</div>
</body>
</html>

5.2、行内元素(inline-level)（重点）

行内元素（内联元素）不占有独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构，一般不可以设置宽度、高度、对齐等属性，常用于控制页面中文本的样式。

常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>标签最典型的行内元素。

行内元素的特点：

（1）和相邻行内元素在一行上。

（2）高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效。

（3）默认宽度就是它本身内容的宽度。

（4）行内元素只能容纳文本或则其他行内元素。（a特殊）

<style type="text/css">
		span{
			background-color: orange;
			width: 200px;
			height: 300px; /*高度与宽度不起作用*/
		}
	
	</style>
</head>
<body>
<!-- 默认宽度就是它本身内容的宽度。 -->
	<span>张三是一个好人</span>
	<span>李四</span>
	<span>王五</span>
	<p>
    <div>马六</div>
	</p>
</body>
</html>

  注意：

只有文字才能组成段落因此 p 里面不能放块级元素，同理还有这些标签h1,h2,h3,h4,h5,h6他们都是文字类块级标签，里面不能放其他块级元素。例如，不能在p标签中添加添加div标签。
链接里面不能再放链接。

5.3、块级元素和行内元素区别（重点）

块级元素的特点：
（1）总是从新行开始
（2）高度，行高、外边距以及内边距都可以控制。
（3）宽度默认是容器的100%
（4）可以容纳内联元素和其他块元素。


行内元素的特点：
（1）和相邻行内元素在一行上。
（2）高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效。
（3）默认宽度就是它本身内容的宽度。
（4）行内元素只能容纳文本或则其他行内元素。

5.4 、行内块元素（inline-block）（了解）

在行内元素中有几个特殊的标签——、、，可以对它们设置宽高和对齐属性，有些资料可能会称它们为行内块元素。

行内块元素的特点：
（1）和相邻行内元素（行内块）在一行上,但是之间会有空白缝隙。
（2）默认宽度就是它本身内容的宽度。
（3）高度，行高、外边距以及内边距都可以控制。

行内块元素既有块级元素的特点，又有行内元素的特定。

	<title> 行内块元素</title>
	<style type="text/css">

	input {
		width: 300px;
		height: 20px;
	}
	</style>
</head>
<body>
	<input type="text" name="userName">
	<input type="text" name="userEmail">
</body>

5.5、标签显示模式转换 display

块转行内：display:inline;

行内转块：display:block;

块、行内元素转换为行内块： display: inline-block;

此阶段，我们只需关心这三个，其他的是我们后面的工作。

	<title>标签显示模式转换 display</title>
	<style type="text/css">
	div {
		display: inline; /*将块级元素转换成行内元素显示模式*/
	}
	span {
		display: block; /*将行内元素转换成块级元素显示模式*/
	}
	a {
		background-color: orange;
		width:100px;
		height:30px; /*a标签是行内元素，所以宽高无效，但是我们在后期网页设计中经常来控制a标签的高度与宽度，所以在这里我们可以转换成行内块元素的显示模式*/
		display:inline-block;
	}

	</style>
</head>
<body>
	<div>张三</div>
	<div>李四</div>
	<div>王五</div>
	<span>123</span>
	<span>456</span>
	<span>780</span>

	<a href="#">abc</a>
	<a href="#">def</a>
	<a href="#">hig</a>
	</body>
</html>

陈皮小桔

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
Html基本标签与CSS样式基本使用

一、HTML语言1、什么是HTML语言HTML（英文Hyper Text Markup Language的缩写）中文译为“超文本标签语言”，主要是通过HTML标签对网页中的文本、图片、声音等内容进行描述。标签：标记的意思，在日常生活中，我们也经常会见到一些标记，例如交通规则的标记，告诉你应该怎样走。而这里的标签就是告诉浏览器，在网页上显示什么内容，例如图片，文字，视频等。文本：文字，那么...
复制链接

扫一扫