HTML基础

最新推荐文章于 2025-12-15 12:46:33 发布
原创 最新推荐文章于 2025-12-15 12:46:33 发布 · 145 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#python #html

每日测验

"""
今日考题
1.ascii,gbk,utf-8,gbk的区别
2.请用至少两种方式实现m与n值交换m=10,n=5
3.什么是深浅拷贝
4.什么是HTTP协议
5.列举你所知道的HTML标签
"""

昨日内容回顾

Web的本质

"""
浏览器
服务端
文件(html文件)
"""
课程web方向
	前端 django bbs 路飞

HTTP协议

"""
HTTP协议的由来(sql语句由来)
	浏览器只有一个如何兼容N多个服务端
"""
# 四大特性
  1 基于请求响应
  2 基于TCP/IP作用于应用层之上的协议
  3 无状态
  	无论来多少次 都待你如初见
   	如何做到保存用户状态？？？
    	cookie、session、token
  4 无/短链接
  	请求来我响应你 之后就没有联系了
    长链接:websocket(群聊功能、服务端主动给客户端发送消息)

# 请求数据格式
	请求首行(HTTP协议的版本，当前请求方式)
    请求头(一大堆k，v键值对)
  
  请求体(并不是所有的请求方式都有请求体,get没有post有)
  
# 响应数据格式
	响应首行(HTTP协议的版本，响应状态码)
    响应头(一大堆k，v键值对)
  
  响应体(浏览器展示给用户看的内容)
 
# URL
	统一资源定位符 类似于坐标
# 请求方式
	1.get请求
  	朝别人要数据(也是可以携带参数的，只不过参数不是放在请求体里面的,而是直接放在url的后面)
  	url?username=jason&password=123
  2.post请求
  	朝别人提交数据

# 响应状态码
"""用简短的数字来表示一大串提示性信息"""
1XX:服务端已经成功接收到了你的数据 正在处理你可以继续提交
2XX:请求成功(200 OK)
3XX:重定向(你想访问A页面但是给你调到了B页面)
4XX:请求错误(404请求资源不存在、403请求不符合条件)
5XX:服务端内部错误(500)
ps:上述的状态码是HTTP协议规定的，其实到了公司之后每个公司还会自己定制自己的状态及提示信息
  	公司A
    	1000:
      1001:
      1002:
    公司B
    	2001:
      2002:
      2003:
      ...

HTML

"""
超文本标记语言(你在学习它的时候只需要记忆每个标签表示什么意思即可)
书写网页的一套标准
	除了HTML可以书写前端页面之外
	还有XML也可以书写前端页面 
		odoo框架内部的前端页面全部是用XML书写
			公司内部管理软件 ERP
"""

# 注释  <!--注释-->

# 文档结构
<html>
	<head></head>：都不是给用户看的 主要是给浏览器看的一些配置信息
  <body></body>：body书写的所有的内容 都是给用户看的
</html>

head内常用标签

title  定义网页标题信息
style  内部支持直接书写css代码
link   引入外部css文件
script	内部可以书写js代码并且也可以引入外部js文件
meta	 定义网页源信息
   keywords
   description

body内基本标签

h1～h6 标题标签
p段落标签
u i b s
<s>我是删除体</s>
<u>我是下划线字体</u>
<i>我是斜体</i>
<b>我是粗体</b>
hr长横线
br换行

# 特殊符号
空格  &nbsp;
大于	&gt;
小于  &lt;
&amp;
&reg;
&copy;
&yen;

* 常用标签
  div：网页初期划定区域范围
  span：划定文本的
  """
a标签
  	链接标签
    	<a href='' target=''></a>
      	href
        1.可以放一个url点击自动跳转
        2.还可以放其他标签的id值 锚点功能
        target
        	控制是否在当前页跳转
          	_self
            _blank
img标签
  	图片标签
<img src='' alt='' title='' height='' width=''/>
      	src
        1.可以放图片的路径 本地或者线上
        2.还可以放一个url 会自动朝该url提交get请求获取图片数据展示(暂时不考虑)  
        alt
        	图片加载不出来的时候	展示的提示信息
       	title
        	鼠标悬浮在图片上之后展示的提醒信息
        height、width
        	单独调整某一个 另外一个会自动等比例缩放
          如果两个都调整了 可能会出现图片的失真
  # 标签一般情况下都需要有两个重要的属性
  	id值
    	唯一标示  同一个页面不能有重复	
    class值	
      类似于类的继承 可以有多个  
* 标签的分类
  分类1:
  	双标签
  		<h1></h1>
  	单标签
  		<img/>
  分类2:
  	块儿级标签:独占一行  可以设置长宽
  		div p
  		注意：块儿级标签内部可以嵌套任意的行内标签和块儿级标签
  			但是p标签只能嵌套行内标签
  	行内标签:自身文本多大就占多大  不能设置长宽
  		span a img
  	
  	PS：上述的规定只是HTML书写规范 如果你不遵循 不会报错
  	浏览器会自动帮你解除嵌套关系
  • 列表标签
 ul
 	li
 页面上只要是带有规则的排序文字 一般用的都是无序列表	
 ol
 	li
 有序列表
 dl
 	dt
   dd
 标题列表	

基本
<html>…</html> 定义 HTML 文档
<head>…</head>  文档的信息
<meta>HTML 文档的元信息
<title>…</title> 文档的标题
<link>文档与外部资源的关系
<style>…</style>文档的样式信息
<body>…</body>可见的页面内容
<!--…--> 注释
文本
<h1>...</h1>标题字大小（h1~h6）
<b>...</b> 粗体字
<strong>...</strong>粗体字(强调) 
<i>...</i> 斜体字 
<em>...</em>斜体字(强调)
<s>我是删除体</s>
<u>我是下划线字体</u>
<i>我是斜体</i>
<b>我是粗体</b>
<center>…</center>居中文本
<ul>…</ul>无序列表 
<ol>…</ol>有序列表
<li>…</li>列表项目
<a href=”…”>…</a>超链接
<font>定义文本字体尺寸、颜色、大小
<sub>下标
<sup>上标
<br>换行
<p>段落
图形
<img src=’”…”>定义图像
<hr>水平线
<del>加删除线
表格
<table>…</table>   定义表格
<th>…</th>定义表格中的表头单元格
<tr>…</tr>定义表格中的行
<td>…</td>定义表格中的单元
其它
<form>…</form>定义供用户输入的 HTML 表单
<frame>定义框架集的窗口或框架
转义字符
< &lt; 
> &gt; 
空格 &nbsp; 
© &copy; 
® &reg; 
™ &trade;

!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>这是一个练习</title>
</head>
<body>
<h1>注册页面</h1>
<p><label for="d1">用户名：<input type="text" id="d1"></label></p>
<p><label for="d2">密码：<input type="password" id="d2"></label></p>
<p><label for="d3">生日：<input type="date" id="d3"></label></p>
<p><input type="submit" id="d4"></p>
<input type="submit" value="我是按钮1">
<input type="button" value="我是按钮2">
<input type="reset" value="我是按钮3">
<button>点我</button>
<p>性别：
    <input type="radio" name="gender">男
    <input type="radio" name="gender"checked>女
    <input type="radio" name="gender">其他
</p>
<p>爱好：
    <input type="checkbox" name="hobby">read
    <input type="checkbox" name="hobby"checked>dbj
    <input type="checkbox" name="hobby">hecha
</p>
<ul>无序列表
    <li>列表项</li>
    <li>列表项</li>
    <li>列表项</li>
</ul>
<ol>有序列表
    <li>第1项</li>
    <li>第2项</li>
    <li>第3项</li>
</ol>
<p><s>我是删除体</s></p>
<p><u>我是下划线字体</u></p>
<p><i>我是斜体</i></p>
<p><b>我是粗体</b></p>
<p><strong>粗体字(强调) </strong></p>123
<hr>123
<br>123
</body>
</html>

在这里插入图片描述

技术承
关注
HTML基础知识入门大全
HTDiiii的博客
08-20 3818
HTML 什么是 HTML HTML（HyperText Markup Language，超文本标记语言）是一种用来告知浏览器如何组织页面的标记语言。HTML 可复杂、可简单，一切取决于 web 开发者。HTML 由一系列的元素组成，这些元素可以用来包围或标记不同部分的内容，使其以某种方式呈现或者工作。两端的标签可以使内容变成超链接，以连接到另一个页面；使字体表现为斜体等。 HTML 标签/元素 HTML 属性 第一个 HTML <!-- 文档的类型 ，根据类型可以知道当前文档的版本-->
《Web程序设计基础R》实验报告---HTML基础
一只小鹿的博客
12-21 5126
一、实验目的 1．掌握常用的HTML语言标记； 2．利用文本编辑器建立HTML文档，制作简单表单页面。 二、实验环境 计算机、Windows10 操作系统 三、实验内容、源码及运行结果 1．  实验内容 在文本编辑器“记事本”中输入如下的HTML代码程序，以文件名sy1.html保存，并在浏览器中运行。（请仔细阅读下列程序语句，理解每条语句的作用） 源程序清单如下： 1. <html> 2. <head> 3. <title>Example</title&
html基础
热门推荐
qq_40181206的博客
10-03 2万+
HTML html骨架结构 <!--声明文档类型，告诉浏览器按照哪个版本的html解析--> <!DOCTYPE html> <html lang='en'> <!--lang=zh-CN 用于搜索引擎看的--> <head> <meta charset='UTF-8'> <!--元信息 不是...
HTML基础标签
weixin_45348240的博客
03-23 6266
一、HTML介绍 1、什么是HTML? HTML是一门语言，所有的网页都是用HTML这门语言编写出来的。HTML(HyperText Markup Language):超文本标记语言。 超文本：超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容。 标记语言：由标签构成的语言 HTML运行在浏览器上，HTML标签由浏览器来解析 HTML标签都是预定义好的。例如:使用< img>展示图片 2、W3C标准:网页主要由三部分组成 结构:HTML 表现:css 行为:
【前端学习笔记】HTML 基础
2401_84304834的博客
04-18 3166
HTML（HyperText Markup Language，超文本标记语言）是一种用于创建网页的标准标记语言。它允许用户通过结合文本、图像、链接、格式等元素来构建网页，并通过浏览器进行解析和显示。HTML文件通常以.html或.htm为扩展名，包含一系列的标签（tags），这些标签用于定义网页的结构、样式和内容。
HTML基础知识点大全
m0_69674158的博客
05-04 7125
一、什么是HTML HyperText Markup Language，即超文本标记语言 二、第一个HTML <！doctpye html> <html> <head></head> <body></body> <html> 三、常用的标签🀄️🀄️🀄️ 1⃣️p 标签 ，段落标签，占整行 2⃣️img 图片标签： ①src 图片路径：绝对路径http://xxx.xx/xx/x.jpg 相对路径..
html基础学习
weixin_52676304的博客
10-15 2万+
html新手学习，以菜鸟教程为主
HTML基础知识总结
ss810540895的博客
05-05 9383
是告诉浏览器这是html文档的开始。Html文档的最后一个标签是之间的文本是头部信息，在之间的文本是文档标题，会显示在浏览器的窗口的标题栏。设置网页编码的语句为，是在
Web前端技术基础实验报告一之Web前端开发环境配置与HTML基础
Lucky的博客
04-16 9564
Web前端技术基础实验报告一之Web前端开发环境配置与HTML基础
【HTML】HTML基础知识扫盲
弟弟的博客
10-30 5024
body > < dl > < dt > 标题 </ dt > < dd > 第一点 </ dd > < dd > 第二点 </ dd > < dd > 第三点 </ dd > </ dl > </ body >< body > < dl > < dt > 标题 </ dt > < dd > 第一点 </ dd > < dd > 第二点 </ dd > < dd > 第三点 </ dd > </ dl > </ body >
HTML基础（超级详细）
weixin_58849785的博客
04-04 2806
HTML（HyperText Markup Language）是一种用于创建网页的标记语言。它通过标记符号来描述网页的结构和内容，是万维网（World Wide Web）的基础语言。HTML可以用来创建静态网页，也可以与JavaScript和CSS等技术结合，创建动态交互式的网页。HTML文档由各种元素（elements）组成，如标题、段落、列表、链接、图片等。自定义列表不仅仅是一列项目，而是项目及其注释的组合。自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。
HTML基础（新手入门教程）
华夏天骄
05-17 5330
「学习笔记」HTML基础 前言 勤做笔记不仅可以让自己学的扎实，更重要的是可以让自己少走弯路。有人说:“再次翻开笔记是什么感觉”，我的回答是:“初恋般的感觉”。或许笔记不一定十全十美，但肯定会让你有种初恋般的怦然心动。???????? 本章着重复习Html的基础内容，学习Html究竟要学些什么呢？主要是学习各种标签，来搭建网页的“结构”。✨✨ 本篇文章主要由五个章节构成，从WEB标准到初识HTML，接着学习HTML常用标签，最后学习表格列表和表单。????????开始充电之旅啦~~~ 一、认识WEB **「
HTML基础教学：构建简易个人网站实例
### HTML基础 HTML是构建网页的标准标记语言，用于定义网页的内容结构。网页通过使用HTML标签来组织内容。例如，`<html>`标签标志着HTML文档的开始和结束，而`<head>`部分包含了文档的元数据（metadata），`<body>`...
html基础（全）
hl826669的博客
05-15 2607
input>表单元素。
javascript 性能优化实战：异步和延迟加载
小伙伴们全都Lucky！
12-11 932
本文探讨JavaScript性能优化中的异步加载与延迟加载技术。异步加载通过async/defer属性或动态创建script元素避免阻塞渲染；延迟加载则利用IntersectionObserver API按需加载非关键资源。二者结合可显著提升性能：异步加载核心脚本确保交互流畅，延迟加载减少初始请求量。实践表明，该方案能降低DOMContentLoaded时间30%以上，减少初始加载量90%，但需注意async脚本的执行顺序问题和延迟加载的回退处理。文中提供了完整的代码实现示例。
df赋值和.copy的区别（SettingWithCopyWarning）
ranchor666的博客
12-10 763
copy()
Python 语言编码规范
托塔天王的博客
12-11 974
通常， 不应该描述”怎么做”， 除非是一些复杂的算法，文档字符串应该提供足够的信息， 当别人编写代码调用该函数时，他不需要看一行代码，只要看文档字符串就可以了，对于复杂的代码，在代码旁边加注释会比使用文档字符串更有意义。但是，不要使用一个以上的空格，并且在二元运算符的两边使用相同数量的空格。当捕获异常时， 使用as而不要用逗号。3、 关于函数的几个方面应该在特定的小节中进行描述记录， 这几个方面如下文所述，每节应该以一个标题行开始，标题行以冒号结尾，除标题行外， 节的其他内容应被缩进2个空格。
《Python实战小课：爬虫工具场景——开启数据抓取之旅》导读
最新发布
2501_93253814的博客
12-15 980
本文介绍了Python爬虫技术在三大场景中的应用：行业资讯爬取、学术文献摘要获取和电商评价收集。针对行业资讯，详细解析了从网页请求到数据存储的全流程；在学术文献方面，重点阐述了如何构建搜索请求和提取关键信息；对于电商评价，则说明了数据定位和清洗方法。文章还探讨了爬虫优化策略及反爬机制应对方案，为数据获取工作提供了实用指南。通过系统学习这些技术，读者可以提升数据采集能力，为商业决策、学术研究和市场分析提供有力支持。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值