HTML冲浪笔记(一)

最新推荐文章于 2024-04-23 10:13:29 发布
最新推荐文章于 2024-04-23 10:13:29 发布
阅读量3.4w 收藏 855
点赞数 150
分类专栏： # HTML灬炼气期 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Augenstern_QXL/article/details/115419453
版权

✍web前端剑法之HTML

🔥web前端剑法之HTML地址
🔥HTML冲浪笔记(一)https://blog.csdn.net/Augenstern_QXL/article/details/115419453
🔥HTML5冲浪笔记(二)https://blog.csdn.net/Augenstern_QXL/article/details/115599059

✍目录总览

在这里插入图片描述

1、VS插件推荐🔥

插件说明
Chinese中文语言包
Open in Browser右击选择浏览器打开html文件
JS-CSS-HTML Formatter每次保存，都会格式化代码
Auto Rename Tag自动重命名配对的HTML/XML标签
CSS Peek追踪至样式
escook-theme黑马刘龙彬老师主题
Community Material Theme设置颜色主题
Live Server自动监测代码修改并在浏览器响应
vscode-icons设置文件图标作主题

2、 基本结构标签🔥

标签名定义说明
<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.1、文档类型声明标签

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

2.2、lang语言种类

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

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

2.3、字符集

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

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

3、标签🔥

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></strong>
倾斜<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、特殊字符

在这里插入图片描述

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

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>18</td>          </tr>  
        <tr>  <td>林晓</td>     <td>男</td>     <td>18</td>          </tr>        
        <tr>  <td>林晓</td>     <td>男</td>     <td>18</td>          </tr>                        
    </table>
</body>

3.12、表格属性

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

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

3.12.1、表格结构标签

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

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

在这里插入图片描述

3.12.2、合并单元格

  • 跨行合并：rowspan=“合并单元格的个数”
  • 跨列合并：colspan="合并单元格的个数"
<td 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></from>标签用于定义表单域，会把它范围内的表单元素信息提交给服务器

属性属性值作用
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定义图像形式的提交按钮
password定义密码字段。该字段中的字符被掩码
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">
    </form>
</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">   打游戏<input type="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🔥
  • 单选按钮和复选框可以设置checked 属性
  • 当页面打开时候就可以默认选中这个按钮
  • 单选框只能给其中一个加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 属性相同
<label 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>

3.14.4、textarea文本域元素🔥

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

3.15、表单元素总结

表单元素我们学了三大组

  • input 输入表单元素

  • select 下拉表单元素

  • textarea 文本域表单元素

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

生命是有光的
关注
  • 150
    点赞
  • 踩
  • 855
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 18
    评论
专栏目录
蓝色海洋冲浪html5网站模板
04-08
蓝色海洋冲浪html5网站模板
冲浪：冲浪
02-24
冲浪：冲浪
HTML特殊字符符号大全
six6de6的博客
07-15 1万+
最全css标点符号大全
Java基础大总结,web,CSS,JS
XrJ210的博客
08-12 226
自己整理的电子笔记，在线点击目录即可跳转，基础不牢，地动山摇！更重要的是边学边记边回顾！加油！ Java基础大总结： https://blog.csdn.net/Augenstern_QXL/article/details/117482673 Java核心编程总结（一、继承）：https://blog.csdn.net/Augenstern_QXL/article/details/116209463 Java核心编程总结（二、抽象类与接口）：https://blog.csdn.net/Augenstern_
HTML基础及其基本内容
2201_75364879的博客
02-26 147
HTML
HTML我们需要掌握哪些知识点？
lhw19960418的博客
07-02 848
Web标准（面试题） web标准有三层结构，分别是结构（html）、表现（css）和行为（JavaScript） 结构类似人的身体，表现类似人的着装，行为类型人的行为动作 理想状态下，他们三层都是独立的，放到不同的文件里面 什么是HTML？ html是超文本（除文本外的图片、视频等）标记（标签）语言 html标签可以描述网页元素，如：图片标签、文字标签、连接标签等等 标签有自己的语法规范，所有的html标签都是<>表示的 HTML骨架标签 标签分类和关系 分为双标签和单标签，主要使用
HTML学习一
Amumu12138的博客
02-15 449
一、基础学习路线 主要学习PC端网站布局 最终网站: 购物静态网站 目的: 精通网页布局，也是我们前端人员的必备技能，为后面学习JavaScript打下坚实基础 1、HTML5基础 内容: 学习HTML5基础，主要学习最常见的没有兼容性的HTML标签。 2、CSS3基础 内容:学习CSS3基础，主要学习最常用的没有兼容性的CSS样式，利用前面学习的标签完成传统PC端网页布局。 3、H5C3提高 内容:学习HTML5新增的标签、CSS3样式。有一定兼容性，可以与未来更好的接轨、 4、项目—
HTML学习内容的总结
天气
03-10 547
1.HTML的定义 HTML是超文本标记语言（HyperText Markup Language）的缩写。我们用 HTML 来构建 Web 页面。 2.HTML开发环境的配置 ①开发工具 VS Code ②推荐安装的插件 Auto Close Tag、Auto Rename Tag、Code Runner、IntelliSense for CSS、Material Icon、Open HTML in Browser、Path Intelligence等。 3.HTML文档结构分析 HTML 使用"标记"来注
HTML最新总结HTML详细基础入门内容全（附源码）
lyl20040822的博客
03-15 373
HTML最新总结HTML详细基础入门内容全（附源码）
node学习
weixin_43204464的博客
11-22 330
它里面存储了和当前模块有关的信息例子：在文件里console.log(module)Module {id: '.',filename: 'C:\\Users\\Desktop\\node\\07测试.js',paths: []}必须指定 ./或者是…/的路径标识符如果用require（）导入自定义模块时，省略了文件的拓展名，Node.js会按顺序分别尝试加载以下的文件1.按照确切的文件名进行加载2.补全.js拓展名3.补全.json拓展名4.补全.node拓展名5.加载失败终端报错。
HTML（1）——简述HTML的基本内容
qq_54186956的博客
07-18 952
简述HTML的基本内容，包括HMTL的主要发展历史、HTML的文档命名格式、静态网页和动态网页、HTML标签、HTML的基本结构。
HTML基本内容（全）
qq_55192561的博客
08-07 1186
HTML web标准分成三个构成： （1）构成 语言 说明 （2）结构 HTML 页面元素和内容 （3）表现 CSS 网页元素的外观和位置等页面样式（如：颜色、大小等） （4）行为 JS 网页模型的定义与页面交互 是告诉我们使用html5版本 是字符集 gb2312简体字 BIG5繁体字 GBK全部中文 UTF-8包含全世界所有国家需要的字符 相对路径： 下级目录：目标文件在下级目录中： 代码步骤： 1、文件夹名字 2、进入这个文件/ 3.直接写目标文件名字 vs code快捷操作：./ 上级目录： 代码步
HTML的基础知识----基础标签及解释（二）
weixin_72675705的博客
11-19 150
本条讲述的是html的相对路径，绝对路径，超链接，特殊符号，以及一些列表，表格，表单
前端基础复习-HTML
前端知识点总结
07-12 1361
1. HTML 初识 HTML 指的是超文本标记语言 (Hyper Text Markup Language)是用来描述网页的一种语言 H（很）T（甜）M（蜜）L（啦） HTML 不是一种编程语言，而是一种标记语言 (markup language) 标记语言是一套标记标签 (markup tag) 所谓超文本，有2层含义： 因为它可以加入图片、声音、动画、多媒体等内容（**超越文本限制 **） 不仅如此，它还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接（**超级链接文本 **）。 一句
HTML基础知识点
qq_40046544的博客
07-27 8126
网页是一个包含HTML标签的纯文本文件，它可以存放在世界某个角落的某一台计算机中，是万维网中的一页，是超文本标记语言格式。它通常是由图片、文字、链接、声音、视频等元素组成。通过网页浏览器访问。HTML指的是超文本标记语言（HyperTextMarkupLanguage），它是用来描述网页的一种语言。web标准也成为网页标准，它是由一系列标准组成，这些标准大部分由W3C负责定制，也有一些标准由其他标准组织制定。绝对路径指目录下的绝对位置，可以直接到达目标位置，通常从盘符开始的路径。例如D从。...
黑马-大事件项目（总结+BUG修复）
热门推荐
伏城之外的博客
10-18 1万+
前言 最近把Nodejs和Ajax学习了一下，找到一个很不错的练手项目：黑马刘龙彬老师主讲的大事件项目，整体看完，给刘老师点个赞，讲的非常细致，开发流程清晰，涉及的知识点也很精准。另外黑马还为这个项目提供了在线接口文档，并且将后端服务器也上线发布了，真是自学小伙伴的福音啊。最后，再次给黑马程序员和刘老师点个赞。 项目介绍 项目名称 大事件 后端接口文档 说明--ShowDochttps://www.showdoc.com.cn/escook?page_id=3707158761215217
基于java,SpringBoot和HTML实验室预约管理系统设计
最新发布
程序猿大波的博客
04-23 268
本研究旨在设计并实现一个基于Java, Spring Boot和HTML的实验室预约管理系统，以解决实验室资源分配不均、管理混乱和预约流程繁琐等问题。系统采用B/S架构设计，后端使用Spring Boot框架进行开发，前端使用HTML进行页面设计，实现了用户登录、实验室预约、查看预约状态以及管理员对实验室的管理等功能。首先，系统通过Spring Boot实现了快速开发和部署，简化了项目的配置和管理。
P1230 智力大冲浪
02-19
P1230 智力大冲浪是一道经典的编程题目，通常出现在算法竞赛或编程练习中。这道题目的主要目标是通过编程解决一个智力游戏的问题。 具体来说，P1230 智力大冲浪的题目描述如下：给定一个大小为N的整数序列，你需要从中选择若干个数，使得它们的和最大，同时满足以下条件： 1. 不能选择相邻的两个数； 2. 不能选择相邻的三个数。 解决这个问题的一种常见方法是使用动态规划。可以定义一个数组dp，其中dp[i]表示选择前i个数时的最大和。然后可以通过递推关系来计算dp数组的值，最终得到最大和。 具体的动态规划递推关系如下： 1. 如果选择第i个数，则不能选择第i-1个数，因此dp[i] = dp[i-2] + nums[i]； 2. 如果不选择第i个数，则dp[i] = dp[i-1]。 根据以上递推关系，可以从左到右依次计算dp数组的值，最终dp[N]即为所求的最大和。 希望以上介绍对您有帮助！如果还有其他问题，请随时提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 18
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

生命是有光的

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值