前端学习之HTML学习（一）

最新推荐文章于 2022-03-01 19:51:23 发布

Christinaaa_

最新推荐文章于 2022-03-01 19:51:23 发布

阅读量359

点赞数

本文链接：https://blog.csdn.net/Christinaaa_/article/details/118962354

版权

（以下为学习笔记记录，学习《Web前端学习笔记：HTML5+CSS3+JavaScript》一书）

URL：

统一资源定位器，为互联网上标准资源（文件）的地址。

URL包含协议、服务器名称（或IP地址）、路径和文件名。

例如：http://jwc.gcu.edu.cn/upoadfile/20161011/1476171253139453.xls

其中，http是协议，jwc.gcu.edu.cn是服务器名称，upoadfile/20161011/是资源在服务器上的路径，1476171253139453.xls是资源的文件名。

HTTP：超文本传输协议
HTML：

超文本标记语言，“超文本”就是指页面内可以包含图片、链接，甚至音乐等多媒体信息。人们在互联网上浏览的网页就是使用HTML语言编写的，它通过标记符号来标记要显示的网页中的各个部分，如用<p></p>表示段落，<img/>表示图像，<a></a>表示超链接。浏览器按照顺序阅读网页文件，依次显示浏览器识别出的标记内容，对不能识别的标记不做处理，跳过不能识别的标记继续其解释执行过程。

1. HTML网页结构

一个网页的基本结构如下：

<!doctype html>  #文档类型声明
<html>
#网页头部，设置网页相关信息，如字符编码
  <head>
    <title>网页标题</title>     
  </head>
  <body>
#body标签之间的内容是可见的页面内容，可以包含其他HTML标签
#网页内容
  </body>
</html>

2. HTML网页的编辑与显示

可将记事本重命名为.html或另存为时将编码选为UTF-8来保存为网页文件。

如果打开html文件浏览时出现乱码，则在浏览器中设置浏览器的显示编码与网页保存时的编码一致。

3. HTML注释

注释标签<! --与-->用于在HTML中插入注释，可以一次注释一行HTML代码：

<！ --此刻不显示图片：
<img border="0" src="/i/tulip_ballade.jpg" alt="Tulip">
-->

在网页制作过程中，为了兼容IE浏览器，可以使用条件注释（条件注释只能在IE下使用，因此我们可以通过条件注释来为IE添加特别的指令）：

<! --[if IE]>
这里是正常的html代码
<! [endif]-->

HTML5的语法

HTML5由一个个标签组合而成，标签又有自己的属性和属性值。

HTML5标签

使用“<”和“>”括起来，标签都是闭合的。

标签分为单标记和双标记，单标记只有起始标记而没有结束标记，双标记是成对的开始标记和结束标记：

<hr/><! --单标记 也叫自结束标记-->
<title></title><! --标准标记，前面是开始标记，后面是结束标记，标记可以嵌套，但不能交叉嵌套-->

HTML5标签相对语义：

<html>：定义html文档； <head>：定义文档头信息； <a>：html链接标签

<div>：html层； <tr>：定义表格行； <form>：html表单标签

<body>：定义文档体body； <title>：定义文档的标题； <img>：html图像标签

<table>：定义html表格； <td>：定义表格列； <input>：定义表单的输入域

HTML5标签属性

一个标签中可以有多个属性，并且属性和属性值成对出现。

<img src="../image/aa.png"width="100"height="100"/>
<! --结构是 属性名="属性值"-- >

HTML5文档注释

浏览器不会对注释内容进行解析并呈现到页面上，只有查看HTML5源代码时才会看到注释，基本语法如下：

<! --这是HTML5注释-- >

HTML5的文档结构

HTML5文件均以<html>标记开始，以</html>标记结束。

一个完整HTML5文件包含头部和主体两个部分的内容，在头部标记<head></head>里可以定义标题、样式等，文档的主体<body></body>中的内容就是浏览器要显示的信息。

<!DOCTYPE html>
<html>
   <head>
     <meta charset="utf-8"/>
     <title>我的第一个网页</title>
   </head>
   <body>
      Hello World!
   </body>
</html>

<head>标签描述网页的基本信息，主要包含以下：

<title>标签：用于定义网页的标题，是成对标记。
<meta>标签：用于定义相关信息，为非成对标记。

charset属性：

设置文档的字符集编码格式，例如：<meta charset="UTF-8">

http-equiv属性：

将信息写给浏览器看，让浏览器按照这里面的要求执行，可选属性值有Content-Type（文档类型）、refresh（网页定时刷新）、set-cookie（设置浏览器cookie缓存），需要配合content属性使用。http-equiv属性只是表明需要设置哪一部分，具体的设置内容需要放到content属性中。

name属性：

将信息写给搜索引擎看，使用方法同http-equiv属性。常用属性有author（作者）、keywords（网页关键字）、description（网页描述）。

<! --作者-->
< meta name="author"content="http://www.jredu100.com"/>

<! --网页关键字：多个关键字用英文逗号分隔-->
<meta name="keywords"content="HTML5，网页，Web前端开发"/>

<! --网页描述：搜索网站时，title下面的解释文字。-->
<meta name="description"content="这是我开发的第一个网页。"/>

使用<link>标签可以加载一个图片作为网页图标。<link>标签有如下属性：

rel属性：声明被链接文件与当前文件的关系
type属性：声明被链接文件的类型，可以省略
href属性：表明图片的路径地址

<link rel="icon"type="image/x-ixon"href="img/icon.jpg"/>

主体内容：

标记<body></body>包含文档所有的内容，如文字、图像、表格、表单等元素。

<body>
  <header>网站主题</header>
  <nav>连接菜单</nav>
  <article>
     主内容
     <section>
          章节段落
     </section>
  </article>
  <aside>侧边栏</aside>
  <footer>页脚</footer>
</body>

常见的块级标签

此类标签艾网页中显示为块。块级标签一般独占一行，新的块级标签将从新的一行开始排列，它可以容纳内敛元素和其他块级元素

<h1></h1>...<h6></h6>：标题标签

标题标签的作用是设置段落标签的大小，共设置了6级，从1级到6级标题的字体大小依次递减。

基本语法如下：

<hr/>：水平线标签

添加水平分隔线，让页面更容易区分段落。

基本语法如下：

<hr/>

<!DOCTYPE html>
<html>
  <head></head>
  <body>
     <span>我在水平线上面</span>
     <hr/>
     <span>我在水平线下面</span>
  </body>
</html>

<p></p>：段落标签

可以区分段落，不同的段落间会自动增加换行符，段落上下方各会有一个空行的间隔。

基本语法：<p>段落文字</p>

<!DOCTYPE html>
<html>
  <head></head>
  <body>
     <p>我是第一段文字</p>
     <p>我是第二段文字</p>
  </body>
</html>

<br/>：换行标签

控制段落中文字的换行显示。

基本语法：<br/>

<!DOCTYPE html>
<html>
  <head></head>
  <body>
     <p>
        我是第一段文字<br/>
        我是第二段文字
     </p>
  </body>
</html>

<blockquote></blokquote>：引用标签

来表示引用的文字，同时会将标签内的文字缩进显示。其cite属性表明引用的来源，一般表明引用网址。

基本语法：<blockquote cite="http://www.jredu100.com">引用的文字</blockquote>

<!DOCTYPE html>
<html>
  <head></head>
  <body>
        第一段参考文字
        <blockquote>引用的文字</blockquote>
        第二段参考文字
  </body>
</html>

<pre></pre>：预格式标签

将文字按照原始的排列方式进行显示

基本语法：<pre>需要按原格式显示的文字</pre>

<ul><li></li></ul>：无序列表标签

将文字段落向内缩进，并且在每个列表项前面加上圆形、空心圆形或方形等符号，以达到醒目的效果。由于无序列表没有顺序编号，二是采用项目符号的形式，所以又被称为符号列表。

基本语法：

<ul type="disc">
  <li>第一项</li>
  <li>第二项</li>
</ul>

<ol><li></li></ol>：有序列表标签

将文字以特定的顺序来进行排列，并且他们之间以编号来标记，比如1、2、3....

基本语法：

<ol type="1">
  <li>第一项</li>
  <li>第二项</li>
</ol>

<dl></dl>：定义列表标签

适用于对名词、概念或主题的定义。第一部分是名词、概念或主题，并且通常只有一项，第二部分是相应的解释和描述，可以有多项。

基本语法：

<dl>
  <dt>这是定义列表的标题</dt>
  <dd>描述项第一项</dd>
  <dd>描述项第二项</dd>
</dl>

<div></div>：分区标签

可定义文档中的分区或节，将文档分割为独立的、不同的部分。

基本语法：<div>这是一个div</div>

常见的行级标签

<img/>：图片标签

网页中常用的图片格式为GIF、JPG、PNG

基本语法：<img src="img/logo.png"alt="教育logo"title="教育"/>

图片标签的主要属性：

scr属性：

表示引用图片的路径地址。路径地址的写法分别为相对路径、绝对路径、网络地址。

（1）相对路径：以当前文件为准，去寻找图片地址。与当前文件处于同一层的图片，直接写图片名；图片在当前文件下一层：文件夹名/图片名；图片在当前文件上一层：.../图片名。

（2）绝对路径：file:///盘符:/文件夹/图片.扩展名。绝对路径只在当前计算机生效，若将网站转移服务器，则路径会失效。通过绝对路径打开图片使用的是file协议，但网页中使用的是http协议，因此会出现跨域问题，造成图片无法显示。当网页直接通过本地浏览器以file协议打开时，图片可以正常显示。

（3）网络地址：使用网络上的图片链接。

height和width属性：

分别代表图片的宽度和高度，推荐使用CSS(style="width:100px;height:100px;")代替。

title属性：

用于设置图片的标题，即当鼠标指在图片上后显示的文字。

alt属性：

可设置由于图片无法加载时显示的文字。

align属性：

可设置图片周围文字相对于图片的位置。

<a></a>：超链接标签

<a>标签可以设置一个超链接，单击超链接可以跳转到新的文档后者当前文档中的某个部分。

基本语法：<a href="#">这是一个超链接</a>

超链接的属性：

（1）href属性：来描述连接的地址，当用#时，表示这是一个空的超链接。

（2）target属性：可以定义通过超链接打开的文档在何处显示。常用的两个属性值分别为_self（在与链接相同的框架中打开被链接文档）和_blank（在新窗口中打开链接），默认属性为_self

锚链接的用法：

（1）本页面锚链接：

设置锚点：<a name="top"></a>
在超链接上，使用#name跳转到对应锚点：<a href="#top"target="_self">这是一个超链接</a>

（2）页面间锚链接：

在即将跳转页面的指定位置，设置锚点。
在超链接的href属性中，使用“页面地址.html#name”。基本语法如下：<a href="t.html#weixin">跳转到新页面指定部分</a>

<span>标签常用来组合文档中的行内元素，无实际意义，用于包裹某部分文字，修改特定样式。

基本语法：<span>这是由span包括的文字</span>

标签	作用
<section>	表示页面中的一个内容区块、文档的主体部分，用于将网页或文章划分章节、区块
<article>	表示页面中的一块与上下文不相关的独立内容，如博客中的一篇文章
<aside>	表示article元素内容之外的，与article元素内容相关的辅助信息
<header>	网页或文章的头部
<footer>	网页或文章的底部
<nav>	表示页面中导航链接的部分
<hgroup>	将整个页面或页面中一个内容区块的标题进行组合