第五模块：WEB开发基础-第一章 HTML

最新推荐文章于 2023-01-21 16:39:26 发布
最新推荐文章于 2023-01-21 16:39:26 发布
阅读量133 收藏
点赞数
分类专栏： python笔记 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36993243/article/details/113766227
版权

文章目录

html前言

html介绍

一、HTML介绍

1.标签介绍

标题h1-h6
段落p
强调strong/斜体em
分割线hr/换行br
ul/ol/dl
li
div/span
table
a
img
form
input
textarea
select

2.文档结构

<!DOCTYPE HTML>
<html>
    <head>...</head>
    <body>...</body>
</html>
是文档声明，必须写在HTML文档的第一行，位于标签之前，表明该文档是HTML5文档。

1. 称为根标签，所有的网页标签都在中。
2. 标签用于定义文档的头部，它是所有头部元素的容器。常见的头部元素3.有、

3.head标签

<head lang='en'>
    <title>标题信息</title>
    <meta charset='utf-8'>
    <link>
    <style type='text/css'></style>
    <script type='text/javascript'></script>
</head>

title标签

标签：在<title>和标签之间的文字内容是网页的标题信息，它会显示在浏览器标签页的标题栏中。可以把它看成是一个网页的标题。主要用来告诉用户和搜索引擎这个网页的主要内容是什么，搜索引擎可以通过网页标题，迅速的判断出当前网页的主题。 
<!DOCTYPE HTML>
<html>
    <head>
        <title>路飞学城</title>
    </head>
    <body></body>
</html>

二、body标签介绍

1.标题标签 h1~h6

标签可定义标题。h1定义最大的标题。h6 定义最小的标题。 由于 h 元素拥有确切的语义，因此请您慎重地选择恰当的标签层级来构建文档的结构。因此，请不要利用标题标签来改变同一行中的字体大小。相反，我们应当使用css来定义来达到漂亮的显示效果。 标题标签通常用来制作文章或网站的标题。

<!DOCTYPE HTML>
<html>
    <head lang='en'>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>路飞学城</title>
    </head>
    <body>
        <h1>一级标题</h1><h2>二级标题</h2>
        <h3>三级标题</h3>
        <h4>四级标题</h4>
        <h5>五级标题</h5>
        <h6>六级标题</h6>
    </body>
</html>

2.段落标签 p

<body>
        <p>路飞学城立志帮助有志向的年轻人通过努力学习获得体面的工作和生活!路飞学员通过学习Python ,金融分析,人工智能等互联网最前沿技术,开启职业生涯新可能</p>
        <p>路飞学城立志帮助有志向的年轻人通过努力学习获得体面的工作和生活!路飞学员通过学习Python ,金融分析,人工智能等互联网最前沿技术,开启职业生涯新可能</p>
</body>

3.列表标签 ul，ol，dl

ul:unordered lists的缩写 无序列表
ol:ordered listsde的缩写 有序列表

    <!-- 无序列表 type可以定义无序列表的样式-->
    <ul type="circle">
        <li>我的账户</li>
        <li>我的订单</li>
        <li>我的优惠券</li>
        <li>我的收藏</li>
        <li>退出</li>
    </ul>
    <!-- 有序列表 type可以定义有序列表的样式 -->
    <ol type="a">
        <li>我的账户</li>
        <li>我的订单</li>
        <li>我的优惠券</li>
        <li>我的收藏</li>
        <li>退出</li>
    </ol>

<dl>
		<dt>帮助中心</dt>
		<!-- definition description -->
		<dd>账户管理</dd>
		<dd>购物指南</dd>
		<dd>订单操作</dd>
	</dl>

3.表格标签 table

<table border="1" cellspacing="0">
		<caption>商品清单</caption>
		<tr>
			<th>产品名称</th>
			<th>品牌</th>
			<!-- 横向合并：合并列数 -->
			<th colspan="2">数量和入库时间</th>
		</tr>
		<tr>
			<td>电冰箱</td>
			<td>海尔</td>
			<td>300</td>
			<td>2018-09</td>
		</tr>
		<tr>
			<td>电视机</td>
			<!-- 纵向合并：合并的是行数 -->
			<td rowspan="3">小米</td>
			<td>200</td>
			<td>2018-09</td>
		</tr>
		<tr>
			<td>电风扇</td>
			<td>400</td>
			<td>2019-07</td>
		</tr>
		<tr>
			<td>电脑</td>
			<td>400</td>
			<td>2019-07</td>
		</tr>

	</table>

4.超链接标签 a

a anchor 锚点 超链接
超级链接标记代表一个链接点，是英文anchor（锚点）的简写。它的作用是把当前位置的文本或图片连接到其他的页面、文本或图像

<!-- 超链接 -->
	<a href="https://www.baidu.com/" 
	title="点击一下，了解更多"
	target="_blank">百度一下</a>
	<br>
	<a href="mailto:827669250@qq.com">联系我们</a>
	<p>小猿圈</p>
	<p>小猿圈</p>
	<p>小猿圈</p>
	<p>小猿圈</p>
	<p>小猿圈</p>
	<p>小猿圈</p>
	<p>小猿圈</p>
	<p>小猿圈</p>
	<p>小猿圈</p>
	<p>小猿圈</p>
	<p>小猿圈</p>
	<p>小猿圈</p>
	<p>小猿圈</p>
	<p>小猿圈</p>
	<p>小猿圈</p>
	<p>小猿圈</p>
	<p>小猿圈</p>
	<p>小猿圈</p>
	<p>小猿圈</p>
	<p>小猿圈</p>
	<p>小猿圈</p>
	<p>小猿圈</p>
	<a href="#top">回到顶部</a>

5.img标签

<form action="https://www.baidu.com/" method="post">
		<p>
			<label for="username">用户名:</label>
			<input id="username" type="text" name="" placeholder="请输入用户名">
		</p>
		<p>
			<label for="pwd">密码:</label>
			<input id="pwd" type="password" name="" placeholder="请输入密码">
		</p>
		<p>
			<!-- 单选，互斥,默认选中 -->
			男:<input type="radio" name="sex" checked="checked">
			女:<input type="radio" name="sex">
		</p>
		<h4>购买的课程:</h4>
		<p>
			<!-- 复选框 -->
			web前端：<input type="checkbox" name="" checked="checked">
			python开发：<input type="checkbox" name="">
			java编程：<input type="checkbox" name="">
		</p>
		<h3>下拉框实现单选</h3>
		<p>
			<!-- 单选框 -->
			<select name="class">
				<option value="a">html</option>
				<option value="b">css</option>
				<option selected="selected">javascript</option>
				<option>vue</option>
			</select>
		</p>
		<h3>下拉框实现多选</h3>
		<p>
			<!-- 复选框 -->
			<select multiple="multiple">
				<option>html</option>
				<option>css</option>
				<option selected="selected">javascript</option>
				<option>vue</option>
				<option>react</option>
				<option>nodejs</option>
			</select>
		</p>
		<!-- 文本域 -->
		<h3>个人描述</h3>
		<p>
			<textarea rows="10" cols="40"></textarea>
		</p>
		<p>
			<input type="submit" name="" value="注册">
			<input type="reset" name="" value="重置">
		</p>
		
	</form>

	<button>按钮</button>

7.其他

换行标签 br
br标签用来将内容换行，其在HTML网页上的效果相当于我们平时使用word编辑文档时使用回车换行。

分割线 hr
hr标签用来在HTML页面中创建水平分隔线，通常用来分隔内容

特殊符号
浏览器在显示的时候会移除源代码中多余的空格和空行。 所有连续的空格或空行都会被算作一个空格。需要注意的是，HTML代码中的所有连续的空行（换行）也被显示为一个空格。
要想输入空格，需要用特殊符号 –  。
特殊符号对照表：https://tool.chinaz.com/Tools/htmlchar.aspx

总结

html介绍

唐棠码字中
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html中的换行(\n)或回车(\r)符号不起作用的解决办法、br、white、space、pre、line
软件毕设协助及软件开发、IT、程序、编程、程序员、写代码、工程师、互联网、物联网、技术栈、软件开发、硬件开发、计算机科技、智慧电子模块。
08-31 1万+
html中的换行(\n)或回车(\r)符号不起作用的解决办法、br、white、space、pre、line
前端 记住select的选择_day56 前端-7
weixin_39695672的博客
12-06 229
一、原生js事件绑定案例一、开关灯案例<head> <meta charset="UTF-8"> <title>Title</title> <style> .c1 { height: 100px; width: 100px; b...
html与css编写海岛游开发,岛屿网站登录界面设计
weixin_32487755的博客
06-05 285
CSS语言：CSSSCSS确定html {font-family: sans-serif;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;-moz-box-sizing: border-box;box-sizing: border-box;}html * {-webkit-font-smoothing: antialiased;-...
HTML入门1-基本标签
Lexi_Alexander的博客
09-14 573
1.基本标签1.文档声明2.HTML标签3.head标签1.1 head标签 #1.1 HTML结构 <!DOCTYPE html> <!--文档声明--> <html> <head> <!-HTML标签对 页头html标签对--> </head> <body> <!-HTML标签对 页身html标签对--> </body> </html> 一个完整的HTML页面，其实就
HTML5提供了一些属性和样式来设计圆角边框，以下是一些常用的方法
BLOG域名:programb.blog.csdn.net
06-30 5157
请注意，虽然 HTML5 引入了更多的语义化标签和 API，但样式的定义仍然主要依赖于 CSS。在设计圆角边框时，你应该使用 CSS3 的这些属性，而不是 HTML5。在设计圆角边框时，请考虑整体设计的一致性、用户体验以及目标设备的特性。圆角可以帮助创造柔和的视觉效果，提升用户体验，但过度使用或不适当地使用可能会分散用户的注意力或导致设计显得过于复杂。HTML5 本身并不直接提供圆角边框的样式设计，这是由 CSS3 提供的。这些是设计圆角边框的一些常用方法，你可以根据需要选择适合的方法来实现。
PythonWeb开发基础教程-第2章-Django配置.pptx
06-11
在Python Web开发中，Django框架是一个非常流行的高级Web应用框架。本教程主要围绕Django配置展开，旨在帮助初学者理解和掌握如何配置Django项目。第二章“Django配置”涵盖了多个关键方面，包括项目的配置文件、...
PythonWeb开发基础教程-第3章-URL分发.pptx
最新发布
06-11
**Python Web开发基础教程 - 第3章 - URL分发** 在Python Web开发中，Django框架提供了一套强大的URL分发系统，使得开发者能够灵活地设计和管理网站的URL结构。本章主要涵盖以下几个核心概念： 1. **URL配置** - ...
JSP应用开发教程-温超-第章-企业邮箱模拟系统新完整版资料.ppt
11-14
【JSP应用开发教程-温超-第章-企业邮箱模拟系统新完整版资料】是针对JSP技术的实践教学资料，旨在帮助学习者熟练掌握JSP开发技能，为后续的JSP项目开发奠定基础。本教程以构建一个企业邮箱模拟系统为例，详细介绍了...
PythonWeb开发基础教程-第3章-URL分发(1).pptx
06-11
【Python Web开发基础教程 - Django版 - 第3章 - URL分发】 在Python Web开发中，特别是使用Django框架时，URL分发是至关重要的一个环节。本章主要讲解了如何配置和使用Django的URL分发系统，包括URL配置、URL参数...
ignews:第三章-Fundamentos做Next.js
03-30
Next.js是一个由Vercel开发的开源JavaScript库，用于构建服务器端渲染（SSR）和静态生成（SSG）的React应用程序。它简化了React开发流程，提供了诸如自动代码分割、预渲染、热模块替换（HMR）等特性。 1. **Next.js...
网页设计作业——旅游主题
weixin_53735404的博客
01-21 540
期末大作业——网页设计（旅游题材）
git tag怎么使用_GIT中tag使用，打版本必备
weixin_39822923的博客
11-21 1363
解决问题：开发了一个程序自动打包程序，v3.0开始是从excel变动清单中去读取变动文件名称以完成自动打包功能，但是有一个问题，偶尔由于整理清单的人会把文件名写错。于是我利用git可以打包两个不同commit之间文件的特性来重构了前面v3.0的代码，发布了V4.0。但是v3.0版本程序单独测试 一个功能的时候偶尔还需要使用，这个时候git的tag就出现了。使用git 创建一个tag ,这样一个不可...
（第二章）HTML基本标记
SUN19980421的博客
02-16 4438
第二章HTML基本标记 目录 第二章HTML基本标记 1、标题标记title 2、头部标记head 3、元信息标记meta 3.1设置页面关键字 3.2设置页面说明 3.3定义编辑工具 3.4添加作者信息 3.5设置网页文字及语言 3.6设置网页的定时跳转 4、页面注释标记 5、标题字 5.1标题字标记h 5.2标题字对齐属性align 6、段落标记 6.1段落标...
Html中识别换行符‘\n‘
热门推荐
Peng的博客
07-06 1万+
转载于：HTML文章页面，识别不了换行问题的解决 问题详情 后端返回的长串字符中是由换行符 ‘\n’的，但是前端展现该长串字符时却没有识别’\n’，挤在一行影响页面布局。 解决方案 查找相关资料后得到解决方案：CSS中由“white-space” 属性设置如何处理元素内的空白，设置元素的样式为white-space: pre-line即可解决问题。 注： 在React中这样设置该属性 <span style={{whiteSpace: 'pre-line'}} > // ..
promtheus对metrics修改label
triThirty的博客
07-10 1884
很多exporter的metrics的label不完整或语义不详，造成在prometheus显示的时候难以明白其metrics的具体含义。因此有必要在获取metrics的时候对metrics增加一些label，表明该metrics的具体含义。 例如： kube_pod_container_resource_requests_cpu_cores{container="autoscaler",env=...
HTML文档标题标记有哪几种,HTML基本结构与常用标记.doc
weixin_39760295的博客
06-05 1139
附录A HTML基本结构与常用标记1 HTML简介我们在浏览器上看到的网页其实是HTML文件构成的,HTML是“Hypertext Markup Language(超文本标记语言”的英文缩写。它是一种可以在网上传输，并被浏览器认识和翻译成页面显示出来的文件。“超文本”是指页面内既可以包含文字，也可以包含图片、声音、视频、链接和程序等非文字的元素。尽管WWW仍然是HTML应用最多的地方，但是它还被...
html、css中圆角边框
m0_51495354的博客
11-12 3966
html、css中圆角边框
HTML自我学习笔记简易理解
qq_43325480的博客
09-09 328
HTML一级目录# 系列文章目录前言一、HTML是什么？二、如何编写HTML1.使用记事本2.使用工具3.浏览器 一级目录# 系列文章目录 提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加 例如：第一章 Python 机器学习入门之pandas的使用 提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录一级目录# 系列文章目录前言一、HTML是什么？二、如何编写HTML1.使用记事本2.使用工具3.浏览器 前言 提示：本文章关于自己对HTML的简易理解希望小白方便
HTML——基本标签 ※
Junds0的博客
12-27 1073
任务描述本关任务：完成编写创建第一个 HTML 标签的小程序。相关知识。
PythonWeb开发基础教程-第3章-URL分发机制概述
《PythonWeb开发基础教程-第3章-URL分发(1)》是一本关于Python Web开发基础的教程，本章主要介绍了URL分发的相关内容。 在Web开发中，URL的基本格式为"协议://域名或IP地址/路径/文件名"，域名或IP地址是Web服务器...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值