文章目录
html简介
- html语言就是我们用来写网页的一种语言，它十分的简单，准确来说，html不是编程语言，而是一种标记语言，下面的一些东西就是我学习html的一些收获和笔记。
定义：HTML指的是超文本标记语言（Hyper Text Markup language）
标记语言就是一套标记标签 - 所谓超文本，有两层含义： 1.它恳勇加入图片、声音、动画、多媒体等内容（超越了文本限制） 2.超级链接文本 所以，网页其实就是一个html文件。
- 众所周知，打开一个网页就需要用到浏览器，然而不同的浏览器的内核是不一样的（不同的内核对相同的代码解释起来是不一样的），就像谷歌浏览器的内核就是Blink，国产的浏览器大多数用的内核都是Blink或者Webkit。但是不管什么浏览器都会遵循一个共同的标准，而这个标准就是web标准，我们一定或多或少的听说过web标准，web标准就是由W3C（万维网联盟）组织和其他标准化组织制定的一系列标准的集合。
- web标准的构成 主要包括结构（Structure）、表现（Presentation）、和行为（Behavior）三方面。 结构：结构用于对网页元素进行整理和分类，我们现阶段主要学的就是HTML。 表现：表现用于设置网页元素的办事、颜色、大小等外观样式，主要指的是CSS。 行为：行为是指网页模型的定义及交互的编写，现阶段主要学的是Javascript。
HTML语法规范
- HTML标签是有尖括号包围的关键词，例如
<html>
- 标签分为双标签和单标签（大多数标签都是双标签，只有少部分标签是单标签，因而我们只用记住少数的单标签就可以了，剩下的都是双标签了）
- 标签之间的关系分为包含关系和并列关系
HTML框架
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> </body> </html>- !DOCTYPE是声明，要放在文档的最前面的位置，准确来说不是一个html标签，而是文档类型声明标签
- html lang = "en" 就是说明这是一个英文网页
html lang = "zh-CN" 说明这是一个中文网页 - 是用来防止网页乱码的，UTF-8被称为万国码，我们一般采用UTF-8来保存文字
部分标签的意义及使用方法
标题标签
<h1> </h1> <h2> </h2> <h3> </h3> <h4> </h4> <h5> </h5> <h6> </h6>作用：加了标题标签的文字会变的加粗，字体也会更大，而且标题会独占一行，而且从 h1 到 h6 随着数字的增大，标题的字体会逐级变小。
段落和换行标签
段落标签：
<p>换行标签
<br/>其中换行标签是一个单标签
文本格式化标签
<strong> <em> <del> <ins>这几个标签分别是加粗标签，倾斜标签，删除线标签，下划线标签，这几个标签没什么好介绍的，标签作用如其名。
盒子标签
<div> <span>这两个标签没有语义，就像一个盒子一样，用来装内容和布局，因此我叫它盒子标签，这两个标签是有区别的，其中div是一个大盒子，而span是一个小盒子，一行只能放下一个div标签，然而可以放下多个span标签。
图像标签和路径标签
<img>这是一个单标签，img标签有很多属性
属性 属性值 作用 src 图片路径 alt 文本 替换文本，图像不能显示时用文字 title 文本 提示文字，鼠标放在图像上显示文字 width/height/border px 设置图像的宽度/高度/边框粗细 不分先后顺序 图片的路径分为 相对路径和绝对路径
相对路径又分为三种格式
扫描二维码关注公众号，回复： 12140432 查看本文章
当图片地址在html文件的上一级时
<img src = "文件名.格式" />当图片地址和html文件同一级时
<img src = "文件夹名 / 文件名.格式" />当图片地址在html文件下一级时
<img src = "../ 文件名.格式" />绝对路径：
<img src = "绝对位置 \ 文件名.格式 / "超链接标签
- 链接的语法格式
<a href = "跳转目标" target = "目标窗口的弹出方式">文本或图像</a>href 用于指定链接目标的url地址
target用于指定链接页面的打开方式，它的属性值分为两种，self和blank，其中self是默认值，表示将本页面换成链接页面，blank为在新窗口中打开链接页面。- 链接分类
-
- 外部链接， href = “http：//网址”
- 内部链接， href = “文件名.html”.
- 空连接， href = “#”
- 下载链接，如果href里面的地址是一个文件或者压缩包，就会下载这个文件
- 网页元素链接
- 锚点链接：可以快速定位到页面的位置（就相当于本文章的目录） 锚点 href = “标记” 目标 id = "标记" 锚点链接要在目标位置加上一个id属性，次id属性的值要和锚点链接中的href的值保持一致。
注释
格式：
<!-- 文本 -->
快捷键 : Ctrl+ /特殊字符
在html文件中，有些字符是无法输出的，这时候就需要我们用一些特殊的表示方法将这些字符输出
空格   < < > >表格标签
- 格式
<table><tr><td>...</td></tr></table> <th></th>其中table是表格标签，行标签和单元格标签都得放在表格标签内；tr是行标签，td是每行中间的单元格标签，th是表头单元格。
- 表格属性
-
属性 作用 属性值 align 文本居中、左对齐、右对齐 center / left / right border 规定单元格是否有边框 px cellpadding 表格中文字与边框之间的距离 px cellpacing 单元格与单元格之间的距离 px width/height 表格的长和宽 px - 表格结构标签
<thead>和<tbody>- 合并单元格
跨行合并单元格：
rowspan = 合并单元格的个数
跨列合并单元格：
colspan = 合并单元格的个数列表标签
1.无序列表
<ul> <li>...</li> ... </ul>2.有序列表
<ol> <li>...</li> ... </ol>3.自定义列表
<dl> <dt>...</dt> <dd>...</dd> ... </dl>表单标签
表单包括：表单域，表单控件和提示信息三部分
- 表单域：
<form action = "url地址" method = ”提交方式“ name = "表单域名称"></form>- 表单控件：
-
- input（单标签）
属性 type name value checked maxlength - type属性的属性值
-
type属性的属性值 button checkbox file hidden image password radio reset submit text - 标记标签
<label>lable中的for的属性值要和input中id的属性值保持一致
- 下拉表单
<select> <option>选项</option> ...... <option selected = "selected"> (默认为选中状态) </select>- 文本域
<textarea>文本域可以创建多行文本输入框。
写在最后，这是我学习html时做的一些笔记，主要就记录了html的各种标签的作用，毕竟html就是一种标记语言，学会了标签的使用，html就手到擒来了。
上面的是html中比较常用的一些标签，但不是全部标签。在日常使用过程中，我们经常可能会忘了一些标签的使用方法或格式，又或是我们想用到一些比较不常用的冷门标签，在这里我给大家推荐一个网站W3C(这个是可以直接点的哦)，在这个网站里面我们可以查询一些html和css的所有标签，非常的好用，如果这篇原创文章有帮助到你，我很高兴，祝大家变得更强。