一篇文章了解HTML

一篇文章了解HTML

HTML是一门标签语言，通俗来说就是一门没有变量的语言，是用于网页前端结构架构的一门语言。
我们可以通过使用这些标签来做到将网页必要元素架构出来。
HTML本身是使用浏览器内核来编译的，所以可以不用下载编译器，直接使用text文本文件将后缀名改为 .html 即可。
我们HTML是用来实现web的结构的，通过调用不同的标签来对网页元素进行整理和分类。
HTML语法规范
标签
标签多数是成对出现的
HTML由<>包围的关键词
标签分为单标签和双标签，单标签就是只由一个标签完成的，双标签是需要一个开始标签和结束标签来实现
Eg：
双标签

//开始标签 //结束标签 单标签
标签关系 1、包含关系 包含关系一般存在于双标签中，开始标签和结束标签中包含其他的标签来实现 Eg： Hello word
2 并列关系 两个标签彼此排列，无包含内容 Eg： *

基本结构标签（骨架标签）
每个网页都会有基本的结构标签，下面我们就来介绍一些基本的结构标签

其中 表示文档类型声明，作用是告诉浏览器使用哪种HTML版本来显示网页。 声明位于文档中的最前面的位置。 标签中的lang是标签中的属性，用来定于当前文档显示的语言。 En定义语言为中文，zh-CN定义语言为中文。 标签是文档的头部，在head标签中我们必须要设置

到了这里，你已经可以做出一个基本的网页了，但是你想要在网页中表现出更多的元素，你还需要继续阅读下去

和 标签 他们没有语义，相当于盒子，用来装内容。用于布局网页。

单独占一行，是一个大的盒子，网页中一些具有框的背景就是运用

标签实现的。 一行可以有多个，是小盒子

图像标签
定义HTML页面中图像

Src是标签的必须属性，用于指定图像文件的路径和文件名
在这里我们要强调一下属性的概念。
属性：属于这个图像标签的特性
属性要放在标签名后面，属性之间不分先后顺序，属性采取键值对的格式 例如src=”图像路径”
标签的其他属性：
1、alt=”” 替换文本，图像不能显示时显示的文字
2、title=”” 提示文本，鼠标放到图像上，显示的文字
3、width=”” 设置图像的宽度，如果只设置宽度，图像会根据自身比例自动调节高度
4、height=”” 设置图像的高度
5、border=”” 设置图像边框粗细

路径
通常我们会把图片放到不同的文件夹中，这时要采用路径的方式来指定图片的位置
相对路径：以引用文件所在位置，即图片相对于HTML页面的位置
相对路径包含同级路径、下一级路径、上一级路径三种，分别对应为
1、同级路径：文件位于HTML文件的同一级，即放在同一文件夹中

2、下一级路径：文件位于HTML文件的下一级，即在HTML文件所在文件夹中的文件夹中

3、上一级路径：文件位于HTML文件的上一级

绝对路径：电脑中文件所在的位置
<img src=” D:\Desktop\前端\image.pif”/>

超链接标签

语法规范
文本或图像
属性
Href 指定链接目标的ur地址，（必须属性）
Target 用于指定链接页面的打开方式，_self为默认值，_blank为在新窗口中打开
链接分类
1.外部链接 网站链接跳转到其他网页
2.内部链接 网站内部页面之间的相互链接，直接链接内部页面名称即可 eg:首页
3.空链接：用#代替
4.下载链接：地址链接的是文件或压缩包形式
如果href中是文件或压缩包则直接会下载该文件或压缩包
5.网页元素链接：在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接
6.锚点链接：点击链接可以快速定位到页面中的某个位置
（1）Href属性中，设置属性值为#名字的形式，如第二季
（2）到目标位置标签，添加一个id属性 = 刚才的名字，如

第二季介绍

注释标签

表格标签：
表格主要作用：显示、展示数据
基本语法

//表头单元格中的文字会加粗居中展示 定义表格中的行

单元格内文字	表头单元格

定义表格标签

表格属性：（放在

标签中）
1、align 表示文字在单元格中的对齐方式 left居左 center居中 right居右
2、border 如果等于1表示有边框，如果等于0表示无边框（默认为0）
3、cellspacing 规定单元格之间的空白（默认为2像素）
4、width 规定表格宽度
5、hight 规定表格高度

表格结构标签
把表格分为头部和主体两部分
标签 表示头部区域
标签 表示主体区域

合并单元格：
方式：
跨行合并 rowspan=”合并单元格个数”
最上侧单元格为目标单元格，写合并代码
跨列合并 colspan=”合并单元格个数”
最左侧单元格为目标单元格，写合并代码
列表标签：布局的
无序列表

• 标签表示HTML页面中的项目的无序列表
  
  • 中只能放
  • 不能放其他任何标签
    
  • 标签表示列表项
    
  • 中可以放任何标签
    有序列表
    
    1. 标签用于定义有序列表，列表排序以数字显示
       
    2. 标签来定义列表项
       自定义列表
       使用场景：用于对术语或名词进行解释和描述，定义列表前没有任何项目符号
       

       标签用于定义描述列表，该标签与 （定义项目/名字）和

       （描述每一个项目/名字）一起使用

表单标签
表单用来收集用户信息，做交互效果
组成：表单域、表单控件（也称表单元素）、提示信息。
表单域：包含元素的区域。用来定义表单域，实现用户信息的收集和传递。
会把它范围内的表单元素信息提交给服务器。
这些表单域的名称会在JavaScript中有详细讲解。
Action属性的地址就是该信息提交到的地址。

各种表单元素控件

Method含有两种方法，get和post，get是直接提交到链接地址上，可以直接看到（默认属性），post是上传到请求的body中。
表单元素：
1、input输入表单元素
标签用于收集用户信息
标签中包含一个type必须属性，根据不同的type属性值，输入字段拥有很多形式（可以是文本框、复选框、掩码后的文本控件、单选按钮、按钮等）
（1）文本框：type=”text” 会显示出可以输入任何文字的文本框；通过value=”” 可以在文本框中默认显示””内文字。
（2）密码框：type=”passwoed” 用户看不见输入的文本。
（3）单选按钮：type=”radio” 设置单选按钮，同时需要设置name=”” 属性，name相同的为同一题目。
（4）多选按钮：type=”checkbox” 设置多选按钮，需要设置name属性。
（5）重置按钮：type=”reset” 设置重置，清除表单内所有数据。
（6）提交按钮：type=”submit” 将表单数据发送到服务器内。
（7）图像提交按钮：type=”image” 定义图像形式的提交按钮。
（8）文件上传：type=”file” 定义输入字段和“浏览”按钮，供文件上传。
（9）预置文字：placeholder=”文字内容”
Value属性，规定input元素的值，即默认输出文字。
Checked属性，checked=”checked” 规定此input元素首次加载时就被选择，主要用于单选按钮和复选框（多选按钮）。
Name属性，表单元素的名字，要求单选按钮和复选框按钮有相同的名字。
Maxlength属性，规定输入字段中字符的最大长度。

标签
为input元素定义标注
标签用于绑定一个表单元素，当点击标签内文本时，浏览器会自动将光标跳转到或选择对应表单元素上

Select 下拉表单元素
在页面中，如果有多个选项让用户选择，为节约空间

选项1
选项2
选项3

中至少包含一个
在中定义selected=”selected” 时，当前项即为默认选中项

Textarea 文本域元素
当用户输入内容多时，用

Row=”” 属性，规定多文本显示的行数，cols=”” 属性规定文本每行显示的字数。 标签是滚动文本栏，可以输入不限制的文字数量，它的属性只是限制了其显示元素的数量。

到了这里基本的常用的标签也都介绍完毕了，还有一些标签的属性在本文中并没有介绍，因为我们对网页的修饰主要靠CSS来实现。
HTML是网页制作中的结构制作，在学习过程中以了解常用标签为主，如果在操作中遇到没有见过的标签，可以通过网站进行查找。
希望本篇文章对观看者有帮助。