自学前端第六天:HTML基础标签(三)

最新推荐文章于 2022-05-08 15:28:46 发布

AKA俄语人Лев

最新推荐文章于 2022-05-08 15:28:46 发布

阅读量339

点赞数

分类专栏：前端HTML+CSS基础文章标签： css html

本文链接：https://blog.csdn.net/weixin_47592060/article/details/116386632

版权

前端HTML+CSS基础专栏收录该内容

34 篇文章 6 订阅

订阅专栏

本文介绍了HTML文档流的概念，包括块级元素和内联元素的显示方式，并详细讲解了HTML的基础标签，如base、转义符号、注释、文本格式化、图片(img)、列表(ul, li, ol, dl)以及div和span标签的使用。" 115096338,10802935,Python3 matplotlib坐标轴刻度调整,"['Python', '数据可视化', 'matplotlib']

摘要由CSDN通过智能技术生成

一.了解什么是HTML文档流?

1.文档流指的是元素在HTML页面布局中的位置顺序决定排布的过程，主要的形式是自上而下（块级元素）一行接一行，每一行从左至右（行内元素）。主要是针对盒子模型来说的。

2.HTML元素可分为两大类;内联元素和块级元素.二者在显示方式上是不同的.

①内联元素是在水平方向上一个拦一个排列的,元素前后不产生换行,元素间的水平间距可以通过水平方向上的填充,边框和间距来控制,觉的strong,span等就属于内联元素,需要注意的是,竖直方向上的填充,边框和间距对控制内联元素的高度是不起作用的,水平方向的一行将构成一个所谓的line box,这是一个逻辑上的概念,line box是一个虚拟的矩形区域,包含了组成这行的所有内联元素,其高度本行内所有内联元素$内容完全显示出来,尽管浏览器自动计算内联元素高度,我们还是可以通过设置line-height属性的值来改变元素的高度.

②块级元素是在竖址方向上一个接一排列的,元素前后均产生换行,竖直方向上元素之间的距离可以用上下边距来控制,注意竖直方向的边距会产生重叠,其间距值取相邻元素中边距较大的那一个,常见p,div等都是块级元素,这些元素的内容都是以块的形式显示在浏览器中,

③内联元素和块级元素各自遵循着不同的显示方式,这就构成了html的文档, 文流档的内容被比喻为流,文档中的元素可以随波流,也可以脱离流,漂浮在其上,如果你没有为元素设定附加css属性,那么元素将按照它在html代码中出现的顺序一个挨着一地排列.

二.HTML标签属性

属性标签的附加价值和特性可以通过设置属性值的方式让标签的某一方面展示行为发生改变

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

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

属性的格式和书写:

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

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

3. 任何标签的属性都有默认值，省略该属性则取默认值。
	4. 属性采用键值对的书写方式 key="value"

例子:

<a href="https://www.baidu.com/"></a>

属性名称 href

属性值 "https://www.baidu.com/"

1.base标签

标签为页面上的所有链接规定默认地址或默认目标。
base 写到之间
把所有的连接都默认添加 target="_blank"

<!doctype html>
<html lang='zh-cn'>

<head>
  <meta charset='utf-8'>
  <title>html基础标签 属性 base标签</title>
  <base target="_blank">
  
</head>

<body>

  <a href="https://www.baidu.com/">baidu</a>
  <a href="https://www.baidu.com/">baidu</a>
  <a href="https://www.baidu.com/" target="_self">baidu不新开标签</a>
  <a href="https://www.baidu.com/">baidu</a>
  <a href="https://www.baidu.com/">baidu</a>
  <a href="https://www.baidu.com/">baidu</a>
</body>

</html>
<!--
    base标签
    统一修改页面内部超链接的跳转标签方式

-->

2.特殊字符(转义符号)

让浏览器能够理解 非排版意图 的格式和行为 HTML容许使用特殊字符进行转义行为

转义符对照表

特殊字符	描述	转义符
	空格	` `
<	小于号	`<`
>	大于号	`>`
&	和号	`&`
￥	人民币	`¥`
©	版权	`©`
®	注册商标	`®`

3.注释标签

HTML中还有一种特殊的标签——注释标签。如果需要在HTML文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字，就需要使用注释标签。其基本语法格式如下：

    <!-- 注释语句 -->   ctrl + /       或者 ctrl +shift + /

释内容不会显示在浏览器窗口中，但是作为HTML文档内容的一部分，也会被下载到用户的计算机上，查看源代码时就可以看到。

4.文本格式化标签(小标签)

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

标签	描述
b 和 string	文字以粗体方式显示
i 和 em	文字以斜体方式展示
s 和 del	文字以 ~~删除线~~ 方式展示
u 和 ins	文字以下划线方式展示

b i s u 只有表现形式 strong em del ins 的语义更强烈

<!doctype html>
<html lang='zh-cn'>

<head>
  <meta charset='utf-8'>
  <title>html基础标签 文本格式化标签</title>
</head>

<body>
  <b>海牙老师</b>特别能<i>吃</i>,<u>每天</u>都要吃掉<s>一头牛</s>

  <br>
  <strong>海牙老师</strong>特别能<em>吃</em>,<ins>每天</ins>都要吃掉<del>一头牛</del>
</body>

</html>
<!--
    文本格式化标签
    b strong 加粗
    i em 斜体
    u ins下划线
    s del 删除线

    b i u s是没有语义性
    strong em ins del是有语义性
-->

5.图片标签img(行内元素/也是置换元素)

单词缩写 image(图像)

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

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

<img src="图像URL" width='图片宽度' height='图片高度' alt='图片描述'>

属性

属性	属性值	描述
src	URL	图像路径
alt	文本	图片的描述和替代文本
width	数值(默认单位px)	图片的宽度
height	数值(默认单位px)	图片的高度
title	文本	鼠标悬停显示的内容
border	数字(非常规)	设置图片默认边框的宽度

<!doctype html>
<html lang='zh-cn'>

<head>
  <meta charset='utf-8'>
  <title>html基础标签 图片标签 img</title>
</head>

<body>
  <img src='img/summer1.jpg' width="533" height="300" alt='夏天'>
</body>

</html>
<!--
    图片标签 img
    src width height alt 图片四要素

    alt 除了作为图片无法展示的时候的文本替代 也作为爬虫辨识图片内容的关键字
    width 图片的原始宽度 不要加单位
    height 图片的原始高度 不要加单位

    px 像素
    表示距离的单位 cm mm m km nm
    1920*1080 1920 1080
-->

6.列表系列(最常用ul>li)

一系列内容以横列队列的形势中展现列表最大的特点就是整齐、整洁、有序.

①无序列表 ul>li

无序列表的各个列表项之间没有顺序级别之分，是并列的。其基本语法格式如下：

<ul>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
  ......
</ul>

比如下面这些，新闻是没有顺序的，不用排队，先到先得，后发布先显示。

在这里插入图片描述

PS:

 1. <ul></ul>中只能嵌套<li></li>，直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的。
 2. <li>与</li>之间相当于一个容器，可以容纳所有元素。
 3. 无序列表会带有自己样式属性 可以通过CSS修改默认样式

②有序列表 ol > li

有序列表即为有排列顺序的列表，其各个列表项按照一定的顺序排列定义，有序列表的基本语法格式如下：

<ol>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
  ......
</ol>

和UL无序列表的表现性质很相似不同的是索引器是有序的数字用到的地方比较少

③自定义列表 dl>dt+dd(一般用于页脚的排版)

定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。其基本语法如下：

<dl>
  <dt>名词1</dt>
  <dd>名词1解释1</dd>
  <dd>名词1解释2</dd>
  ...
  <dt>名词2</dt>
  <dd>名词2解释1</dd>
  <dd>名词2解释2</dd>
  ...
</dl>

在这里插入图片描述

7.div标签 (块元素盒子)

div标签是没有语义的是DIV+CSS时代的核心标签单纯进行内容标签的容纳

div是 division 的缩写意思是分割分区我们可以利用DIV来给页面划分不同的区域呈现不同内容

语法:

<div>
	<p><span>some text.</span>some other text.</p>
</div>

8.span标签(行内元素)

span标签是没有语义的通常来组合行内元素，以便通过样式来格式化它们。

span 没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化。

语法:

<p><span>some text.</span>some other text.</p>

9.总结HTML中的书写规则

使用HTML时，需要遵从一定的规范。CSS亦如此，要想熟练地使用CSS对网页进行修饰，首先需要了解CSS样式规则，具体格式如下：

在上面的样式规则中:

1.选择器用于指定CSS样式作用的HTML对象，花括号内是对该对象设置的具体样式。
2.属性和属性值以“键值对”的形式出现。
3.属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等。
4.属性和属性值之间用英文“:”连接。
5.多个“键值对”之间用英文“;”进行区分。
可以用段落 和 表格的对齐的演示。

熟练地使用CSS对网页进行修饰，首先需要了解CSS样式规则，具体格式如下：

在上面的样式规则中:

1.选择器用于指定CSS样式作用的HTML对象，花括号内是对该对象设置的具体样式。
2.属性和属性值以“键值对”的形式出现。
3.属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等。
4.属性和属性值之间用英文“:”连接。
5.多个“键值对”之间用英文“;”进行区分。
可以用段落 和 表格的对齐的演示。

AKA俄语人Лев

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
自学前端第六天:HTML基础标签(三)

HTML基础标签(二)一.了解什么是HTML文档流?1.文档流指的是元素在HTML页面布局中的位置顺序决定排布的过程，主要的形式是自上而下（块级元素）一行接一行，每一行从左至右（行内元素）。主要是针对盒子模型来说的。2.HTML元素可分为两大类;内联元素和块级元素.二者在显示方式上是不同的.①内联元素是在水平方向上一个拦一个排列的,元素前后不产生换行,元素间的水平间距可以通过水平方向上的填充,边框和间距来控制,觉的strong,span等就属于内联元素,需要注意的是,竖直方向上的填充,边框和间距对
复制链接

扫一扫