关于学习html的一点总结

  • A+
所属分类：Web前端
摘要

web标准的构成主要由结构、表现、行为三个方面组成​ 例：—>开始标签
便宜好用的国外VPS推荐

web标准

web标准的构成

主要由结构、表现、行为三个方面组成

标准 说明
结构 结构用于对网页元素进行整理和分类，现阶段主要学的是HTML。
表现 表现用于设置网页元素的版式、颜色、大小等外观样式，主要指的是css
行为 行为是指网页模型的定义及交互的编写，现阶段主要学的是Javascript

HTML的语法规范

  1. 所有的标签都包含在<>中间，并且大部分标签都是成对出现，称为双标签

​ 例：—>开始标签

		</html>—>结束标签（有反斜杠）

2.标签关系

双标签关系可以分为两类：包含关系和并列关系

包含关系

<head>       父亲 	<title></title>   儿子 </head>

并列关系

<head> </head> <body> </body>

2.HTML基本结构标签

2第一个HTML的网页

每个网页都会有都会有一个基本的结构标签（即骨架标签），页面内容也是在这些基本标签上写

<html> 	<head> 		<title>我的第一个页面</title> 	</head> 	<body> 		姜宇，许诺百年好合 	</body> </html>
标签名 定义 说明
HTML的标签 页面中最大的标签，我们称为根标签
文档的头部 注意在head标签中我们必须要设置的标签是title
文档的标题 让页面拥有一个属于自己的网页标题
文档的主体 元素包含文档的所有内容，页面内容基本都是放到Body里面

3 . vscode工具生成骨架标签新增代码

3.1<！DOCTYPE>标签

​ 必须放到最前面，声明标签、

3.2 lang 语言种类

用来定义当前文档显示的语言

  1. en定义语言为英语
  2. zh-CN定义语言为中文

en就是英文网站，zh—CN为中文网站

3.3 字符集

字符集（Character set）是多个字符的集合

在标签内，可以通过标签的charset属性来规定HTML文档应该使用哪种字符编码。

<meta charset="UTF-8"/>

4.HTML常用标签

4 .1标签语义

根据标签的语义，在合适的地方给一个最为合理的标签，可以让页面结构清晰

4.2 标题标签《h1》 -《h6》(重要)

HTML提供了6个等级的网页标题，即

-

.

<body> <h1> 我是一级标题 </h1> </body>

是单词head的缩写

标签语义：作为标题使用，并且依据重要性递减。（一级比二级重要）

特点：

1.加了标题的文字会变得加粗，字号会依次变小

2.一个标题独占一行

4.3 段落和换行标签（重要）

4.3.1 分段标签 p

网页中，将文字分段显示，需要用标签

，用于定义段落，可以将整个网页分成若干个段落

<p> 我是一个段落标签 </p>

特点：

  1. 文本在一个段落会根据浏览器窗口大小自动换行。
  2. 段落与段落之间保有空隙

4.3.2 换行标签 br/

强制换行break缩写，只有这一个单标签

标签语义：强制换行。

特点：

  1. br/ 是个单标签
  2. br/标签只是简单的另起一行，跟段落不一样，段落之间会插入一些垂直的间距

4.4 文本格式化标签

  • 《strong》《/strong》加粗标签

  • 《b》《/b》也是加粗的标签

    strong比b语气更加强烈

  • 《em》《/em》或者《i》《/i》是倾斜

    em语义更强烈

  • 《del》《/del》或者《s》《/s》是删除线，del语义更强烈

  • 《ins》《/ins》或者《u》《/u》是下划线，ins语义更强烈

  • 《hr/》分割线

4.5《div》和《span》标签（盒子）

两个标签没有语义，仅仅是盒子，装内容（双标签）

特点：

1.div是division的缩写，表示分割、分区。span意为跨度，跨距。

2.《div》标签用来布局，一行只能放一个《div》。大盒子

3.《span》标签用来间隔，小盒子，一行可以很多个

4.6图像标签和路径（重点）img

  1. 图像标签

    在HTML标签中，《img》标签用于定义HTML页面中的图像。

    《img src=“图像URL（这里写的是图片的路径）”/》为单标签

    src是《img》标签的必须属性 ，它用于指定图像文件的路径和文件名

    所谓属性：就是属于这个图像标签的特性

    属性 属性值 说明
    src 图片路径 必须属性
    alt 文本 替换文本，图片不能显示的文字
    title 文本 提示文本，鼠标放到图像上，显示的文字
    width 像素 设置图像的宽度
    height 像素 设置图像的高度
    border 像素 设置图像的边框粗细

4.6.1 图像标签的注意点

  1. 图像标签有多个属性，必须写在标签名的后面
  2. 属性之间不分前后顺序，标签名和属性、属性和属性之间均以空格分开
  3. 属性采取形式为，属性=“属性值”

4.7路径（重点）

4.7.1相对路径

相对路径分类 符号 说明
同一级路径 图像文件位于HTML文件同一级，如《img src=“baidu.gif”/》
下一级路径 / 图像文件位于HTML文件下一级，如《img src=“images/baidu.gif”/》
上一级路径 ../ 图像文件位于HTML文件上一级，如《img src=“../baidu.gif”》

4.7.2 绝对路径

不多说了

4.8 超链接标签《a》（重点）

《a》标签用于定义超链接，作用是从一个网页链接到另一个网页

4.8.1 链接的语法格式

《a href="跳转目标" target=“目标窗口的弹出方式”》文本或图像《/a》
属性 作用
href 用于指定链接目标的url地址，（必须属性）当为标签应用href属性时，他就具有了超链接的功能
target 用于指定链接页面的打开方式，其中 _self为默认值, _blank为新窗口的打开方式

4.8.2 链接分类

  1. 外部链接：例如《a href=“http://www.baidu.com”>百度《/a》
  2. 内部链接：网站内部网页之间的相互链接，直接连接内部页面名称即可，例如《a href=“index.html”》首页《/a》
  3. 空链接：如果当时没有明确链接目标时，《a href=“#”》首页《/a》
  4. 下载链接：如果href里面地址是一个文件或者压缩包，会下载这个文件。
  5. 网页元素的链接：在网页中的各种网页元素，如文本、图像、表格、音频、、视频等都可以添加超链接。
《a href="http:bababa"》<img src="图片文件"/>《/a》

6.锚点链接：点我们的点击链接，可以迅速定位到某个位置。

  • 在链接文本的href属性中，设置属性值为#名字的形式，如《a href=“#two”》第二集《/a》
  • 找到目标位置标签，里面添加一个id属性=刚才的名字，如：《h3 id=“two”》第二季介绍《/h3》

自己总结一点：如果在《a》《/a》之间放的是一段话，直接把那段话打在中间就行

如果是一个图片文件或者其他文件，用相应的标签来引入

4.9HTML中的注释《！----》

注释标签

以《！--》开头，以“--》”结束 快捷键ctrl+/

4.10表格标签《table》

4.10.1 表格主要作用

主要用于展示数据，布局页面

4.10.2表格基本用法

<table> 	<tr> 		<td>单元格内的文字</td> 	</tr> </table>

  • 《table》是用于定义表格的标签

  • 《tr》标签使用预定义表格中的行，必须嵌套在《table》中

  • 《td》用于定义表格中的单元格（可以认为是列），必须嵌套在《tr》中

  • 字母td指表格数据，即数据单元格的内容

4.10.3 表头单元格标签

位于表格第一行或者第一列，居中加粗显示

《th》《/th》

跟td一个等级

4.10.4表格属性

属性名 属性值 描述
align left、center、right 规定表格相对周围元素的对齐方式
border 1或“” 规定表格单元是否拥有边框，默认为“”，表示没有边框
cellpadding 像素值 规定单元边沿与其内容之间的空白，默认1像素
cellspacing 像素值 规定单元格之间的空白，默认2像素
width 像素值或百分比 规定表格的宽度

这些属性要写到《table 这里》

4.10.5表格结构标签《thead》《tbody》

《thead》标签表示表格头部区域，《tbody》标签表示表格的主体区域

4.10.6 合并单元格《colspan和rowspan》

例：《td colspan=“几个”》《/td》

跨列合并：colspan=“合并单元格的个数”

跨行合并：rowspan=”合并单元格的个数“

4.11 列表标签《ul》《li》《dl》

分为三大类：无序列表《ul》列表项《li》、有序列表《ol》列表项《li》

自定义列表《dl》

<dl> 	<dt>名词1</dt> 	<dd>小弟</dd> <dl>

注：列表标签中只能放li（自定义除外），但《li》可以放其他元素

4.12表单标签

包括（表单域、表单控件、提示信息）

4.12.1表单域《form》

《form》标签

<form action="url地址"> methon="提交方式" name="表单域名称"> 	各种表单元素控件 </form>
属性 属性值 作用
action url地址 用于指定接受并处理表单数据的服务器程序的url地址
method get/post 用于设置表单数据的提交方式，其取值为get或post
name 名称 用于指定表单的名称，以区分同一个页面中的多个表单域

4.12.2 表单控件《input》《select》《textarea》

  1. 《input/》<--单标签 输入表单元素，《input type=”属性值“/》
  2. 《select》下拉表单元素
  3. 《textarea》文本域元素

4.12.3 提示信息元素定义标签 《label》标签

《label》可以绑定一个表单元素，当点击《label》标签内的文本时，浏览器会自动聚焦到相对应的表单元素上

《label for=“sex”》男《/label》

《input type=”radio“ name=”sex“ id=”sex“/》

这个for的属性值和id的要一样

4. 13 扩展内容（块元素和行内元素）

4.13.1 块元素

块元素会排斥别的元素和他位于同一行，一般情况下，块元素内部可以容纳其他块元素和行内元素。

块元素 说明
h1~h6 标题元素
p 段落元素
div div元素
hr 水平线
ol 有序列表
ul 无序列表

4.13.2 行内元素

行内元素只可以容纳其他行内元素，不可以容纳其他元素

行内元素 说明
stong 粗体元素
em 斜体元素
a 超链接
span 常用行内元素，结合css定义样式

便宜好用的国外VPS推荐