HTML学习总结

我奋斗，所以我快乐

下面是对HTML的知识点做一个总结（这是一个艰辛的过程，不过还是很happy）。

一、基本概念

对于没有任何计算机基础知识的小伙伴来说，可能在学习HTML之前，需要去了解一些基本概念，这样方便对后面知识点的学习、理解与掌握。

二、HTML的基础知识

什么是HTML？

HTML是超文本标记语言（全称：Hypertext Markup Language），主要是用来给文本添加语义的，它利用各种标签来标识文档的结构以及标识超链接的信息。

HTML基本结构及说明

head内部标签
- meta标签
  - 作用：指定字符集
  - 格式：
  - GBK(GB2312)和UTF-8区别
  1、GBK(GB2312)里面存储的字符比较少, 仅仅存储了汉字和一些常用外文，体积比较小。
  2、UTF-8里面存储的世界上所有的文字，体积比较大。
常见的DOCTYPE有如下几种
- XHTML1.0
- HTML4.0.1
- HTML5
HTML标签分类
- 单标签：只有开始标签没有结束标签, 也就是由一个<>组成的
```
如：
、
 等
```
- 双标签：有开始标签和结束标签, 也就是由一个<>和一个组成的
```
如：
```
HTML标签关系分类
- 并列关系(兄弟/平级)
- 嵌套关系(父子/上下级)
```
 
   
  百度一下,你就知道123
```
常用开发工具
- Sublime、WebStorm、Dreamwaver

三、HTML的基础标签

H系列标签
- 作用：给文本添加标题语义
- 语法：标题文字，其中“#”代表数字1-6中的任意一个，从数字1到数字6，标题大小排列由大到小(数字越大，标题字号就越小)。
段落标签
```
这里表示段落
```
分割线标签：
强制换行标签：
span标签：
- 作用：用来组合文档中的行内元素。
img标签
- 作用：插入图片
- 格式：
```
![](图片路径)
```
- img标签的其他属性：
  - alt：图片无法显示时的提示信息（文字/图片）
  - title：当鼠标移动到图片上时显示的文本
  - width：设置图片的宽度
  - height：设置图片的高度
- 注意点：
img标签插入的图片默认不是占一整行的空间；如果想让图片等比拉伸，只设置图片的高度或者宽度即可。

相对路径和绝对路径
- 绝对路径：从电脑的具体盘符开始寻找资源
- 格式：
```
![](D:/images/pic.png)
```
- 相对路径：一个文件相对于另一个文件的位置寻找需要的资源
- 相对路径设置规则：
  - 相对路径同级：
    
    ；意思是在.html文件所在的文件夹下，找到名为pic的这一张图片（pic.png和.html文件在同一文件夹内）。
  - 相对路径下级：
    
    ；意思是在.html文件所在的文件夹下，找到名为images的文件夹,然后再从images文件夹下找到名为pic的这一张图片（images文件夹和.html文件在同一文件夹内）。
  - 相对路径上级：
    
    ；意思是在放.html文件的文件夹下，找到名为pic的图片（pic.png和.html文件所在的文件夹在同一文件夹内）。

a标签（超链接）
- 格式：
```
xxxxxxxxx
```
a标签中的属性：
- href：指定跳转的目标地址（可以是网络地址，可以是本地地址）
- target：是否保留原始界面取值：_blank（保留，即在新窗口打开目标地址）； _self（不保留，即在当前界面打开目标地址）
- title：悬停文本（只有当鼠标移动到超链接上时才会显示）
a标签的其他用法：
- 假链接
  - 格式1：
```
xxxxxxxxxxxxx  点击之后会自动回到浏览器顶部
```
  - 格式2：
```
xxxxxxxxxxxx 点击之后不会自动回到浏览器顶部
```
- 锚点链接（跳转到当前页面指定的位置）
- 格式：
```
跳转到指定的位置
```
- 在页面的指定位置给任意一个标签添加一个id属性
  
  例如：
```
这个是最终跳转到的目标
```
base标签和a标签结合使用
格式：

```

```

- 注意点：

  > 
1、base标签必须嵌套在head标签里面
2、 如果a标签中指定了target，base标签中也指定了target，那么会按照a标签中指定的来执行

列表标签
- 无序列表（unordered list）
  - 格式：
```
    
    
    
```
  - 应用场景：导航条、新闻列表、商品列表等。
- 有序列表（ordered list）
  - 格式：
```
    
    
    
```
  - 应用场景：排行榜
- 定义列表（definition list）
  - 格式：
```
  
    pc网页制作  
    学习DIV+CSS JS JQ 项目实战  
```
  - 应用场景：图文混排、网站底部相关信息
表格标签
- 格式：
```
    
    姓名
    性别
    
```
- 表格中的属性：
  - border：指定边框的宽度，默认情况下表格的边框宽度为0，看不到
  - cellspacing：指定表格之间的间隙，默认值是2个像素
  - cellpadding：指定单元格边缘和内容之间的内边距，默认值是1个像素
  - width：指定表格的宽度，默认情况下表格的宽度是由内容自动计算出来的
  - height：指定表格的高度，默认情况下表格的高度是由内容自动计算出来的
  - align：规定水平方向对齐方式，它的取值有：center、left、right
  - valign：规定垂直方向对齐方式，它的取值有：center、top、bottom
  - bgcolor：设置表格/行/单元格的背景颜色
- 注意：
  
  因为HTML仅仅是用来添加语义的，所以这些属性仅作为了解，企业开发中用css代替
- 表格中的其他标签：
  - caption标签：给整个表格设置标题
  - 注意：
  一定要嵌套在table标签内部才有效
  一定要紧跟在table标签后面
- 单元格标题标签
  - th标签：给每一列设置标题
- 表格的结构
  - thead标签：用来存放每一列的表头
  - tbody标签：用来存放页面中的主体数据，如果不写会自动加上
  - tfoot标签：用来存放表格的页脚
  - 注意：
  由于部分浏览器对table的这种结构支持不是很好，所以在企业开发中一般都不用严格的按照这种结构来编写
- 合并单元格
  - 横向合并：
    
    colspan：合并当前列的哪几个单元格
  - 纵向合并：
    
    rowspan：合并当前行的哪几个单元格

表单标签
- 作用：用于收集用户信息, 让用户填写、选择相关信息
- 格式：
```
 
      所有的表单内容，都要写在form标签里面
```
input标签

这个标签有很多type的取值，取值的不同就决定了input标签的功能和外观不同

常用type类型：
- 明文输入框
- type="text" 单行文本输入框
- type="password" 密码（maxlength=""）
- type="radio" 单项选择（checked="checked"）
- type="checkbox" 多项选择
- type="button" 按钮
- type="submit" 提交
- type="image" 图片提交
- type="file" 上传文件
- type="reset" 重置
- type="hidden" 隐藏
- type="color" 定义取色板
- type="date" 定义日期选择器
- type="email" 邮箱验证
- type="url" URL验证
给单选设置默认值：

 年龄

注意：给单选、多选设置默认值，前提是同一组内容必须设置相同name属性

label标签
- 作用： label标签不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性
- 注意：
表单元素要有一个id，然后label标签就有一个for属性，for属性和id相同就表示绑定了
所有表单元素都可以通过label绑定

数据列表
- datalist标签（输入datalist存放的数据，会有提示功能）
- 作用：给输入框绑定待选项
- 格式：
```
       
```
多行文本框(文本域)
- textarea标签
- 作用：用于在表单中定义多行的文本输入控件
- 格式：
```
内容
```
- 注意点：
  - cols属性表示columns“列”, 规定文本区内的可见宽度
  - ows属性表示rows“行”, 规定文本区内的可见行数
  - 默认情况下输入框是可以手动拉伸的，可以利用css禁止缩放
  - 格式：
下拉列表
- select标签（只能选择，不能输入）
- 格式：
- 给下拉列表设置默认值
```
 
- 给下拉列表添加分组

 
 

 
```
marquee标签不是W3C推荐的标签, 在W3C官方文档中也无法查询这个标签, 但是各大浏览器对这个标签的支持非常好 W3C推出的新的标签着重内容新插入的文本 ins是Inserted的缩写强调内容 em是Emphasized的缩写已删除的文本 del是Deleted的缩写发现HTML的标签不是一般的多，要是全部记住，这得多烧脑啊。别担心：记不住的话可以去这里查看。

HTML学习总结

一、基本概念

二、HTML的基础知识

三、HTML的基础标签

你可能感兴趣的:(HTML学习总结)