HTML学习笔记（三）HTML基础

认识HTML

HTML（英文Hyper Text Markup Language的缩写）中文译为“超文本标签语言”，是一种用于创建网页的标记语言。
HTML 不是一种编程语言，而是一种标记语言 (markup language)。
HTML通过标签对网页中的文本、图片、声音等内容进行描述。
本质上是浏览器可识别的规则，我们按照规则写网页，浏览器根据规则渲染我们的网页。对于不同的浏览器，对同一个标签可能会有不同的解释。（兼容性问题）
网页文件的扩展名：.html或.htm

HTML文档结构

 1 <!DOCtype>
 2 <html lang="en">
 3     <head>
 4         <meta charset="utf-8">
 5         <title>我的第一个网页</title>
 6     </head>
 7     <body>
 8         
 9     </body>
10 </html>

标签	作用	存放
<!DOCTYPE html>	声明为HTML5文档。	-
<html>	是文档的开始标记和结束的标记。是HTML页面的根元素	head、body
<head>	定义了HTML文档的开头部分。它们之间的内容不会在浏览器的文档窗口显示。包含了文档的元（meta）数据。	title、meta、base、style、script、link
<title>	定义了网页标题，在浏览器标题栏显示	-
<body>	之间的文本是可见的网页主体内容。	网页主体内容

注意：

<!DOCTYPE> 声明必须是 HTML 文档的第一行，位于 <html> 标签之前，<!DOCTYPE> 声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。
对于中文网页需要使用 <meta charset="utf-8"> 声明编码，否则会出现乱码。有些浏览器会设置 GBK 为默认编码，则你需要设置为 <meta charset="gbk">。

HTML标签格式

HTML 标签是由尖括号包围的关键词，比如 <html>
HTML 标签分为双标签和单标签
- 双标签：成对出现，比如 <b> 和 </b>，标签对中的第一个标签是开始标签，第二个标签是结束标签，开始和结束标签也被称为开放标签和闭合标签；
```
<标签名> 内容 </标签名>
```
- 单标签：单独呈现，比如：<br/>、<hr/>、<img src="1.jpg" />等；
```
<标签名 />
```
标签里面可以有若干属性，也可以不带属性。

HTML注释

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

<!--注释内容-->

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

HTML标签关系

标签的相互关系就分为两种：嵌套关系和并列关系

嵌套关系（父子关系）

1 <head>
2     <title> </title>
3 </head>

并列关系（兄弟关系）
```
1 <head></head>
2 <body></body>
```

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

HTML标签

head内常用标签

标签	意义
<title></title>	定义网页标题
<style></style>	定义内部样式表
<script></script>	定义JS代码或引入外部JS文件
<link/>	引入外部样式表文件
<meta/>	定义网页原信息
<base/>	页面上的所有链接规定默认地址或默认目标。

title标签

定义网页标题

<head>
　　<title>我是网页标题，我必须放在head标签内，我在网页标题部分显示</title>
</head>

style标签

定义内部样式表

<head>
    <!-- 内部样式表，必须放在head标签内 -->
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
            border: 0;
        }
        body{
            background-color: #123412;
            color: white;
        }
    </style>
</head>

script标签

在 HTML 页面中插入一段 JavaScript；

<script type="text/javascript">
    document.write("Hello World!")
</script>

链接一个外部脚本文件；

<script type="text/javascript" src="myscripts.js"></script>

link标签

链接一个外部样式表

link 元素是空元素，它仅包含属性。
此元素只能存在于 head 部分，不过它可出现任何次数。

<head>
    <link rel="stylesheet" type="text/css" href="theme.css" />
</head>

meta标签

定义和用法：

<meta> 元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。
<meta> 标签位于文档的头部，不包含任何内容。<meta> 标签的属性定义了与文档相关联的名称/值对。

meta标签的组成：

meta标签在HTML5之前有两个属性，它们分别是http-equiv属性和name 属性；
HTML5新添加"charset"属性；
不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。

用法参考网址：https://blog.csdn.net/zhangank/article/details/94014629

http-equiv属性：相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。

1 <!--2秒后跳转到对应的网址，注意引号-->
2 <meta http-equiv="refresh" content="2;URL=https://www.oldboyedu.com">
3 <!--指定文档的编码类型-->
4 <meta http-equiv="content-Type" charset=UTF8">
5 <!--告诉IE以最高级模式渲染文档-->
6 <meta http-equiv="x-ua-compatible" content="IE=edge">

name属性: 主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。
```
1 <meta name="keywords" content="meta总结,html meta,meta属性,meta跳转">
2 <meta name="description" content="老男孩教育Python学院">
```

body内常用标签

排版标签

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

<!-- 标题标签 -->
<h1>这是标题 1</h1> 
<h2>这是标题 2</h2> 
<h3>这是标题 3</h3> 
<h4>这是标题 4</h4> 
<h5>这是标题 5</h5> 
<h6>这是标题 6</h6>

<!-- 段落标签 -->
<p>这是一个段落标签</p>

<!-- 水平线标签 -->
<hr />

<!-- 换行标签 -->
<br />

<!-- div和span标签 -->
<div> 这是div标签 </div>
<span> 这是span标签 </span>

文本格式化标签(熟记)

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

<!-- 只有使用没有强调的意思 -->
<b>加粗</b>
<i>斜体</i>
<u>下划线</u>
<s>删除</s>

<!-- 语义更强烈 -->
<strong>加粗</strong>
<em>斜体</em>
<del>下划线</del>
<ins>删除</ins>

标签属性

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

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

在上面的语法中，

标签可以拥有多个属性，必须写在开始标签中，位于标签名后面。
属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。
任何标签的属性都有默认值，省略该属性则取默认值。
采取键值对的格式 key="value" 的格式，例如：
```
<hr width="400" />
```
属性是宽度

值是 400
提倡：尽量在标签中使用样式属性。

图像标签img (重点)

语法：

<img src="图片的路径" alt="图片未加载成功时的提示" title="鼠标悬浮时提示信息" width="宽" height="高(宽高两个属性只用一个会自动等比缩放)" />

<img />标签的属性

属性	属性值	描述
src	url	图像的路径
alt	文本	图像不能显示时的替换文本
title	文本	鼠标悬停
width	像素，%	设置图像的宽度
height	像素，%	设置图像的高度
border	数字	设置图像边框的宽度

链接标签(重点)

语法：

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

href：用于指定链接目标的url地址，当为标签应用href属性时，它就具有了超链接的功能。 Hypertext Reference的缩写。意思是超文本引用
target：用于指定链接页面的打开方式，其取值有self和blank两种，其中self为默认值，blank为在新窗口中打开方式。

注意：

外部链接需要添加 http:// www.baidu.com
内部链接直接链接内部页面名称即可比如 < a href="index.html"> 首页 </a >
如果当时没有确定链接目标时，通常将链接标签的href属性值定义为“#”(即href="#")，表示该链接暂时为一个空链接。
不仅可以创建文本超链接，在网页中各种网页元素，如图像、表格、音频、视频等都可以添加超链接。

锚点定位（难点）

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

使用“a href=”#id名>“链接文本"</a>创建链接文本。
使用相应的id名标注跳转目标的位置。

<body>
    <a href="#id名">链接文本</a><br />





    <h3 id="id名">点击链接文本，跳转到此位置</h3>

base 标签

语法：

    <head>
        <meta charset="utf-8">
        <!-- 在新窗口中打开 -->
        <base target="_blank" /> 
    </head>
    <body>
    <a href="http://www.baidu.com">百度</a>
    <a href="http://www.sina.com" target="_self">新浪</a>
    <a href="http://www.sohu.com">搜狐</a>
    <a href="http://www.163.com">网易</a>
    img br hr base  单标签
    </body>

作用：

可以设置整体链接的打开状态
设置页面上的所有链接规定默认地址或默认目标。

注意：<base> 标签必须位于 head 元素内部。

属性

值

描述

href

url

必须的属性，规定页面中所有相对链接的基准 URL。

target

_blank

_parent

_self

_top

framename

在何处打开页面中所有的链接。

特殊字符标签（理解）

路径(重点、难点)

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

相对路径

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

绝对路径

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

<img src="C:\Users\apple\Desktop\HTML入门及基础01\案例\wo.jpg" height="220" width="171" />
<img src="http://www.itcast.cn/images/logo.png" />
<img src="http://www.itcast.cn/images/slidead/BEIJING/2017471909473900.jpg" />

块元素和行内元素（内联元素）

块元素：无论内容多少，该元素独占一行。
```
<p></p>
<h1-h6></h1-h6>
```
行内元素（内联元素）：内容撑开宽度，左右都是行内元素的可以排在一行。
```
<a></a>
<strong></strong>
<em></em>
```

列表标签

无序列表 ul （重点）

无序列表是一个没有特定顺序的列表项的集合，也称为项目列表。在无序列表中，各个列表之间属于并列关系，没有先后顺序之分，它们之间以一个项目符号来标记。

语法：

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

注意：

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

有序列表 ol （了解）

有序列表,就是有顺序的列表

语法：

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

注意：

所有特性基本与ul 一致。
但是实际工作中，较少用 ol，都用ul。

自定义列表（理解）

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

语法：

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

posted @ 2020-09-15 18:01 车泽泽阅读(248) 评论(0) 收藏举报

刷新页面返回顶部

火车爱上轨道