MOOC web前端开发笔记（二）：HTML

最新推荐文章于 2022-08-25 12:18:28 发布

SpringRolls

最新推荐文章于 2022-08-25 12:18:28 发布

阅读量269

点赞数

分类专栏：前端

原文链接：https://www.cnblogs.com/z-y-k/p/11503620.html

版权

前端专栏收录该内容

56 篇文章 4 订阅

订阅专栏

HTML

HTML概述

HTML（HyperText MarkUp Language）
"超文本标记语言"，以标签的形式规定网页结构，它是制作网页的标准语言
HTML不区分大小写

标签、元素与属性

1.由尖括号包围，比如<pre><title></pre>
2.通常是成对出现的，也可以单独出现。
标签要有正确的嵌套，如：
<pre><html><bodt></body><html></pre>
标签加上标签里的内容就变成了元素。如：
<title>hello,world</title>就是一个元素。
被嵌套的元素称为嵌套元素的子元素，反之可以说是父元素，同级元素是兄弟元素，如：

<html> 外层：父元素
   <head> 内层：子元素
   </head>     同级：兄弟元素
   <body> 内层：子元素
   </body>
</html>

这些关系可以用一个树来表示，我们称为：HTML DOM树（Document Object Model）（文档对象模型）
标签中可以带有一些属性来描述这个标签，属性的顺序无关。

HTML的文件结构

第一行会有一个 <!DOCTYPE html> 表示文档类型 符合 html5 标准
最外层有一堆 html标签，表示 文件的开始和结束，它的 lang属性 代表其是中文网页还是英文网页，提供给搜索引擎，内部第一个部分比较重要的一堆 head标签，它表示的就是 文件的头部信息，这是网页对浏览器和搜索引擎提供的信息。
内层标签 body 表示 网页的主题内容，网页的主题内容会呈现在浏览器的主体部分。

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Document
</head>
<body>
</body>
</html>

HTML编辑器

记事本
Adobe DW
Sublime Text3
webstorm

html标签

html：代表文件的开始和结束，它的属性有lang，表示其为什么类型的网页。
meta：meta表示文件的元数据，具体可见博客HTML meta标签总结与属性使用介绍
注意，meta的字符集属性必须与文件的保存字符集属性相同。
h1~h6：标题标签，标题级数越大，字体大小越小，通常一个网页只有一个h1。
p：段落标签，每个段落自动换行，段落内部文字忽略连续空格（可以用&nbsp），也不会显示空行，且不会换行
br：段内换行，记得加斜杠。
pre：预留格式标签，文本中的空格和换行符会被保留，适合显示计算机代码。
span：组合行内元素，以便通过CSS样式来格式化。
hr：水平线标签，添加水平线。
!-- --：注释标签。
a：超链接标签，用于链接其他网页，href属性用于说明链接网址，需要说明协议名字（如：http://），也可以使用虚拟超链接，用#表示。
img：插入图像标签，src属性：文件路径+文件名，表示图片的地址，alt属性表示图片无法显示时显示的文本。
div：区域标签，属性：id（CSS中用），align：对齐方式。
ul：无序列表
ol：有序列表
li：列表项
table：表格标签，属性border表示表格的宽度
tr：表示table row，即表格的行。
td：表示表格的列。
th：把表格元素加粗显示。
form：表单标签，action属性与后端相关。
input：文本输入框/按钮，type属性，代表文本框类型，如text，password。name属性供给后端，如果type为submit、reset、radio和checkbox会有value属性，checked属性规定该选项是否已被选择。对了一组单选框name属性一定要一致啊。
select：下拉列表框标签。
option：选项标签，selected属性表示默认的选项。
textarea：文本区标签,属性cols代表列，rows代表行。