Cristiano前端学习之HTML语言基础

其他 2021-03-06 09:36:39 阅读次数: 0

一、学习路线
在这里插入图片描述
二、html概述

  • 2.1 概述
    • 1、 HTML（超文本标记语言，Hyper Text Markup Language）
    • 2、万维网联盟（World Wide Web Consortium，简称W3C）
  • 2.2 html文档结构
    • 1、HTML是一种描述性标记语言，用来描述页面内容的显示方式；
    • 2、HTML文件是一种纯文本文件，以“.html”或“.htm”为后缀。
    • 3、HTML的基本组成单位是元素，语法结构如下：
		<标签>
			内容
		</标签>
  • 4、具体结构：
    在这里插入图片描述
    注意：<!DOCTYPE >标签需放在所有的文档标签之前，用于说明文档使用的HTML或XHTML的特定版本，并告诉浏览器后续内容应按照什么方式进行解析。
    • 5、HTML文档结构是由<html>、<head>和<body>这三大元素组成：
      <html>元素：文档以标签开始，以标签结束，所有内容都需要放在这两个标签之间。
      <head>元素：页面头部信息，用于向浏览器提供整个页面的基本信息，但不包含页面的主体内容。头部信息中主要包括页面的标题、元信息、CSS样式、JavaScript脚本等元素。页面头部信息通常并不在浏览器中显示，标题元素（标签的内容）除外，会显示在浏览器窗口的左上角。
      <body>元素：网页的正文，是用户在浏览器主窗口中看到的信息，包括图片、表格、段落、图片、视频等内容，且需位于标签之内；但并不是所有的内部标签都是可见的。
    • 6、在<head>元素中，<meta标签提供关于HTML文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。它可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。
  • 2.3注意事项
    • 1、HTML不区分大小写，而XHTML区分大小写；
    • 2、HTML标签的属性与属性值；
    • 3、HTML中的空格；
    • 4、HTML中的注释；
    • 5、标签可以嵌套使用。
  • 2.4文档说明与语言版本
    • (X)HTML文档应以标签进行声明，位于所有的文档标签之前，用于说明该文档所使用HTML或XHTML的特定版本，告知浏览器应按照什么方式对页面文档进行解析。
	【示例】文档类型声明
		<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   			"http://www.w3.org/TR/html4/loose.dtd">    快捷输入: html:4t 
	【示例】XHTML文档类型声明    
	    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
   			"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">html:xt
	【示例】HTML 5文档类型声明
		<!DOCTYPE html >    html:5

三、head元素

  • 1、HTML文档的<head>元素包含很多标签，用于向浏览器提供整个页面的基本信息。
  • 2、<head>中可以包含以下子元素：<meta>、<title>、<base>、<link>、<style>以及<script>等
  • 3.1 title元素
    页面的标题位于<title>标签内，可以包含任何字符或实体。
    在这里插入图片描述
  • 3.2 meta元素
    • 1、meta元素用于向客户的浏览器传递信息和命令，而不是用来显示内容的。
    • 2、一个<head>标签中可以包含一个或多个<meta>标签。
    • 3、<meta>标签主要分为两大类：1)对页面的设置，通过http-equiv属性进行指定；2)对搜索引擎的设置，通过name属性进行指定
      在这里插入图片描述

四、 文本元素

  • HTML文档中的文本元素包括：内容标题、文本修饰以及特殊字符。

    • （1）内容标题：<h1><h2><h3><h4><h5><h6>
    • （2）文本修饰：<font><b><i><s><u><sup><sub><strong><big><small>
    • （3）特殊字符：双引号（“） &号 空格；小于号（<）；大于号（>）；小于等于（≤）；大于等于（≥）；版权号（©）；商标符号（™）；注册商标（®）；分数（¼）分数（½）等

  • 4.1 内容标题

    • <hn>标签是双标签，默认情况下，在大多数浏览器中显示的<h1><h2><h3>元素内容大于文本在网页中的默认尺寸，<h4>元素的内容与默认文本的大小基本相同，而<h5>和<h6>元素的内容较小一些。一般来说，该标签最多到h6在这里插入图片描述

  • 4.2 文本修饰
    在这里插入图片描述

    • 1、 注意事项：
      • 1、HTML 5为<strong>标签增加了语义，使用<strong>标签包起来的文本表示重要的文本。
      • 2、HTML 5中删除了原有的<big>标签，并对<small>标签进行重新定义，用于标识所谓的“小字印刷体”，通常用来标注诸如注意事项、法律规定、免责声明或版权相关的声明性文字。
    • 2、文本修饰标签：<font>标签可以用来控制更多的文本字体外观样式，通过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>

五、文档结构元素

  • 1、 段落标签<p>用于对网页内容提供块级格式。当浏览器解析<p>标签时，通常在下一个段落之前插入一个新的空白行。
  • 2、<br />标签，可以在文本内容不结束的情况下需要对文本进行换行，<br />标签是空标签，br和“/”之间存在一个空格。
  • 3、<hr />标签可以在页面中产生一条水平线，将文本区域内容分开。
    在这里插入图片描述

六、列表元素

  • 在HTML页面中，使用列表将相关信息放在一起，会使内容显得更具有条理性。HTML中的列表有以下三种类型：
    • 有序列表：使用一些数值或字母作为编号；
    • 无序列表：使用项目符号作为编号；
    • 定义列表：列表中的每个项目与描述配对显示。
  • 6.1 有序列表
    • 1、在有序列表中，每一项的前缀可以通过数字或字母进行编号。
    • 2、HTML中提供了<ol>标签来实现有序列表有序列表：使用一些数值或字母作为编号；
		<ol>
			<li>列表项 1</li>  <ol>中允许包含多个列表项，每一个列表项都嵌入在<ol></ol>之间；
			<li>列表项 2</li>  <li>标签用于展示某一列表项，其内容包含在<li></li>之间。
			......
		</ol>
  • 3、通过type属性可以指定有序列表编号的样式，取值方式有如下几种：
    • “1”代表阿拉伯数字（1、2、3…）；
    • “a”代表小写字母（a、b、c…）；
    • “A”代表大写字母(A、B、C…）；
    • “i”代表小写罗马数字（i、ii、iii…）；
    • “I”代表大写罗马数字（I、II、III…）。
  • 4、通过start属性指定列表序号的开始位置，例如start="3"表示从3开始编号。
    在这里插入图片描述
  • 6.2 无序列表
    • 无序列表与有序列表不同，无序列表每一项的前缀显示的是图形符号，而不是编号。
      HTML中提供了<ul>标签来实现无序列表：
		<ul type="类型"> type属性用于设置列表的图形前缀，取值可以是circle（圆）、disc（点）、square（方块）、none等类型；当缺省type属性时大部分浏览器默认是disc类型。
			<li>列表项 1</li> 每一个列表项<li>嵌入在<ul></ul>之间，使用方式基本与有序列表一致；
			<li>列表项 2</li>
			......
		</ul >

在这里插入图片描述

  • 6.3 定义列表
    • 定义列表是一种特殊列表，将项目与描述成对显示，使用<dl>标签来实现
		<dl> 一个定义列表中可以包含1~n个子项；  
			<!-- 第1项开始 -->	每一子项都由两部分构成：标题(dt)和描述(dd)，且成对出现；
			<dt>标题 1</dt >	<dt></dt>标签用于存放标题内容；
			<dd>描述 1</dd>		<dd></dd>标签用于存放描述内容
			<!-- 第1项结束 -->
			<!-- 第2项开始 -->
           		 ......
			<!-- 第2项结束 -->	
		</dl >

在这里插入图片描述
七、div与span标签

  • 1、块级元素<div>标签用于将网页中的某一特定区域用边框围起来，并赋予指定的样式
		style属性用于设置div元素的行内样式；class属性用于引用CSS的类选择器；align属性用于设置div元素中的内容的对齐方式，取值范围是left、right、center或justify
		<div style="块元素的样式" class="类选择器名称" align="对齐方式">
			内容部分
			......
		</div>
  • 2、<span>标签属于行内块，用于指定行内元素，通过<span>标签来选择特定的文本，以便赋予特殊的样式；
		<span style="块元素的样式" class="类选择器名称" align="对齐方式">
 		   内容部分
		</span>

在这里插入图片描述
八、URL简介

  • 1、URL（Uniform Resource Locator，统一资源定位符）用于指定Web资源所在的位置，如同在网络上的门牌。URL是Internet上标准的资源地址，又称为网页地址或网址。
  • 2、URL包含3个关键部分：协议、主机地址和文件路径
    在这里插入图片描述
  • 3、协议、主机地址和文件路径共同组成了一个完整的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/
  • 8.1 绝对路径
    • 1、 绝对路径是指一个完整的路径
      • http://www.itshixun.com/movie/index.html
      • d:/web/movie/index.html
    • 2、绝对地址相对比较长，而网站的每个页面可能包含很多链接，页面代码显得比较臃肿。
  • 8.2 相对路径
    • 1、相对路径比绝对路径更加简洁，方便后期网站的维护
    • 2、当浏览器访问Web资源时，浏览器需要完整的URL才能获取到资源内容；当页面中提供的地址是相对路径时，浏览器会将相对URL转成完整的绝对URL后再获取资源。
    • 3、相对路径的访问方式有以下几种形式：
      • 同一目录
      • 子目录
      • 父目录
      • 根目录
    • 4、注意：相对路径仅适用于链接相同网站中的内容，不能用于链接其他域名下的资源。
      根目录方式在本地访问时无法实现，只有站点内容上传到Web服务器上才能展示效果。

九、图像标签

  • 在页面中，使用标签向HTML文档中添加一幅图像<img src="url" alt=" " .../>
    在这里插入图片描述
    在这里插入图片描述

十、超链接标签

  • 1、当浏览者点击链接（HyperLink）时，可以直接转向对应的网页、图片、文件或邮箱等资源；
    <a href="url" name=" " target=" ">链接内容</a>
  • 2、常见的超链接有以下几种类型：文本链接、锚点链接、图像链接、图像热区链接、Email链接、JavaScript链接、空链接
  • 10.1 文本链接与锚点链接
    • 1、文本链接是指链接内容是文本内容。链接目标可以是站内链接，也可以是站外链接；
<a>标签的title属性用于给链接添加标题，当鼠标悬停在超链接之上时，会提供该链接的更多相关信息。
		<a href="../index.html" title="网站首页">首页</a><br />
		<a href="list.html" title="本教程提供的列表示例页面">列表示例</a><br />
		<a href="http://www.baidu.com">百度</a> <br />

在这里插入图片描述

  • 2、锚点链接分为同一页面的锚点链接和跨页面的锚点链接，实现步骤如下：
    （1）在目标页面中，使用<a>标签创建锚点标记
    （2）在页面中，创建超链接链接到锚点
		<a id="myAnchor">这里是我创建的锚点位置</a>	    <!--推荐使用-->
		<a name="otherAnchor">这里是我创建的锚点位置</a>   	
		<a href="#myAnchor">链接到锚点位置</a> <a>标签的href属性是由“#”+“目标锚点名称”两部分构成
  • 3、跨页面的锚点链接
    href属性由“目标页面的绝对路径（或相对路径）”+“#”+“目标锚点名称”构成
		<a href="/chapter01/anchorLinkDemo.html#myAnchor">锚点位置</a>
  • 10.2 图片链接与图片热区链接
    • 1、图片链接也是使用<a>标签来实现，将<img />标签放在<a>和</a>标签之间即可
		<body>
    		<a href="http://www.itshixun.com">
        		<img src="images/logo.jpg"/>
    		</a>
		</body>

在这里插入图片描述

  • 2、图片热区链接是指在同一个图片中不同的部分链接到不同的目标位置，比一般的图片链接更加灵活。
  • 3、在图片中设置“热区”的步骤如下：
    • 1）通过<map>标签定义一个客户端图像映射（image-map），可以包含一个或多个图像的映射区域（<area>），而每个<area>区域拥有一个独立的链接。
    • 2）将<img />标签usemap属性与<map>标签的name属性相关联，实现图片与映射之间的联系。
      在这里插入图片描述
      在这里插入图片描述
  • 10.3 其他超链接
    • 1、空链接：空链接是未指派的链接，多用于向页面中的对象或文本附加行为时使用
      href属性为“#” <a href="#" >空连接</a>
    • 2、Email链接：浏览者可以通过点击Email链接时，操作系统会使用默认的程序打开一封新的电子邮件，并准备好发送该电子邮件到链接指向的地址；href属性由“mailto：”+“邮箱地址”两部分构成
    • 3、JavaScript链接：
	<body>
  		<a href="JavaScript:alert('你好，欢迎来到Web前端设计课堂');">
     		JavaScript链接，弹出提醒信息。
  		</a>
  		<a href="JavaScript:void(0);" onClick="alert('欢迎来到Web前端设计课堂');">
     		JavaScript链接，弹出提醒信息。
  		</a>
	</body> //两种方法等效
  • 10.4 超链接的target属性
    • 1、默认情况下，链接会在当前活动窗口打开目标链接文档，目标文档的内容将替换当前显示的页面内容。
    • 2、<a>标签的target属性可以改变目标文档的显示窗口。
      <a href="http://www.itshixun.com" target="_blank">打开目标链接</a>
      10
      在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/Cristiano_san/article/details/114382608
今日推荐
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
周排行
让自己的头脑极度开放
CentOS 6.5(x64) 和Redhat6.5操作系误删libc
高可用注册中心
【日记】12.28/【题解】AtCoder AGC041
XML（5）_XML 约束_DTD
Java集合Map（四）
树梅派安装桌面环境教程
pipenv 的 使用和安装
小程序白屏问题和内存研究
C语言简单选择排序
每日归档
更多
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022