HTML笔记之基础标签

最新推荐文章于 2022-08-09 13:06:44 发布

大龄哑炮

最新推荐文章于 2022-08-09 13:06:44 发布

阅读量266

点赞数

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

本文链接：https://blog.csdn.net/Song_dui_dui/article/details/110008041

版权

HTML 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

前言

最近开始学习前端，许多知识在学习得过程中感觉过得很快，当时印象很深刻，所以就没有做笔记，如今却是“书到用时方恨少”，因此，开此博客已做学习、记录、交流，因为博主也是初学者，所以若有不足之处还请多多指正。

HTML（HyperText Markup Language超文本标记语言）是Web前端页面的基本编写语言，它由一系列的标签构成，并且由这些标签一起搭建构成页面文档的基本结构。HTML是由Web的发明者 Tim Berners-Lee和同事 Daniel W. Connolly于1990年创立的一种标记语言，它是标准通用化标记语言SGML的应用。用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台(如UNIX， Windows等)。使用HTML语言，将所需要表达的信息按某种规则写成HTML文件，通过专用的浏览器来识别，并将这些HTML文件“翻译”成可以识别的信息，即现在所见到的网页。一般来说，一个页面由html开始，包裹整个文档，然后内嵌head标签和body标签，head标签中放置与浏览器相关的信息，以及引入CSS和JavaScript，用户不直接可见；body标签中的内容就是用户可见的内容，用一些列标签加上进而使得样式，形成各式可观的网页呈现在用户面前。基本框架入图1所示：

一、Html

1. HTML文件

HTML文件的开头必须有<!DOCTYPE html>声明，按规定，<!DOCTYPE> 声明必须位于 HTML文档中的第一行，也就是位于 <html> 标签之前。该标签告知浏览器文档所使用的 HTML 规范。但是doctype 声明不属于 HTML 标签；它是一条指令，告诉浏览器编写页面所用的标记的版本。在所有 HTML 文档中规定 doctype 是非常重要的，这样浏览器就能了解预期的文档类型。<!DOCTYPE>声明不区分大小写，即<!doctype>也可以，只不过一般默认都是大写。

2. html标签

html标签支持HTML的全局属性，例如设置class，设置id等，此处介绍一下属性lang（即language），它用以向搜索殷勤爬虫说明网站的内容，取值有：

en——英文网站
zh——中文网站
de——德文网站
……

二、Head

Head标签用来放置一些面向浏览器的信息，比如网站名，网站的图标，网站的元信息，从外部文件引入CSS（Cascade Style Sheet层叠样式表）和JavaScript。

1. title

title标签用于设置网页文档的标题，即图2中铅笔墨迹圈出来的部分。具体使用规则如下：

<title>CSDN博客-专业IT技术发表平台</title>

在图2中可以看到，文字标题的前面往往还有一个小图标，这个可以用<link>标签设置，具体用法如下：

<link rel="icon" href="#" type="image/x-icon">

其中，rel属性表示链接的内容是什么，href（Hypertext REFerence超文本链接）是链接资源的位置，即小图标的存储位置，type是指链接资源的MIME类型。

2. meta

meta标签可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。常用的元信息有：网页文档字符的编码方式（charset），文档的内容（content）以及一些其他的用户自定义的元信息的内容。

通用的编码字符集有：gb2312（识别所有的亚裔字符集，中文仅识别简体），gbk（是gb2312的内码扩展规范，兼容gb2312，并且可以识别中文繁体），utf-8（万国码，是Unicode字符集应用最广泛的一种编码规则，能识别绝大部分字符，目前最为普遍）等。content主要是用一些文字对网页的内容进行介绍，与html中的lang类似，也是便于搜索引擎爬虫了解网页文档的内容。下面给出meta的一些简单使用示例：

<meta charset="utf-8">
<meta name="description" content="这是一个示例网站">
<meta name="author” content="XXX">

meta是单标签(单标签：不包含内容，单个标签就可以表示功能；双标签基本可以包含内容)，即没有闭合标签，单个出现，其中name表示属性名，content指定属性值。

3. 引入CSS

head最重要的三个作用：设置网页文档的title，从外部引入CSS文件以及从外部引入JavaScript文件。一般来说，CSS的引入方式有三种：

（１）行间样式，即直接在元素的标签中加入style属性指定样式；

<div style="width: 200px; height: 200px; border: 1px solid black;">
    我就是个凑数的
</div>

（２）在head中添加CSS代码，用一对<style>标签括起来，如下面的代码中所示：

<style type="text/css">
    width: 200px;
    height: 200px;
    border: 1px solid black;
</style>

（３）另外一种就是CSS样式单独形成文件，然后在head标签中将外部的CSS文件引进来，如下述代码所示，其中rel表示文件的内容，type表示文件的MIME类型，href表示CSS文件的地址。

<link rel="stylesheet" type="text/css" href="#">

4. 引入JavaScript

这一部分后面再加。

三、Body

Body标签对中的内容是呈现给用户的可视化的内容，由一系列不同结构的标签形成不同形式的内容，标签也称为元素。一般而言，Body中的哪些常见元素分为行级元素（inline）、块级元素（block）和行级块元素（inline-block）。其中行级元素和行级块元素具备文本类元素的基本属性。

1. 行级元素

行级元素不能独占一行，也不能设置宽高，可以设置水平方向上的margin和padding，垂直方向上的不起作用。元素的宽高由内容的宽高来确定。行级元素内部只能嵌套行级块元素和行级元素，不能嵌套块级元素。常见的行级元素有span，em，strong，label，a等。a标签处了基本的设置超链接和用作锚点的作用以外，还有两个有趣并且很常用的作用（1）打电话、发邮件；（2）用作协议限定符。

<!--1. 打电话&发邮件-->
<a href="tel: 130********">打电话</a>
<a href="mailto: 130********@163.com">发邮件</a>

<!--2. 协议限定符-->
<a href="javascript: alert('让你手欠！')">点我试试</a>

2. 块级元素

块级元素独占一行，可以设置宽、高，margin，padding等属性，默认宽度是100%（宽度与父级元素的宽度相等），即使设置后的宽度小于父级元素的宽度，即还留有剩余，仍然不会与其他元素共用一行的。块级元素中可以嵌套其他任何元素。常见的块级元素有p标签，div，h1-h6，address，ul，ol，form等。

ul标签: ul标签可以设置type属性,用于指定列表项前面的符号样式, "discircle"(实心圆，默认值), "circle"(圈) , "square"(方块)
ol标签: ol标签可以设置type,reversed和start, 其中type用于指定序号类型(type="1": 按阿拉伯数字排序(默认)， "a/A": 按字母排序， "i/I": 按罗马数字排序);reversed属性用于设置排序需不需要逆序;start属性用于设置起始序号,用阿拉播数字表示,不必与type中的序号类型统一,比如:

<ol type="I" reversed="reversed" start="2">
	<li>老大</li>
	<li>老二</li>
	<li>老三</li>
	<li>老四</li>
    <li>老五</li> 
</ol>

3. 行级块元素

行级块元素是兼具了行级元素和块级元素特性的元素，行级块元素可以与其他行级、行级块元素共占一行，并且可以设置宽度和高度，不过margin和padding的设置也是只在水平方向上有效，垂直方向无效。常见的行级块元素有select, img，input等。

select标签: 当option中不设置value的时候，默认的value就是标签包裹的内容；在设置的情况下，取value的值
img标签: img标签的src属性用于指定图片的地址,它既可以是本地的地址,也可以是网络上的url; alt属性是图片的占位符,即当图片的格式出现错误时,显示的文字信息;title是图片提示符,是当鼠标移动到图片上时给出的图片提示信息
radio标签: 同一radio标签下的多个选择项，需要让name统一即可，并需要写明value区分值; 还可以设置checked来选择默认选项

4. 文字输入

文字输入主要想说明文字分隔符和特殊符号输入的问题.

空格&回车: 在HTML中输入的空格和回车都不算真正意义上的空格符和回车符,它们都是文字分隔符.并且无论在HTML代码中输入多少个空格符和回车符,在浏览器解析的时候都只有一个文字分隔符.所以在HTML中表示空格符和回车符要用特定的编码: 空格(&nbsp), 回车(可以用单标签<br>来表示).
大于&小于: 小于也不能用<直接表示,因为这和HTML中标签的左括号一致;大于符号同理,因此在HTML文字输入中小于和大于富豪的表示应为: 小于(&lt), 即less than; 大于(&gt) , 即great than.
缩进: 缩进可以用css代码来控制, 通过设置text-indent属性来控制缩进的多少,如果时缩进两个字符,则设置为: