我要走走看看
我要走走看看

HTML学习笔记

本文章是基于B站pink老师的视频和PPT，结合个人认为重点的部分以及自身模糊的知识点进行归纳。

一、HTML简介

1. 什么是HTML？

HTML 指的是超文本标记语言 (Hyper Text Markup Language) ，它是用来描述网页的一种语言。

HTML 不是一种编程语言，而是一种标记语言 (markup language)。

标记语言是一套标记标签 (markup tag)。

所谓超文本，有 2 层含义：

  1. 它可以加入图片、声音、动画、多媒体等内容（超越了文本限制 ）。

  2. 它还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接（超级链接文本 ）。

二、HTML标签（上）

1. HTML基本结构标签

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

HTML 文档的的后缀名必须是 .html 或 .htm ，浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。

           //当前页面采取的是 HTML5 版本来显示网页

注意:

1.声明位于文档中的最前面的位置，处于标签之前。

2.不是一个HTML标签，它就是文档类型声明标签。

<html lang="zh-CN">         //定义语言为中文  

<meta charset=" UTF-8" />

2. HTML常用标签

2.1 标题标签

-

标签语义：作为标题使用，并且依据重要性递减。

特点：

  1. 加了标题的文字会变的加粗，字号也会依次变大。
  2. 一个标题独占一行。

2.2 段落和换行标签

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

标签语义：可以把 HTML 文档分割为若干段落。

特点：

  1. 文本在一个段落中会根据浏览器窗口的大小自动换行。
  2. 段落和段落之间保有空隙。
<br/>

标签语义：强制换行。
特点：


  1. 是个单标签。

  2. 标签只是简单地开始新的一行，跟段落不一样，段落之间会插入一些垂直的间距。

2.3 文本格式化标签

语义 标签 说明
加粗 或者 更推荐使用标签加粗语义更强烈
倾斜 或者 更推荐使用标签加粗语义更强烈
删除线 或者 更推荐使用标签加粗语义更强烈
下划线 或者 更推荐使用标签加粗语义更强烈

2.4
和标签

特点：

  1. 标签用来布局，但是现在一行只能放一个
    。大盒子
  2. 标签用来布局，一行上可以多个 。小盒子

2.5 图像标签和路径

<img src="图像URL" />

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

所谓属性：简单理解就是属于这个图像标签的特性。

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

① 图像标签可以拥有多个属性，必须写在标签名的后面。

② 属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。

③ 属性采取键值对的格式，即 key=“value" 的格式，属性 =“属性值” 。

相对路径分类 符号 说明
同一级路径 图像文件位于HTML文件同一级
下—级路径 / 图像文件位于HTML文件下一级如
上一级路径 …/ 图像文件位于HTML文件上一级如

2.6 超链接标签

<a href="跳转目标" target="目标窗口的弹出方式"> 文本或图像 a>
属性 作用
href 用于指定链接目标的url地址，(必须属性)当为标签应用href属性时，它就具有了超链接的功能
target 用于指定链接页面的打开方式，其中_self为默认值，_blank为在新窗口中打开方式。

锚点链接：点我们点击链接,可以快速定位到页面中的某个位置。

  • 在链接文本的href属性中，设置属性值为#名字的形式，如：第2集
  • 找到目标位置标签，里面添加一个id属性=刚才的名字，如：

    第2集介绍

3. HTML 中的注释和特殊字符

3.1 特殊字符

特殊字符 描述 字符的代码
空格符  
< 小于号 <
> 大于号 >

三、HTML标签（下）

1. 表格标签

1.1 表格的基本语法

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

一般表头单元格位于表格的第一行或第一列，表头单元格里面的文本内容加粗居中显示.

标签表示 HTML 表格的表头部分(table head 的缩写)

1.2 表格属性

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

1.3 表格结构标签

  1. ：用于定义表格的头部。 内部必须拥有 标签。 一般是位于第一行。
  2. ：用于定义表格的主体，主要用于放数据本体 。
  3. 以上标签都是放在
    标签中

1.4 合并单元格

合并单元格三步曲：

1.先确定是跨行还是跨列合并。

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

2.找到目标单元格。写上合并方式 = 合并的单元格数量。比如：。

  • 跨行：最上侧单元格为目标单元格, 写合并代码
  • 跨列：最左侧单元格为目标单元格, 写合并代码

3.删除多余的单元格。

2. 列表标签

2.1 无序列表

    1. 中只能嵌套
    • ，直接在
        标签中输入其他标签或者文字的做法是不被允许的。

      • 与
        • 之间相当于一个容器，可以容纳所有元素。

      2.2 有序列表

        1. 中只能嵌套
        1. ，直接在
            标签中输入其他标签或者文字的做法是不被允许的。

          2.3 自定义列表

          在 HTML 标签中，

          标签用于定义描述列表（或定义列表），该标签会与
          （定义项目/名字）和
          （描述每一个项目/名字）一起使用。

          <dl>
	<dt>名词1dt>
	<dd>名词1解释1dd>
	<dd>名词1解释2dd>
dl>
          1. 里面只能包含
            和
            。
          2. 和
            个数没有限制，经常是一个
            对应多个
            。

          3. 表单标签

          3.1 表单的组成

          在 HTML 中，一个完整的表单通常由表单域、表单控件（也称为表单元素）和 提示信息3个部分构成。

          3.2 表单域

          表单域是一个包含表单元素的区域。

          在 HTML 标签中，

          标签用于定义表单域，以实现用户信息的收集和传递。

          会把它范围内的表单元素信息提交给服务器.

          属性 属性值 作用
          action url地址 用于指定接收并处理表单数据的服务器程序的url地址。
          method get/post 用于设置表单数据的提交方式，其取值为get或post。
          name 名称 用于指定表单的名称，以区分同一个页面中的多个表单域。
          1. 在我们写表单元素之前,应该有个表单域把他们进行包含.
          2. 表单域是 form标签.

          3.3 表单控件(表单元素)

          3.3.1 标签

          在 标签中，包含一个 type 属性，根据不同的 type 属性值，输入字段拥有很多种形式（可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等）。

          <input type="属性值" />

          type的属性值：

          属性值 描述
          button 定义可点击按钮(多数情况下，用于通过JavaScript启动脚本)。
          checkbox 定义复选框。
          file 定义输入字段和"浏览"按钮，供文件上传。
          hidden 定义隐藏的输入字段。
          image 定义图像形式的提交按钮。
          password 定义密码字段。该字段中的字符被掩码。
          radio 定义单选按钮。
          reset 定义重置按钮。重置按钮会清除表单中的所有数据。
          submit 定义提交按钮。提交按钮会把表单数据发送到服务器。
          text 定义单行的输入字段，用户可在其中输入文本。默认宽度为20个字符。

          input其他属性：

          属性 属性值 描述
          name 由用户自定义 定义input元素的名称。
          value 由用户自定义 规定input元素的值。
          checked checked 规定此input元素首次加载时应当被选中。
          maxlength 正整数 规定输入字段中的字符的最大长度。
          1. name 和value 是每个表单元素都有的属性值,主要给后台人员使用.
          2. name 表单元素的名字, 要求 单选按钮和复选框要有相同的name值.
          3. checked属性主要针对于单选按钮和复选框, 主要作用一打开页面,就要可以默认选中某个表单元素.
          3.3.2 

          //<label> 标签的 for 属性应当与相关元素的 id 属性相同。
    
<label for="sex">男label>
<input type="radio" name="sex" id="sex" />
          3.3.3 标签控件定义下拉列表

          <select>
	<option>选项1option>
	<option>选项2option>
	<option>选项3option>
	...
select>