web前端开发基础#HTML语言基础

最新推荐文章于 2022-12-03 10:41:04 发布

小弦的博客

最新推荐文章于 2022-12-03 10:41:04 发布

阅读量581

点赞数

分类专栏： HTML 文章标签： html

本文链接：https://blog.csdn.net/qq_42258904/article/details/104483903

版权

HTML 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

HTML语言基础

HTML是一种描述性标记语言，用来描述页面内容的显示方式。
HTML文件是一种纯文本文件，以“.html”或“.htm”为后缀。
HTML的基本组成元素，语法结构如下：
<标签>
内容
<标签>
HTML文档结构是由< html>,< head>,< body>这三大元素组成：
< html>元素：文档以标签开始，以标签结束，所有内容都要放在这两个标签之间。
< head>元素：页面头部信息，用于向浏览器提供整个页面的基本信息，但不包含页面的主体内容。头部信息中主要包含页面的标题、元信息、CSS样式、JavaScript脚本等元素。页面头部信息通常并不在浏览器中显示，标题元素（标签的内容）除外，会显示在浏览器的窗口的左上角。
< body>元素:页面的正文，是用户在浏览器主窗口看到的信息，包括图片、表格、段落、图片、视频等内容，且需要位于标签之内，但不是所有的内部标签但是可见的。
代码如下：

<!DOCTYPE html>
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <title>一个简单页面</title>
</head>
<body>
	网页正文部分
	<img src="images/logo.jpg" />
	<table>
		<tr><td>Hello,HTML!</td></tr>
	</table>
</body>
</html>

编写HTML文件的注意事项：
HTML不区分大小写，而XHTML区分大小写；
HTML标签的属性与属性值；
HTML中的空格；
HTML中的注释；
标签可以嵌套使用。

HTML文档的元素包含很多标签，用于向浏览器提供整个页面的基本信息。
中可以包含以下子元素：< title>、< meta>、< base>、< link>、< script>以及< style>等。

页面的标题位于< title>标签内，可以包含任何字符或实体。
网页标题的作用：
在浏览器的标题栏中显示标题；
标题可以用作默认快捷方式或收藏夹的名称；
标题还可以作为搜索引擎结果中的页面标题。
例如：
在这里插入图片描述
meta元素用于向客户的浏览器传递信息和命令，而不是用来显示内容的。
一个< head>标签中可以包含一个或多个< meta>标签。
< meta>标签主要分为两大类：
对页面的设置，通过http-equiv属性进行指定
对搜索引擎的设置，通过name属性进行指定
在这里插入图片描述
例如：

<html>
<head>
   <title>漫步时尚广场 E&amp;S</title>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   <meta http-equiv="Refresh" content="5;url=http://www.itshixun.com" />
   <meta name="keywords" content="漫步时尚广场,时尚,购物,影视,餐饮"/>
   <meta name="description" content="游客漫步在时尚广场,可漫步湖畔步行街,可在国际名品店、时尚精品店徜徉,在电影区感受视听震撼,在咖啡、酒吧一条街放松身心,在世界特色餐厅享受美味。 "/>
   <meta name="robots" content="all"/>
</head>
<body>
     Meta标签的使用，5秒后进入QST官方网站~
</body>
</html>

HTML文档中的文本元素包括：内容标题、文本修饰以及特殊字符
内容标题：< h1>< h2>< h3>< h4>< h5>< h6>
文本修饰：< font>< b>< i>< s>< u>< sup>< sub>< strong>< big>< small>
特殊字符：双引号（“） &号空格小于号（<）大于号（>）
小于等于（≤）大于等于（≥）版权号（©）商标符号（™）注册商标（®）
分数（¼）分数（½）等

标签是双标签，默认情况下，在大多数浏览器中显示的< h1>< h2>< h3>元素内容大于文本在网页中的默认尺寸，< h4>元素的内容与默认文本的大小基本相同，而< h5>和< h6>元素的内容较小一些。
例如：

<html>
  <head>
    <title>漫步时尚广场 E&amp;S</title>
  </head>
  <body>
    <h1>一级标题 —— 漫步时尚广场</h1>
    <h2>二级标题 —— Q- Walking Fashion E&S </h2>
    <h3>三级标题 —— 购物广场</h3>
    <h4>四级标题 —— 男装区</h4>
    <h5>五级标题 —— 上衣区</h5>
    <h6>六级标题 —— 衬衣</h6>
  </body>
</html>

效果图：在这里插入图片描述
文本修饰标签：

注意：HTML 5为< strong>标签增加了语义，使用< strong>标签包起来的文本表示重要的文本。
HTML 5中删除了原有的标签，并对标签进行重新定义，用于标识所谓的“小字印刷体”，通常用来标注诸如注意事项、法律规定、免责声明或版权相关的声明性文字。

标签可以用来控制更多的文本字体外观样式，通过face、size和color属性来设定文本的字体、大小和颜色。

<font face="隶书" size="10" color="blue">通过font标签设置字体</font>
<font face="楷体" size="+3" color="#FF0000">设置字体的样式</font>
<font face="黑体" size="-1" color="gray">设置字体的样式</font>

特殊字符
在这里插入图片描述
文档结构元素：
段落标签< p>用于对网页内容提供块级格式。当浏览器解析< p>标签时，通常在下一个段落之前插入一个新的空白行。
< br />标签，可以在文本内容不结束的情况下需要对文本进行换行
标签是空标签， br和“/”之间存在一个空格。
< hr />标签可以在页面中产生一条水平线，将文本区域内容分开。
列表元素：
在HTML页面中，使用列表将相关信息放在一起，会使内容显得更具有条理性。HTML中的列表有以下三种类型：
有序列表：使用一些数值或字母作为编号；
在有序列表中，每一项的前缀可以通过数字或字母进行编号。
HTML中提供了

标签来实现有序列表有序列表：使用一些数值或字母作为编号；

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

其中：
< ol>中允许包含多个列表项，每一个列表项都嵌入在< ol>< /ol>之间；
< li>标签用于展示某一列表项，其内容包含在< li>之间。
通过type属性可以指定有序列表编号的样式，取值方式有如下几种：
“1”代表阿拉伯数字（1、2、3…）；
“a”代表小写字母（a、b、c…）；
“A”代表大写字母(A、B、C…）；
“i”代表小写罗马数字（i、ii、iii…）；
“I”代表大写罗马数字（I、II、III…）。
通过start属性指定列表序号的开始位置，例如start="3"表示从3开始编号。

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>有序列表</title>
  </head>
  <body>
    <ol type="A" start="3">
      <li>购物区</li>
      <li>男装</li>
      <li>女装</li>
      <li>童装</li>
      <li>休闲装</li>
      <li>运动装</li>
    </ol>
  </body>
</html>

效果图：
在这里插入图片描述
无序列表：使用项目符号作为编号；
无序列表与有序列表不同，无序列表每一项的前缀显示的是图形符号，而不是编号。
HTML中提供了< ul>标签来实现无序列表：

<ul type="类型">
	<li>列表项 1</li>
	<li>列表项 2</li>
	......
</ul >

其中：
每一个列表项< li>嵌入在< ul>< /ul>之间，使用方式基本与有序列表一致；
type属性用于设置列表的图形前缀，取值可以是circle（圆）、disc（点）、square（方块）、none等类型；当缺省type属性时大部分浏览器默认是disc类型。

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>无序列表</title>
</head>
<body>
  <ul type="disc">
    <li>购物区</li>
    <li>男装</li>
    <li>女装</li>
    <li>童装</li>
    <li>休闲装</li>
    <li>运动装</li>
  </ul>
</body>
</html>

效果图：
在这里插入图片描述
定义列表：列表中的每个项目与描述配对显示。
定义列表是一种特殊列表，将项目与描述成对显示，使用

标签来实现
其中：

<dl>
	<!-- 第1项开始 -->
	<dt>标题 1</dt >
	<dd>描述 1</dd>
	<!-- 第1项结束 -->
	<!-- 第2项开始 -->
            ......
	<!-- 第2项结束 -->	
</dl >

一个定义列表中可以包含1~n个子项；
每一子项都由两部分构成：标题(dt)和描述(dd)，且成对出现；
< dt>< /dt>标签用于存放标题内容；< dd>< /dd>标签用于存放描述内容。

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>定义列表</title>
</head>
<body>
  <dl>
    <!-- 第一项开始 -->
    <dt>购物区</dt>
    <dd>近年来，随着经济社会和现代物流业的快速发展，带动了电子商务的快速发展……</dd>
    <!-- 第一项结束 -->
    <dt>影视区</dt>
    <dd>能够在线收看高清电影电视剧、体育直播、游戏竞技视频、动漫视频、综艺视频、财经资讯视频播放流畅、完全免费，是网民喜爱的休闲娱乐区。</dd>
    <dt>餐饮区</dt>
    <dd>通过互联网使消费者及时了解餐厅营运、在线点菜、优惠套餐等方式进行网络销售传播，便利充分地实现餐厅服务价值交换。</dd>
  </dl>
</body>
</html>

效果图：
在这里插入图片描述
div与span标签
标签属于行内块，用于指定行内元素
通过标签来选择特定的文本，以便赋予特殊的样式；

<span style="块元素的样式" class="类选择器名称" align="对齐方式">
    内容部分
</span>

其中：
style属性用于设置span元素的行内样式；
class属性用于引用CSS的类选择器；
align属性用于设置span元素中的内容的对齐方式，取值范围是left、right、center或justify
注意：如果只是用< div>标签不使用CSS样式，在页面中的效果与< p>基本相同，且独占一行。通过< div>标签可以对页面进行整体划分，并使用CSS进行修饰，以实现页面的布局。
URL简介：
协议、主机地址和文件路径共同组成了一个完整的URL：
网页通常采用HTTP超文本传输协议传递信息，对应的网址基本使用http://前缀
电子商务等网站对安全性更高时，多采用https协议（https://前缀）
文件上传下载时，多采用ftp://前缀
主机地址（Host Address）一般是网站的域名，如www.itshixun.com
主机地址也可以使用IP地址（数字形式），例如：192.168.1.100、115.239.210.27等
文件路径通常与网站的目录结构相对应，以斜杠（/）开始，以文件夹名或文件名结束，中间可以包含一级或多级目录，例如：/web/test/index.html或/web/test/
绝对路径：
绝对路径是指一个完整的路径
http://www.itshixun.com/movie/index.html
d:/web/movie/index.html
绝对地址相对比较长，而网站的每个页面可能包含很多链接，页面代码显得比较臃肿。
相对路径：
相对路径比绝对路径更加简洁，方便后期网站的维护
当浏览器访问Web资源时，浏览器需要完整的URL才能获取到资源内容；当页面中提供的地址是相对路径时，浏览器会将相对URL转成完整的绝对URL后再获取资源。
相对路径的访问方式有以下几种形式：同一目录、子目录、父目录、根目录
注意：相对路径仅适用于链接相同网站中的内容，不能用于链接其他域名下的资源。
根目录方式在本地访问时无法实现，只有站点内容上传到Web服务器上才能展示效果。
图像标签：
在页面中，使用标签向HTML文档中添加一幅图像

<img src="url" alt=" " .../>

在这里插入图片描述
文本链接与锚点链接：
文本链接是指链接内容是文本内容。链接目标可以是站内链接，也可以是站外链接；

<a href="../index.html" title="网站首页">首页</a><br />
<a href="list.html" title="本教程提供的列表示例页面">列表示例</a><br />
<a href="http://www.baidu.com">百度</a> <br />

效果图：
在这里插入图片描述
< a>标签的title属性用于给链接添加标题，当鼠标悬停在超链接之上时，会提供该链接的更多相关信息。
锚点链接分为同一页面的锚点链接和跨页面的锚点链接，实现步骤如下：
（1）在目标页面中，使用< a>标签创建锚点标记
（2）在页面中，创建超链接链接到锚点
< a>标签的href属性是由“#”+“目标锚点名称”两部分构成

<a id="myAnchor">这里是我创建的锚点位置</a>	    <!--推荐使用-->
<a name="otherAnchor">这里是我创建的锚点位置</a>   
<a href="#myAnchor">链接到锚点位置</a>

跨页面的锚点链接
href属性由“目标页面的绝对路径（或相对路径）”+“#”+“目标锚点名称”构成

<a href="/chapter01/anchorLinkDemo.html#myAnchor">锚点位置</a>

图片链接与图片热区链接：
图片链接也是使用< a>标签来实现
将< img />标签放在< a>和< /a>标签之间即可
空链接
空链接是未指派的链接，多用于向页面中的对象或文本附加行为时使用
href属性为“#”

<a href="#" >空连接</a>

Email链接
浏览者可以通过点击Email链接时，操作系统会使用默认的程序打开一封新的电子邮件，并准备好发送该电子邮件到链接指向的地址
href属性由“mailto：”+“邮箱地址”两部分构成

超链接的target属性：
默认情况下，链接会在当前活动窗口打开目标链接文档，目标文档的内容将替换当前显示的页面内容。
< a>标签的target属性可以改变目标文档的显示窗口。
在这里插入图片描述

<a href="http://www.itshixun.com" target="_blank">打开目标链接</a>

以上就是HTML基础的全部，个人学习总结分享，不喜勿喷！！！

小弦的博客

关注

0
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
web前端开发基础#HTML语言基础

HTML语言基础HTML是一种描述性标记语言，用来描述页面内容的显示方式。HTML文件是一种纯文本文件，以“.html”或“.htm”为后缀。HTML的基本组成元素，语法结构如下：<标签>内容<标签>HTML文档结构是由,,这三大元素组成：< html>元素：文档以标签开始，以标签结束，所有内容都要放在这两个标签之间。< head&gt...
复制链接

扫一扫