HTML笔记整理（个人笔记）

最新推荐文章于 2024-03-29 19:55:23 发布
最新推荐文章于 2024-03-29 19:55:23 发布
阅读量3.6k 收藏 62
点赞数 16
文章标签： html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/w3535222/article/details/123280189
版权

一、基础认知

1.1 认识网页

网页的组成： 文字、图片、音频、视频、超链接

网页背后的本质：前端程序员写的代码

前端的代码通过什么软件转换成用户眼中的页面：浏览器转化（解析和渲染）

1.2 5大浏览器

浏览器：时网页显示、运行的平台、时前端开发必备利器

常见的五大浏览器：

  • IE浏览器、火狐浏览器（Firefox）、谷歌浏览器（Chrome）、Safari浏览器、欧鹏浏览器（Opera）

浏览器市场份额

1.3 渲染引擎

渲染引擎（浏览器内核）：浏览器中专门对代码进行解析渲染的部分

浏览器出品的公司不同，内在的渲染引擎也是不同的：

浏览器 内核备注
IETidentIE、猎豹安全、360极速浏览器、百度浏览器
FireFoxGecko火狐浏览器内核
SafariWebkit苹果浏览器内核
Chrome / OperaBlinkBlink 其实是 Webkit 的分支

注意点：

  • 渲染引擎不同，导致解析相同代码时的 速度、性能、效果也不同的
  • 谷歌浏览器的渲染引擎速度快、性能高、效果好、所以更吸引用户的喜爱（推荐）

1.4 为什么需要Web标准

不同浏览器的渲染引擎不同，对于相同代码解析的效果会存在差异

  • 如果用户想看一个网页，结果用不同浏览器打开效果不同，用户体验极差！

Web标准：让不同的浏览器按照相同的标准显示结果，让展示的效果统一！

1.5 Web标准中分成三个构成

构成语言说明
结构HTML页面元素和内容
表现CSS网页元素的外观和位置等页面样式（如：颜色、大小等）
行为JavaScript网页模型的定义与页面交互

1.6 Web标准的记忆方法

Web标准要求页面实现：结构、表现、行为三层分离

 二、HTML标签

2.1、 基本结构 标签

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

1. HTML 标签是由尖括号包围的关键词，例如 <html>

2. HTML 标签通常时成对出现的，例如 <html> 和 </html>，我们称为双标签。

一对标签中，第一个标签是开始标签，第二个标签是结束标签。

3. 有些特殊的标签必须是单个标签（极少情况），例如 <br />，我们称为单标签。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>

</html>

2.2、 文档类型声明标签

  • <!DOCTYPE html> 文档声明类型，作用就是告诉浏览器使用那种HTML版本来显示网页
<!DOCTYPE html>
  • 这句代码的意思是：当前页面采取的是 HTML5 版本来显示网页
  • 注意：
  • <!DOCTYPE> 声明位于文档中的最前面的位置，处于 <html> 标签之前
  • <!DOCTYPE> 不是一个 HTML 标签，它就是文档类型声明标签

2.3、 lang语言种类

用来定义当前文档显示的语言

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

2.4、 字符集

在 <head> 标签内，可以通过 <meta> 标签的 charset 属性来规定 HTML 文档应该使用那种字符编码

<meta charset="UTF-8">
  • charset 常用的值有：GB2312、BIG5、GBK 和 UTF-8，其中 UTF-8 被称为万国码，基本包含了全世界所有国家需要用到的字符

三、 标签

3.1、 标题标签

<body>
    <h1> 一级标题</h1>
    <h2> 二级标题</h2>
    <h3> 三级标题</h3>
    <h4> 四级标题</h4>
    <h5> 五级标题</h5>
    <h6> 六级标题</h6>
</body>
  • 加了标题的文字会变的加粗，字号也会以此变大
  • 一个标题独占一行

3.2、段落标签

<p>段落标签</p>
  • paragraph 的缩写
  • 文本在一个段落这种会根据浏览器窗口的大小进行自动换行
  • 段落和段落之间保有空隙

3.3、 换行标签

<br />
  • <br /> 是个单标签
  • <br /> 标签只是简单的开始新的一行，跟段落不一样，段落之间会插入一些垂直的间距

3.4、 文本格式化标签

  • 为文字设置粗体、斜体、下划线等效果
语义标签
加粗<strong></stroung>
倾斜

<em><em>

删除线<del></del>
下划线<ins></ins>
  • 重点记忆 加粗 和 倾斜

3.5、 盒子标签

  • <div></div>: 一行只能放一个大盒子
  • <span></span>: 一行可以放多个小盒子
<div>这是头部</div>
<span>今日价格</span>

3.6、图像标签

<img src="pink1.jpg" alt="我是黄伟" title"我是黄伟" />
  • src 是 <img> 标签的必须属性，它用于指定图像文件的路径和文件
属性属性值说明
src图片路径必须属性
alt文本替换文本（当图片不能显示的时候显示文字）
title文本提示文本（鼠标放到图像上，显示的文字）

3.7、路径

3.7.1、 相对路径

相对路径分类符号说明
 同一级路径图形文件位于 HTML 文件同一级 如 <img src="1.png">
 下一级路径/图形文件位于 HTML 文件下一级 如 <img src="images/1.png">
上一级路径../图形文件位于 HTML 文件上一级 如 <img src="../1.png">

3.7.2、绝对路径

  • 绝对路径：是指目录下的绝对位置，直接达到目标位置，通常是从盘符开始的路径

3.8、 超链接标签

<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
属性作用
href用于指定链接目标的url地址。必须属性
target用于指定连接页面的打开方式。_self 为默认值， _blank 为在新窗口中打开
  • 如果 href 里面地址是一个文件夹或者压缩包，会下载这个文件
<a href="img.zip"></a>

3.9、 锚点链接

作用：点击链接，可以快速定位到页面中的某个位置

  • 在链接文本的 href 属性中，设置属性值为 #名字
  • 找到目标位置标签，里面添加一个 id属性=刚才的名字
<a href = "#two">黄伟</a>
<h3 id = "two">黄伟牛</h3>

3.10、 注释

注释快捷键为 ctrl + /

注释以 <!-- 开始 以 --> 结束

<!-- 注释语句 -->

3.11、 特殊字符

特殊字符描述字符的代码
空格符&nbsp;
<小于号&lt;
>大于号&gt;
&和号&amp;
￥人民币&yen;
©版权&copy;
®注册商标&reg;
℃摄氏度&deg;
±正负号&plusmn;
×乘号&times;
➗除号&divide;
²平方2(上标2)&sup2;
³平方3(上标3)&sup3;

重点记住：空格、大于号、小于号 这三个，其余的使用的很少，如果需要使用回头查阅即可

3.12、 表格标签

  • table 用来定义表格的标签
  • tr 用来定义表格中的行，必须嵌套在 <table></table> 标签中
  • td 用来定义表格中的单元格，必须嵌套在 <tr></tr> 标签中
  • th 用来定义表格中的表头，表头单元格里面的内容加粗居中显示
<body>
     <table>
          <tr> <th>姓名</th>   <th>性别</th>   <th>年龄</th>    </tr>
          <tr> <td>黄伟</td>   <td>男</td>   <td>25</td>    </tr>
          <tr> <td>黄伟</td>   <td>男</td>   <td>25</td>    </tr>
          <tr> <td>黄伟</td>   <td>男</td>   <td>25</td>    </tr>
     </table>
</body>

3.12.1、 表格属性

表格标签的属性实际开发并不常用，因为基本都是通过后面的CSS来设置的

属性名属性值描述
alignleft,center,right规定表格相对周围元素的对齐方式
border1或者" "规定表格单元是否拥有边框，默认为" "，表示没有边框
cellpadding像素值规定单元边沿于其内容之间的空白，默认1像素
cellspacing像素值规定单元格之间的空白，默认2像素
width像素值或百分比规定表格的宽度
<table alian=center border="1" cellpadding="20" cellspacing="0" width="500">

3.12.2、 表格结构标签

为了更好的表示表格的语义，可以将表格分割成 表格头部 和表格主体两个部分

  • 用 <thead></thead> 标签表示表格的头部区域， <thead> 内部必须拥有 <tr> 标签，一般是位于第一行
  • 用 <tbody></tbody> 标签表示表格的主体区域，主要是用于放数据本体
  • 以上标签都是放在 <table></table> 标签中

3.12.3、 合并单元格

  • 跨行合并：rowspan="合并单元格的个数"
  • 跨列合并：colspan="合并单元格的个数"
<tb colspan = "2"></td>

3.13、 列表标签

无序列表：<ul>

有序列表：<ol>

最定义列表：<dl>

标签名定义说明
<ul></ul>无序列表里面只能包含li，没有顺序，li里面可以包含任何标签
<ol></ol>有序列表里面只能包含li，有顺序
<dl></dl>自定义列表里面只能包含dt和dd，dt和dd里面可以放任何标签
<dl>
    <dt>关注我们</dt>
    <dd>新浪微博</dd>
    <dd>联系我们</dd>
</dl>

3.14、 表单标签

一个完整的表单通常由表单域，表单控件（表单元素）和提示信息3部分组成

3.14.1、表单域

  • 表单域是一个包含表单元素的区域
  • <form></form> 标签用于定义表单域，会把它范围内的表单元素信息提交给服务器
属性属性值作用
actionurl地址用于指定接收并处理表单数据的服务器程序的url地址
methodget/post用于设置表单数据的提交方式，其取值为get或post
name名称用于指定表单的名称，以区分同一个页面中的多个表单域
<form action="url地址" method="提交方式" name="表单域的名称">

</form>

3.14.2、 表单控件(表单元素)

①input输入表单元素

  • input 输入表单元素
  • input 是个单标签， type 属性设置不同的属性用来指定不同的控件类型（文本字段、复选框、单选框、按钮等）

type 属性的属性值及描述如下：

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

除 type 属性外，<input> 标签还有很多其他很多属性，其常用属性如下：

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

②文本框与密码框

  • type 属性设置为 text 是文本框
  • type 属性设置为 password 是密码框
<body>
   <form>
       用户名: <input type="text"> <br />
       密码: <input type="password">
   </fotm>
</body>

③单选框和复选框

  • type 属性设置为 radio 是单选框
  • type 属性设置为 checkbox 是复选框
  • name 是表单元素的名字，要求 单选框和复选框要有相同的name值
<form>
  用户名:<input type="text"><br /> 
  密码:<input type="password"> <br />
  <!-- radio是单选框，可以多选一 -->
  性别: 男<input type="radio"> 女 <input type="radio">
  <!-- checkbox是多选框，可以多选 -->
  爱好: 吃饭<input type="checkbox"> 睡觉<input type="checkbox"> 打游戏<inputtype="checkbox">
</form>

④name和value属性

  • name属性：当前input表单的名字，后台可以通过这个name属性找到这个表单，name的主要作用就是用于区别不同的表单
<form>
        用户名:<input type="text" value="请输入用户名"><br /> 密码:<input type="password"> <br />
        <!-- radio是单选框，可以多选一 -->
        <!-- name是表单元素的名字，这里的性别单选按钮必须有相同的名字name，才能实现多选一 -->
        性别: 男<input type="radio" name="sex" value="男"> 女 <input type="radio" name="sex" value="女">
        <!-- checkbox是多选框，可以多选 -->
        爱好: 吃饭<input type="checkbox" name="habby" value="吃饭"> 睡觉<input type="checkbox" name="habby" value="睡觉"> 打游戏<input type="checkbox" name="habby" value="打游戏">
</form>
  • 注意：单选框和复选框name必须一致，value可以不一样

⑤checked和maxlength

  • 单选按钮和复选框可以设置cheked 属性
  • 当页面打开的时候就可以默认选中这个按钮
  • 单选框只能给其中一个加checked，复选框可以多加
性别: 男<input type="radio" name="sex" value="男" checked="checked"> 女 <input type="radio" name="sex" value="女">
  • maxlength：规定最多输入多少个字符

⑥submit和reset

  • type 属性设置为submit：提交按钮会把表单数据发送到服务器
  • type 属性设置为 reset：重置按钮会清楚表单中的所有数据

⑦button和文件域

  • type 属性设置为button：是一个按钮
  • type 属性设置为file：是一个文件域，可以上传文件
 <input type="button" value="获取短信验证码"> <br />
        <!-- 文件域: 上传文件使用的 -->
        上传头像： <input type="file">

⑧label

  • label 标签用于绑定一个表单元素，当点击 <lable> 标签内的文本时，浏览器就会自动将焦点(光标)转到表单元素上，用来增加用户体验
  • label 标签的 for属性 应当与相关的 id 属性相同
<lable for="sex"> 男 </lable>
<input type="radio" name="sex" id="sex">

3.14.3、 select下拉表单元素

  • 下拉表单元素
  • <select> 中至少包含一对 <option>
  • 在 <option> 中定义 selected="selected" 时，当前项即为默认选中项
<select>
        <option selected="selected">选项1</option>
        <option>选项2</option>
        <option>选项3</option>
        ...
</select>

13.14.4、 textarea 文本域元素

  • 用于定义多行文本输入的控件
 <textarea>
      文本内容
</textarea>
  • cols = "每行中的字符数"，rows = "显示的函数"，我们在实际开发中不会使用，都是用CSS来改变大小

3.15、 表单元素总结

表单元素我们学了三大组

  • input 输入表单元素
  • select 下拉表单元素
  • textarea 文本域表单元素

这三组表单元素都应该包含在 form 表单域里面，并且有 name 属性

龙王黄伟
关注
  • 16
    点赞
  • 踩
  • 62
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
Python学习个人笔记整理
04-24
【Python学习个人笔记整理】 本笔记集合是基于廖雪峰老师的Python学习课程编写的，旨在为学习者提供一个系统的、全面的Python学习资料。通过这些笔记，你可以深入了解Python语言的基础和高级特性，以及如何利用...
HTML学习笔记(全)
weixin_63676550的博客
01-12 5631
HTML学习笔记 视频教程：https://b23.tv/LbTHmRE
【HTML】HTML学习笔记（全）
Bitdancing的专栏
12-09 1万+
前端HTML学习笔记大全
HTML学习笔记
weixin_48373085的博客
01-22 402
HTML标签
Java Web开发面试题一套(1)
jardownload的博客
08-12 374
选择题(没有注明多选，则为单选)，每题2分 1.下面哪个不是Form的元素? (   ) A. Input    B:  textarea        C:   select    D:  table 2. HTML页面中，下面哪个表示空格(    ) A.&amp;    B.&nbsp;    C.&copy;    D.&lt; 3.中的align属性是什么含义? (   ) A. 加粗...
HTML中name和class，id的区别和联系
m0_74293254的博客
09-15 1808
name属性用于标识表单元素；class属性用于为一个或多个元素指定类名，以便共享样式和脚本；id属性用于唯一标识一个特定的元素，方便选择和操作。在HTML中，name、class和id是用于标识和选择元素的属性。
HTML笔记总结
09-13
主要是个人总结笔记，博主主要是为了存储，如果有需要的同学还没有分的可以邮箱联系我605037699@qq.com
整理的个人学习HTML和CSS的笔记.zip
03-20
html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目...
Javascript 个人笔记（没有整理，很乱）
10-30
- **HTML元信息**：可以通过在`<head>`标签内添加`<meta>`标签来控制浏览器的行为，例如禁止浏览器显示图片工具栏。 ```html ``` ### JavaScript技巧与实践 #### 锚点链接处理 - **阻止锚点链接跳转至页面...
传智播客Html5课程笔记
08-23
传智播客Html5课程笔记，整理了Html5新增的语义标签，新语法与使用，个人的心血总结，很有价值含量
学习笔记整理：网页设计-html
Aure_xl的博客
07-29 771
网页设计中基础的html结构
HTML笔记（全）
程序猿小九九的博客
06-04 3421
HTMLHTML5HTML5的优势W3C标准常见IDEhtml基本机构、等成对的标签，分别叫开放标签，和闭合标签单独呈现的标签（空元素），如意为用/来关闭空元素 03.网页基本标签 标题标签 段落标签 换行标签 水平线标签 字体样式标签 注释和特殊符号 04.图像标签 常见的图像格式 05.超链接标签及应用 文本超链接 图像超链接 超链接 06.块元素和行内元素 块元素 无论内容多少，该元素独占一行 (p、h1-h6、…) 行内元素 内容撑开宽度，左右都是行内元素的可以排在一行 (a
HTML中的单选按钮实现男女性别选择
热门推荐
.net专栏
05-10 10万+
 HTML中的单选按钮实现男女性别选择，不让男女同是都能都能选择，实现方法：在按钮的属性里写一个name属性，并且把name的值设置成相同的例：男女
2020-11-13HTML核心知识点
weixin_46048018的博客
11-13 246
HTML核心知识点 form表单标签 写法：<form></form> 作用：是为了将用户通过浏览器输入的数据提交到服务器。 <form>标签所包含的重点属性：action、method、enctype action：指定数据需要提交到的服务器路径 method：指定数据提交的方式，有GET与POST 两种提交方式 enctype：一般在做文件上传的时候用，设置enctype=“multipart/form-data”即可 .
HTML入门学习笔记 （案例+详解）
m0_61275667的博客
06-18 979
可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>.11 <img src="海葡萄.jpeg" width="200px" height="100px" alt="海葡萄">
Java复习第十三天学习笔记（HTML），附有道云笔记链接
最新发布
m0_62220699的博客
03-29 1761
春阳路大润发秦老师</td> --> <td>UI2303</td> </tr> <tr> <td>鞠老师</td> <td>H52303</td> </tr> </table> <table border="1" cellspacing="0" width="400px"> <tr> <th>讲师名称</th> <th>所教班级</th> </tr> <tr> <td colspan="2">朱老师
自己写的html笔记
TID12的博客
04-25 118
定义文档的标题，也就是网页上显示的标签，该标签是写head标签中必须包含的标签。定义文档的主题，body元素包括了文档的所有内容（文本，超链接，表格，图像等等）会直接呈现在网页上给用户看。是一种用来描述网页的语言，被称为超文本语言，用其编写的语言要以.html结尾，其中的标签有包括两种。由容器和控件组成的，包括用户的信息输入框，提交按钮等，输入框叫做控件，表单就是容器，能容纳各种控件。用来描述一个HTML的网页文档的属性，关键词等，列如 就是使用的是utf-8的编码格式。（后期可通过css修改）
HTML与CSS学习笔记：基础与常见标签解析
“Html+Css.doc 是一份个人整理的HTML与CSS学习笔记，共计120页，内容清晰，包括效果截图和代码示例，非常适合HTML和CSS初学者作为参考。” HTML（HyperText Markup Language）是一种标记语言，常用于创建网页。CSS...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值