1-前端基本知识-HTML
1-前端基本知识-HTML
文章目录
- 1-前端基本知识-HTML
- 总体概述
- 什么是HTML?
- 超文本
- 标记语言
- HTML基础结构
- 文档声明
- 根标签
- 头部元素
- 主体元素
- 注释
- HTML概念词汇:标签、属性、文本、元素
- HTML基本语法规则
- HTML常见标签
- 标题标签
- 段落标签
- 换行标签
- 列表标签
- 超链接标签
- 多媒体标签
- 表格标签(重点)
- 表单标签(重点)
- 常见表单项标签(重点)
- 布局相关标签
- 特殊字符
总体概述
| 语言 | 作用 |
|---|---|
| HTML | 主要用于网页主体结构的搭建(页面元素和内容) |
| CSS | 主要用于页面的美化(页面元素的外观、位置、颜色、大小) |
| JavaScript | 主要用于页面元素的动态处理(交互效果) |
什么是HTML?
HTML是Hyper Text Markup Language的缩写,意思是超文本标记语言
超文本
- HTML文件本质上是文本文件
- 普通的文本文件只能显示字符,但是HTML技术则通过HTML标签把其他网页、图片、音频、视频等各种多媒体资源引入到当前网页中,让网页有了非常丰富的呈现方式
- 超文本就是:本身是文本,但是呈现出来的最终效果超越了文本
标记语言
- HTML是由一系列标签组成的,每个标签都有它固定的含义和确定的页面显示效果
- 不像编程语言一样,HTML只有标签,没有变量、常量、流程控制等
HTML基础结构
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>我的第一个网页</title></head><body>hello html!!!</body>
</html>
文档声明
HTML文件第一行内容
-
HTML文档声明有两类:HTML4和HTML5(现在用)
-
HTML4的文档声明
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> -
HTML5的文档声明
<!DOCTYPE html>
根标签
整个文档的根标签,其他所有标签都要放到里面
<html lang="en">.......
</html>
头部元素
用于定义文档的头部,其他头部元素都放在head标签里
- 头部元素包括title标签、script标签、style标签、link标签、meta标签等
<html lang="en">.......
</html>
主体元素
body标签定义网页的主体内容,在浏览器窗口内显示的内容都定义到body标签内
注释
<!-- 注释内容 -->
HTML概念词汇:标签、属性、文本、元素
| 概念 | 解释 |
|---|---|
| 标签 | 代码中的一个 <> 叫做一个标签,有些标签成对出现,称之为双标签(一个叫开始标签;一个叫结束标签);有些标签单独出现,称之为单标签 |
| 属性 | 一般在开始标签中,用于定义标签的一些特征 |
| 文本 | 双标签中间的文字,包含空格换行等结构 |
| 元素 | 经过浏览器解析后,每一个完整的标签(标签+属性+文本)可以称之为一个元素 |
HTML基本语法规则
-
1 根标签有且只能有一个
-
2 无论是双标签还是单标签都需要正确关闭
-
3 标签可以嵌套但不能交叉嵌套
-
4 注释语法为 ,注意不能嵌套
-
5 属性必须有值,值必须加引号,H5中属性名和值相同时可以省略属性值
-
6 HTML中不严格区分字符串使用单双引号
-
7 HTML标签不严格区分大小写,但是不能大小写混用
-
8 HTML中不允许自定义标签名,强行自定义则无效
HTML常见标签
标题标签
一般用于在页面上定义一些标题性的内容,如新闻标题,文章标题等,有h1到h6六级标题
<body><h1>一级标题</h1><h2>二级标题</h2><h3>三级标题</h3><h4>四级标题</h4><h5>五级标题</h5><h6>六级标题</h6>
</body>
段落标签
一般用于定义一些在页面上要显示的大段文字,多个段落标签之间实现自动分段的效果
<body><p>记者从工信部了解到,近年来我国算力产业规模快速增长,年增长率近30%,算力规模排名全球第二。</p><p>工信部统计显示,截至去年底,我国算力总规模达到180百亿亿次浮点运算/秒,存力总规模超过1000EB(1万亿GB)。国家枢纽节点间的网络单向时延降低到20毫秒以内,算力核心产业规模达到1.8万亿元。中国信息通信研究院测算,算力每投入1元,将带动3至4元的GDP经济增长。</p><p> 近年来,我国算力基础设施发展成效显著,梯次优化的算力供给体系初步构建,算力基础设施的综合能力显著提升。当前,算力正朝智能敏捷、绿色低碳、安全可靠方向发展。</p>
</body>
换行标签
单纯实现换行的标签是br,如果想添加分隔线,可以使用hr标签
<body>工信部统计显示,截至去年底,我国算力总规模达到180百亿亿次浮点运算/秒,存力总规模超过1000EB(1万亿GB)。<br>国家枢纽节点间的网络单向时延降低到20毫秒以内,算力核心产业规模达到1.8万亿元。<hr>中国信息通信研究院测算,算力每投入1元,将带动3至4元的GDP经济增长。
</body>
列表标签
有序列表: 分条列项展示数据的标签,其每一项前面的符号带有顺序特征
<ol><li>JAVA</li><li>前端</li><li>大数据</li>
</ol>

无序列表:分条列项展示数据的标签, 其每一项前面的符号不带有顺序特征
<ul><li>JAVASE</li><li>JAVAEE</li><li>数据库</li>
</ul>

嵌套列表:有序列表和无序列表嵌套
<ol><li>JAVA<ul><li>JAVASE</li><li>JAVAEE</li><li>数据库</li></ul></li><li>前端</li><li>大数据</li>
</ol>

超链接标签
点击后带有链接跳转的标签 ,也叫作a标签
href属性用于定义连接
- href中可以使用绝对路径,以/开头,始终以一个固定路径作为基准路径作为出发点
- href中也可以使用相对路径,不以/开头,以当前文件所在路径为出发点
- href中也可以定义完整的URL
target用于定义打开的方式
- _blank 在新窗口中打开目标资源
- _self 在当前窗口中打开目标资源
<body><!-- href属性用于定义连接href中可以使用绝对路径,以/开头,始终以一个路径作为基准路径作为出发点href中也可以使用相对路径,不以/开头,以当前文件所在路径为出发点href中也可以定义完整的URLtarget用于定义打开的方式_blank 在新窗口中打开目标资源_self 在当前窗口中打开目标资源--><a href="01html的基本结构.html" target="_blank">相对路径本地资源连接</a> <br><a href="/day01-html/01html的基本结构.html" target="_self">绝对路径本地资源连接</a> <br><a href="http://www.atguigu.com" target="_blank">外部资源链接</a> <br></body>
多媒体标签
img(重点)图片标签,用于在页面上引入图片
<!-- src用于定义图片的连接title用于定义鼠标悬停时显示的文字alt用于定义图片加载失败时显示的提示文字
--> <img src="img/logo.png" title="尚硅谷" alt="尚硅谷logo" />
audio音频标签,用于在页面上引入一段声音
<!-- src用于定义目标声音资源autoplay用于控制打开页面时是否自动播放controls用于控制是否展示控制面板loop用于控制是否进行循环播放
-->
<audio src="img/music.mp3" autoplay="autoplay" controls="controls" loop="loop" />
video视频标签,用于在页面上引入一段视频
<body><!-- src用于定义目标视频资源autoplay用于控制打开页面时是否自动播放controls用于控制是否展示控制面板loop用于控制是否进行循环播放--> <video src="img/movie.mp4" autoplay="autoplay" controls="controls" loop="loop" width="400px" />
</body>
表格标签(重点)
常规表格
- table标签:代表表格
- thead标签:代表表头,可以省略不写
- tbody标签:代表表体,可以省略不写
- tfoot标签:代表表尾,可以省略不写
- tr标签:代表一行
- td标签:代表行内的一格
- th标签:自带加粗和居中效果的td
<h3 style="text-align: center;">员工技能竞赛评分表</h3>
<table border="1px" style="width: 400px; margin: 0px auto;"><tr><th>排名</th><th>姓名</th><th>分数</th></tr><tr><td>1</td><td>张小明</td><td>100</td></tr><tr><td>2</td><td>李小东</td></td><td>99</td></tr><tr><td>3</td><td>王小虎</td><td>98</td></tr>
</table>
单元格跨行
- 通过td的rowspan属性实现上下跨行
<h3 style="text-align: center;">员工技能竞赛评分表</h3>
<table border="1px" style="width: 400px; margin: 0px auto;"><tr><th>排名</th><th>姓名</th><th>分数</th><th>备注</th></tr><tr><td>1</td><td>张小明</td><td>100</td><td rowspan="3">前三名升职加薪</td></tr><tr><td>2</td><td>李小东</td></td><td>99</td></tr><tr><td>3</td><td>王小虎</td><td>98</td></tr>
</table>
单元格跨列
- 通过td的colspan属性实现左右的跨列
<h3 style="text-align: center;">员工技能竞赛评分表</h3><table border="1px" style="width: 400px; margin: 0px auto;"><tr><th>排名</th><th>姓名</th><th>分数</th><th>备注</th></tr><tr><td>1</td><td>张小明</td><td>100</td><td rowspan="6">前三名升职加薪</td></tr><tr><td>2</td><td>李小东</td></td><td>99</td></tr><tr><td>3</td><td>王小虎</td><td>98</td></tr><tr><td>总人数</td><td colspan="2">2000</td></tr><tr><td>平均分</td><td colspan="2">90</td></tr><tr><td>及格率</td><td colspan="2">80%</td></tr></table>
- 效果

表单标签(重点)
可以实现让用户在界面上输入各种信息并提交的一种标签. 是向服务端发送数据主要的方式之一
<form action="http://www.atguigu.com" method="get">用户名 <input type="text" name="username" /> <br>密 码 <input type="password" name="password" /> <br><input type="submit" value="登录" /><input type="reset" value="重置" /></form>
form标签:表单标签,其内部用于定义可以让用户输入信息的表单项标签
- action,属性之一,用于定义信息提交的服务器的地址
- method, 属性之一,用于定义信息的提交方式
- get方式, 数据会缀到url后,以?作为参数开始的标识,多个参数用&隔开
- post方式,数据会通过请求体发送,不会在缀到url后
input标签:主要的表单项标签,可以用于定义表单项
- name,属性之一,用于定义提交的参数名
- type,属性之一,用于定义表单项类型
- text,文本框
- password,密码框
- submit,提交按钮
- reset,重置按钮
常见表单项标签(重点)
单行文本框
个性签名:<input type="text" name="signal"/><br/>
密码框
密码:<input type="password" name="secret"/><br/>
单选框
你的性别是:
<input type="radio" name="sex" value="spring" />男
<input type="radio" name="sex" value="summer" checked="checked" />女
-
name属性相同的radio为一组,组内互斥
-
当用户选择了一个radio并提交表单,这个radio的name属性和value属性组成一个键值对发送给服务器
-
设置checked="checked"属性设置默认被选中的radio
-
如果属性名和属性值一样的话,可以省略属性值,只写checked即可
复选框
你喜欢的球队是:
<input type="checkbox" name="team" value="Brazil"/>巴西
<input type="checkbox" name="team" value="German" checked/>德国
<input type="checkbox" name="team" value="France"/>法国
<input type="checkbox" name="team" value="China" checked="checked"/>中国
<input type="checkbox" name="team" value="Italian"/>意大利
- 设置checked="checked"属性设置默认被选中的checkbox
下拉框
你喜欢的运动是:
<select name="interesting"><option value="swimming">游泳</option><option value="running">跑步</option><option value="shooting" selected="selected">射击</option><option value="skating">溜冰</option>
</select>
- 下拉列表用到了两种标签,其中select标签用来定义下拉列表,而option标签设置列表项。
- name属性在select标签中设置,value属性在option标签中设置。
- option标签的标签体是显示出来给用户看的,提交到服务器的是value属性的值。
- 通过在option标签中设置selected="selected"属性实现默认选中的效果。
按钮
<button type="button">普通按钮</button>或<input type="button" value="普通按钮"/>
<button type="reset">重置按钮</button>或<input type="reset" value="重置按钮"/>
<button type="submit">提交按钮</button>或<input type="submit" value="提交按钮"/>
- 普通按钮: 点击后无效果,需要通过JavaScript绑定单击响应函数
- 重置按钮: 点击后将表单内的所有表单项都恢复为默认值
- 提交按钮: 点击后提交表单
隐藏域
<input type="hidden" name="userId" value="2233"/>
- 通过表单隐藏域设置的表单项不会显示到页面上,用户看不到。但是提交表单时会一起被提交。用来设置一些需要和表单一起提交但是不希望用户看到的数据,例如:用户id等等。
多行文本框
自我介绍:<textarea name="desc"></textarea>
- textarea没有value属性,如果要设置默认值需要写在开始和结束标签之间。
文件标签
头像:<input type="file" name="file"/>
- 不同浏览器显示的样式有微小差异
布局相关标签
div标签:俗称"块",主要用于划分页面结构,做页面布局
span标签:俗称"层",主要用于划分元素范围,配合CSS做页面元素样式的修饰
<div style="width: 500px; height: 400px;background-color: cadetblue;"><div style="width: 400px; height: 100px;background-color: beige;margin: 10px auto;"><span style="color: blueviolet;">页面开头部分</span></div> <div style="width: 400px; height: 100px;background-color: blanchedalmond;margin: 10px auto;"><span style="color: blueviolet;">页面中间部分</span></div> <div style="width: 400px; height: 100px;background-color: burlywood;margin: 10px auto;"><span style="color: blueviolet;">页面结尾部分</span></div> </div>
特殊字符
对于有特殊含义的字符,需要通过转移字符来表示
-
该类字符对大小写敏感
-
有数学符号、希腊字母、其他等字符
<span> <br><a href="http://www.atguigu.com">尚 硅 谷</a> <br>&amp;
相关文章:
1-前端基本知识-HTML
1-前端基本知识-HTML 文章目录 1-前端基本知识-HTML总体概述什么是HTML?超文本标记语言 HTML基础结构文档声明根标签头部元素主体元素注释 HTML概念词汇:标签、属性、文本、元素HTML基本语法规则HTML常见标签标题标签段落标签换行标签列表标签超链接标签…...
磁盘的分区、格式化、检验与挂载 ---- fdisk,mkfs,mount
磁盘的分区、格式化、检验与挂载 磁盘管理是非常重要的,当我们想要再系统里面新增一块磁盘使用时,应执行如下几步: 对磁盘进行划分,以建立可用的硬盘分区 (fdisk / gdisk)对硬盘分区进行格式化࿰…...
Solr搜索参数详解
Solr 页面搜索 1.1 基本查询 参数意义q查询的关键字,此参数最为重要,例如,qid:1,默认为q:,fl指定返回哪些字段,用逗号或空格分隔,注意:字段区分大小写,例如,…...
Flink(三)【运行时架构】
前言 今天学习 Flink 的一些原理性的东西,比较偏概念,但是十分重要。有人觉得上来框框敲代码才能学到东西,那是狗屁不通的道理(虽然我以前也这么认为)。个人认为,学习 JavaEE那些框架,你上来就敲…...
conda添加清华镜像源
一、conda下载 https://mirrors.tuna.tsinghua.edu.cn/anaconda/archive/ 显示所有channel conda config --show channels 二、添加清华镜像源 conda config --add channels https://mirrors.tuna.tsinghua.edu.cn/anaconda/pkgs/free/ conda config --add channels https://…...
「Verilog学习笔记」求两个数的差值
专栏前言 本专栏的内容主要是记录本人学习Verilog过程中的一些知识点,刷题网站用的是牛客网 timescale 1ns/1ns module data_minus(input clk,input rst_n,input [7:0]a,input [7:0]b,output reg [8:0]c );always (posedge clk or negedge rst_n) begin if (~rst_…...
微头条项目实战:通过postman测试登录验证请求
1、CrosFilter package com.csdn.headline.filters; import jakarta.servlet.*; import jakarta.servlet.http.HttpServletResponse; import java.io.IOException; public class CrosFilter implements Filter {/*** 过滤器方法,用于处理HTTP请求* param servletReq…...
ARCGIS SERVER WMS、WFS服务添加过滤条件
我们知道geoserver中的wms,wfs过滤参数为cql_filter。比如过滤字段“mc”为"恒宇花园"的数据: cql_filtermc‘恒宇花园 但是arcgis server有所不同。具体可以看下它的标准:使用 WMS 请求中的 layerDefs 参数过滤要素—文档 | ArcGIS Enterpris…...
2013年108计网
第33题 在 OSI 参考模型中, 下列功能需由应用层的相邻层实现的是()A. 对话管理B. 数据格式转换C. 路由选择D. 可靠数据传输 很显然,题目所问的应用层的相邻层是表示层。该层实现与数据表示相关的功能。选项a中的对话管理属于会话层。选项c中的路由选择属于网络层。…...
【数据结构】单链表OJ题(一)
🔥博客主页: 小羊失眠啦. 🎥系列专栏:《C语言》 《数据结构》 《Linux》《Cpolar》 ❤️感谢大家点赞👍收藏⭐评论✍️ 文章目录 前言一、移除链表元素二、寻找链表中间结点三、输出链表倒数第k个结点四、反转单链表五…...
2023年云计算发展趋势浅析
云计算的概念 云计算是一种通过互联网提供计算资源和服务的模式。它允许用户通过网络访问和使用共享的计算资源,而无需拥有或管理这些资源的物理设备。云计算的核心理念是将计算能力、存储资源和应用程序提供给用户,以便随时随地根据需要…...
[极客大挑战 2019]Http1
打开题目 没有发现什么,我们查看源代码 在这里我们发现了提示 访问一下页面得到 提示说不能来自于https://Sycsecret.buuoj.cn,我们尝试访问一下这个url 发现访问不了 我们bp抓包一下 伪造个referer头 referer:https://Sycsecret.buuoj.cn 发包过去…...
C 语言 for循环
C 语言 for循环 在本教程中,您将借助示例学习在C语言编程中创建for循环。 在编程中,循环用于重复代码块,直到满足指定条件为止。 C语言编程具有三种循环类型: for 循环while 循环do… while 循环 我们将在本教程中学习for循环…...
浅谈数据结构之链表
链表是一种灵活的数据结构,有单向链表、双向链表和循环链表等多种形式。在本文中,我们将深入探讨单向链表、双向链表、循环链表的定义、Java实现方式、使用场景,同时比较它们的不同之处。我们还会介绍链表与队列之间的区别。 单向链表 定义…...
封装一个 虚拟列表渲染 组件
组件代码 <template><div ref"list" class"infinite-list-container" scroll"scrollEvent($event)"><div class"infinite-list-phantom" :style"{ height: listHeight px }"></div><div class…...
Spring中@Bean标注的方法是如何创建对象呢?
Bean 标注的方法如何创建对象呢? 参考文章:https://blog.csdn.net/qq_35971258/article/details/128241353 下边只讲一下 Bean 注解标注的方法,是如何去进行创建 bean,以及流程是怎样的,如果需要看源码具体执行流程&a…...
伦敦金股票代码是什么?
伦敦金是跟踪实时的现货黄金价格走势的差价合约交易,它的代码一般是LLG、GOLD,但也有一些货币交易平台会显示为XAU。伦敦金不是股票交易,因此没有四位数或六位数的股票代码,但伦敦金交易品种单一,投资者不用在数千支股…...
【环境装配】Anaconda在启动时闪现黑框,闪几次后仍能正常使用,解决黑框问题
anaconda闪黑框这个问题遇到好久了,也没找到相关资料来解决,今天做了两个更新,刚好可以不闪黑框了,记录一下。 更新anaconda 在界面右上角的位置点击更新,更新完后再打开时只闪现两个黑框了,之前好像有五…...
【Python】Python爬虫使用代理IP的实现
前言 在爬虫的过程中,我们经常会遇到需要使用代理IP的情况。比如,针对目标网站的反爬机制,需要通过使用代理IP来规避风险。因此,本文主要介绍如何在Python爬虫中使用代理IP。 一、代理IP的作用 代理IP,顾名思义&…...
盘点U-Mail邮件系统安全设计
在当今社会,电子邮件已经成企业沟通和信息传递重要的手段之一,是企业办公中不可或缺的一部分。但是由于企业邮件服务器端口对外开放、企业邮件安全管理能力不足、邮件内容敏感性高等特点,电子邮件也成为了网络攻击者进行网络钓鱼、恶意软件传…...
Linux应用开发之网络套接字编程(实例篇)
服务端与客户端单连接 服务端代码 #include <sys/socket.h> #include <sys/types.h> #include <netinet/in.h> #include <stdio.h> #include <stdlib.h> #include <string.h> #include <arpa/inet.h> #include <pthread.h> …...
理解 MCP 工作流:使用 Ollama 和 LangChain 构建本地 MCP 客户端
🌟 什么是 MCP? 模型控制协议 (MCP) 是一种创新的协议,旨在无缝连接 AI 模型与应用程序。 MCP 是一个开源协议,它标准化了我们的 LLM 应用程序连接所需工具和数据源并与之协作的方式。 可以把它想象成你的 AI 模型 和想要使用它…...
工程地质软件市场:发展现状、趋势与策略建议
一、引言 在工程建设领域,准确把握地质条件是确保项目顺利推进和安全运营的关键。工程地质软件作为处理、分析、模拟和展示工程地质数据的重要工具,正发挥着日益重要的作用。它凭借强大的数据处理能力、三维建模功能、空间分析工具和可视化展示手段&…...
Vue2 第一节_Vue2上手_插值表达式{{}}_访问数据和修改数据_Vue开发者工具
文章目录 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染2. 插值表达式{{}}3. 访问数据和修改数据4. vue响应式5. Vue开发者工具--方便调试 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染 准备容器引包创建Vue实例 new Vue()指定配置项 ->渲染数据 准备一个容器,例如: …...
【单片机期末】单片机系统设计
主要内容:系统状态机,系统时基,系统需求分析,系统构建,系统状态流图 一、题目要求 二、绘制系统状态流图 题目:根据上述描述绘制系统状态流图,注明状态转移条件及方向。 三、利用定时器产生时…...
Unit 1 深度强化学习简介
Deep RL Course ——Unit 1 Introduction 从理论和实践层面深入学习深度强化学习。学会使用知名的深度强化学习库,例如 Stable Baselines3、RL Baselines3 Zoo、Sample Factory 和 CleanRL。在独特的环境中训练智能体,比如 SnowballFight、Huggy the Do…...
企业如何增强终端安全?
在数字化转型加速的今天,企业的业务运行越来越依赖于终端设备。从员工的笔记本电脑、智能手机,到工厂里的物联网设备、智能传感器,这些终端构成了企业与外部世界连接的 “神经末梢”。然而,随着远程办公的常态化和设备接入的爆炸式…...
CSS设置元素的宽度根据其内容自动调整
width: fit-content 是 CSS 中的一个属性值,用于设置元素的宽度根据其内容自动调整,确保宽度刚好容纳内容而不会超出。 效果对比 默认情况(width: auto): 块级元素(如 <div>)会占满父容器…...
【笔记】WSL 中 Rust 安装与测试完整记录
#工作记录 WSL 中 Rust 安装与测试完整记录 1. 运行环境 系统:Ubuntu 24.04 LTS (WSL2)架构:x86_64 (GNU/Linux)Rust 版本:rustc 1.87.0 (2025-05-09)Cargo 版本:cargo 1.87.0 (2025-05-06) 2. 安装 Rust 2.1 使用 Rust 官方安…...
2025年渗透测试面试题总结-腾讯[实习]科恩实验室-安全工程师(题目+回答)
安全领域各种资源,学习文档,以及工具分享、前沿信息分享、POC、EXP分享。不定期分享各种好玩的项目及好用的工具,欢迎关注。 目录 腾讯[实习]科恩实验室-安全工程师 一、网络与协议 1. TCP三次握手 2. SYN扫描原理 3. HTTPS证书机制 二…...
