2.HTML基础

最新推荐文章于 2023-03-07 14:55:18 发布
最新推荐文章于 2023-03-07 14:55:18 发布
阅读量575 收藏
点赞数
分类专栏： Web前端开发 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/z1360408752/article/details/113108255
版权

目录

HTML基础

概述

超文本标记语言（通过超链接的形式，将文本有机组合一起就是超文本。每一个元素用标记标记出来，这些标记称为标签），它是制作网页的标准语言
标签、元素
由尖括号包围，比如<br/> 通常成对存在<br/> 开始标签+内容+结束标签=元素<br/> 单独出现标签，如<img/><br/> 标签嵌套

外层:父标签，内层：子标签，同级：兄弟标签

HTML DOM树（文档对象模型）
在这里插入图片描述

在这里插入图片描述

HTML文件结构

文件结构

基本结构
在这里插入图片描述
头部： 浏览器、搜索引擎所需信息
主体： 网页中包含的信息

HTML编辑器
在这里插入图片描述
HTML5文件结构

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
</head>
<body>
</body>
</html>

代码所表示的含义
<!DOCTYPE html>文档类型：符合HTML5标准
lang属性：表示告诉浏览器这是中文网页还是英文网页，en英文，zh中文
<meta>：元数据
charset：字符集编码方法

字符编码

在这里插入图片描述
ASCII：数字、英文字母、符号进行了编码
GB2312：简体中文
Unicode：所有语言
UTF-8：所有语言，占用空间更小
常见的编码方式有：Unicode、ASCII、GBK、GB2312、UTF-8

源文件保存格式与声明编码方式不一致造成的乱码问题

在这里插入图片描述

HTML标签

标题h1~h6

<h1>标题内容</h1>
<h2>标题内容</h2>
<h3>标题内容</h3>

在这里插入图片描述

段落内容

<p>段落内容</p>

段内换行

<br />单独出现的标签，直接结束（嵌套在段落内）

空格字符&nbsp;

段落内部文字忽略连续字符，如果需要添加连续字符，可用&nbsp;代替

预留格式

定义预格式化的文本
文中的空格和换行符会被保留

<pre>
预格式文本
</pre>

行内组合span

组合行内元素，以便通过CSS样式来格式化
在这里插入图片描述

水平线hr

<hr />

注释

<!-- 注释内容 -->

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>首页</title>
</head>
<body>
	<h1>Web前端开发</h1>
	<h2>HTML</h2>
	<p>超文本标记语言,用于构建网页结构</p>
	<hr />
	<h2>CSS</h2>
	<p>层叠样式表，用于构建网页样式</p>
	<hr />
	<h2>JS</h2>
	<p>JavaScript，脚本语言，用于构建网页行为</p>
</body>
</html>

在这里插入图片描述

超链接a

<a href="链接位置" title="链接描述" target="目标">链接文字</a>
  1. 学会使用邮件链接：
<a href="mailto:test@qq.com">发送邮件</a>
  1. 页面链接的锚点：
<a href="#top">回到顶部</a>  <div id="top">顶部的链接</div>
  1. 给链接增加 鼠标提示：
<a title=“点击查看胡悦的详细信息”>查看</a>
  1. 理解链接的不同打开方式:
<a href=“” target=“_top/_self/_blank”></a>

img图像标签

图像格式

**JPG:**有损压缩，色彩丰富图片
**GIF：**简单动画，背景透明
**PNG：**无损压缩、透明、交错、动画

插入图像img标签

在这里插入图片描述

绝对路径和相对路径

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
技巧：

p*4>img+a

生成

	<p><img src="" alt=""><a href=""></a></p>
	<p><img src="" alt=""><a href=""></a></p>
	<p><img src="" alt=""><a href=""></a></p>
	<p><img src="" alt=""><a href=""></a></p>

区域（div）、列表（ul ol li）、表格（table、tr、td）

区域

如页面的一个组成部分、一个栏目板块

div标签最大的用处就是结合CSS样式，对每个区域进行排版布局。

<div>
区域内容
</div>

列表

在这里插入图片描述
输入格式

ul>li*3

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>首页</title>
</head>
<body>
	<h1>Web前端开发</h1>
	<ul>
		<li>HTML</li>
		<li>CSS</li>
		<li>JavaScript</li>
	</ul>
</body>
</html>


实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>首页</title>
</head>
<body>
	<h1>Web前端开发</h1>
	<ol>
		<li>HTML</li>
		<li>CSS</li>
		<li>JavaScript</li>
	</ol>
</body>
</html>

在这里插入图片描述

表格

在这里插入图片描述
实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>首页</title>
</head>
<body>
	<table border="1">	<!--border为边框样式-->
		<tr>
			<th> </th>
			<td>学生数</td>
			<td>平均成绩</td>
		</tr>
		<tr>
			<th>一班</th>
			<td>30</td>
			<td>89</td>
		</tr>
		<tr>
			<th>二班</th>
			<td>35</td>
			<td>85</td>
		</tr>
		<tr>
			<th>三班</th>
			<td>32</td>
			<td>80</td>
		</tr>
	</table>
</body>
</html>

在这里插入图片描述
案例2

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>首页</title>
</head>
<body>
	<div align='center'>
		<table border="1">
			<tr>
				<td><h1>star top10</h1></td>
			</tr>
			<tr>
				<td>
					<ol>
						<li><a href="#">bigbang</a></li>
						<li><a href="#">东方神起</a></li>
						<li><a href="#">少女时代</a></li>
						<li><a href="#">super junior</a></li>
						<li><a href="#">beast</a></li>
						<li><a href="#">shinee</a></li>
						<li><a href="#">2NE1</a></li>
						<li><a href="#">T-ara</a></li>
						<li><a href="#">f(x)</a></li>
						<li><a href="#">CN.Blue</a></li>
					</ol>
				</td>
			</tr>
		</table>
	</div>
</body>
</html>

在这里插入图片描述

表单

在这里插入图片描述

文本框、密码框input——text password 和 按钮——提交、重置

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>首页</title>
</head>
<body>
	<form action="">
		账户：<input type="text" name="userName" id="" />
		<br />
		密码：<input type="password" name="password" id="">
		<br />
		<input type="submit" value="提交">  <input type="reset" value="重置">

	</form>
</body>
</html>

在这里插入图片描述

下拉框和复选框

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>首页</title>
</head>
<body>
	<form action="">
		性别：
		男	<input type="radio" value="boy" name="gender" checked="checked">
		女	<input type="radio" value="girl" name="gender"	checked="checked">
		<br />
		爱好：  
		<input type="checkbox" value="1" name="music" checked="checked">音乐
		<input type="checkbox" value="2" name="soprt">体育
		<input type="checkbox" value="3" name="read">阅读
	</form>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>首页</title>
</head>
<body>
	<form action="">
		爱好：
		<select>
			<option value="1">看书</option>
			<option value="2" selected="selected">旅游</option>
			<option value="3">运动</option>
			<option value="4">购物</option>
		</select>
	</form>
</body>
</html>

在这里插入图片描述

文本域

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>首页</title>
</head>
<body>
	<form action="">
		个人简介：
		<br />
		<textarea name="" id="" cols="30" rows="10"></textarea>
		<br />
		<input type="submit" value="确定">
		<input type="reset" value="重置">
	</form>
</body>
</html>

在这里插入图片描述

web语义化

Web语义化：让页面具有良好的结构与含义，从而让人和机器能够快速理解网页内容。

结构清晰，利于团队的开发、维护
有利于搜索引擎理解
SEO搜索引擎优化
容易兼容不同设备

em和strong标签
在这里插入图片描述

自定义列表dl、列表项dt、描述dd在这里插入图片描述

Z_Coding
关注
专栏目录
[Python从零到壹] 二.语法基础之条件语句、循环语句和函数
杨秀璋的专栏
09-09 1万+
欢迎大家来到“Python从零到壹”，在这里我将分享约200篇Python系列文章，带大家一起去学习和玩耍，看看Python这个有趣的世界。所有文章都将结合案例、代码和作者的经验讲解，真心想把自己近十年的编程经验分享给大家，希望对您有所帮助，文章中不足之处也请海涵。Python系列整体框架包括基础语法10篇、网络爬虫30篇、可视化分析10篇、机器学习20篇、大数据分析20篇、图像识别30篇、人工智能40篇、Python安全20篇、其他技巧10篇。
《Python基础教程》内容总览篇（持续更新中）
最新发布
weixin_43178406的博客
08-26 21万+
大家好，我是爱编程的喵喵。双985硕士毕业，现担任全栈工程师一职，热衷于将数据思维应用到工作与生活中。从事机器学习以及相关的前后端开发工作。曾在阿里云、科大讯飞、CCF等比赛获得多次Top名次。现为CSDN博客专家、人工智能领域优质创作者。喜欢通过博客创作的方式对所学的知识进行总结与归纳，不仅形成深入且独到的理解，而且能够帮助新手快速入门。个人精心开设的《Python基础课程》专栏订阅量接近900，帮助不少同学解决了Bug。
2、HTML
weixin_30649859的博客
11-02 98
软件的结构： C/S(Client Server)结构的软件： 比如： QQ、 极品飞车、 飞信 、 迅雷 cs结构的软件的缺点：更新的时候需要用户下载更新包然后再安装，程序员则需要开发客户端与服务端。 cs结构软件的优点： 减轻服务端的压力，而且可以大量保存数据在客户端。 B/S（Browser Server）结构的软件： 比如： 微博 、 webQQ ...
2. HTML标签
littledotdot的博客
08-02 342
2. HTML标签 1. HTML简介 用户使用浏览器打开网页看到结果的过程就是：浏览器将服务端的文本文件（即网页文件）内容下载到本地，然后打开显示的过程。 而文本文件的文档结构只有空格和黄航两种组织方式，如此，文本文件在打开显示时，显示的效果将会非常的单一。 为了让显示的效果不那么单调，我们会偏向会使用 我们会偏向使用word一类的文本编辑工具来编排文本内容，编排的原理就是：在编辑文件时会选中各部分内容，然后为内容打上不同的标记，比如什么是标题，什么是段落，然后存放硬盘里，等下次打开时，word会识别之前
2.HTML
清风
09-22 265
文章目录0.快捷键/模板设置0.1快捷键0.2模板设置1.注释2. body标签3.标题标签4.段落标签5.基本标签6.图像标签6.1图像属性6.2图片路径7.链接标签7.1属性7.2base标签7.3假链接7.4锚点8.列表标签8.1无序列表8.2无序列表练习1.图书列表2.物品清单8.2有序列表8.3定义列表8.4定义标签练习 0.快捷键/模板设置 0.1快捷键 在pycharm中按下快捷键 ctrl + alt + insert 弹出新建文档 ctrl + d 快速复制光标所在行。 ctrl +
web标签
cherry12100511的博客
03-13 211
web前端开发 HTML 超文本标记语言，用于构建网页结构 账户： 密码： 18.提交按钮 input——submit 重置按钮 input——reset 姓名： 19.单选框、复选框input——radio checkbox 性别： 男 女 ...
HTML入门与进阶以及HTML5
热门推荐
wuyxinu的博客
12-12 38万+
目录 一、简介 1、前端开发最核心技术 （1）HTML是什么？ （2）CSS （3）JavaScript 2、前端开发其他技术 二、基础内容 1.基础总结 2.HTML的基本标签 (1)HTML标签 (2)head标签 (3)body标签 3、段落与文字 (一)、段落标签 (二)、网页特殊符号 (三)、自闭合标签 (四)、块元素和行内元素 (五)、练...
[Python从零到壹] 五.网络爬虫之BeautifulSoup基础语法万字详解
杨秀璋的专栏
11-08 1万+
欢迎大家来到“Python从零到壹”，在这里我将分享约200篇Python系列文章，带大家一起去学习和玩耍，看看Python这个有趣的世界。所有文章都将结合案例、代码和作者的经验讲解，真心想把自己近十年的编程经验分享给大家，希望对您有所帮助，文章中不足之处也请海涵。Python系列整体框架包括基础语法10篇、网络爬虫30篇、可视化分析10篇、机器学习20篇、大数据分析20篇、图像识别30篇、人工智能40篇、Python安全20篇、其他技巧10篇。您的关注、点赞和转发就是对秀璋最大的支持，知识无价人有情，希望
2HTML
weixin_30575309的博客
07-30 172
1.Html （超文本文件）不是一门编程语言，而是一个标签语言 2.HTML本质是一个文档 3.HTNL文档是由标签组成的文档 html 网站的内容 css 内容显示的效果 HTML+CSS静态网页 html的基本结构 <!DOCTYPE HTML><!--表明是html文件 DOC是document的意思 --> <html&gt...
HTML5 高级第二节
菜鸟心声：学的不仅是技术，更是梦想！
11-12 263
HTML5 高级 超链接 a 超链接在网页制作中是一个必不可少的部分，在浏览网页时，单击一张图片或者一段文字就可以弹出一个新的网页，这些功能都是通过超链接实现的。 绝对路径：绝对路径是指文件的完整路径，包括文件传输的协议( http、ftp) 等，一般用于网站的外部链接， 例如：http://news.sina.com.cn/。 相对路径：相对路径是指相对于当前文件的路径，它包含了从当前文件指向目的文件的路径。同时只要是处于站点文件夹之外，即使不属于同一个文件目录下，相对路径建立的链接也适合。采用相对路径是
2.HTML基础——认识HTML
Veronnit的博客
07-03 611
文章目录什么是HTMLHTML的作用网页的固定格式（1）编写网页的步骤：（2）基本结构： 什么是HTML HTML其实是HyperText Markup Language的缩写，超文本标记语言。 HTML的作用 首先利用记事本保存了一个标题和两段描述，然后修改纯文本文件的扩展名为.html，然后再利用浏览器打开； 打开之后发现显示的格式不对，不对的原因是在纯文本文件中所有文字都是同级别的，浏览器不知道有哪些文字代表什么意思，也就是浏览器不知道哪些文字是标题，哪些文字是段落…，所以导致了显示的格式不正确；
Web前端(基础入门)：2.HTML概述与基本结构
weishengzuoyi的博客
05-24 506
三、HTML概述与基本骨架 1.HTML是什么？ TyperText Markup Language 超文本协议语言 是制作网页的基础语言 2.语法：各种标签或标记组成<标签名></标签名> DTD 文档类型声明 html5(不同版本的DTD声明不一样) UTF-8 字符集 3.HTML的基本骨架 4.HTML常见标签 HTML4 ： 1.标题 h1~h6 语义化，给文本内容赋予标题的含义。是容器标签，可以包裹其他标签如p、span、a、img 标签有什么用？给文本赋
前端——2.HTML基本结构标签
m0_52096593的博客
03-07 738
HTML标签通常是成对出现的，例如 和
《Web程序设计基础R》实验报告---HTML基础
一只小鹿的博客
12-21 4901
一、实验目的 1．掌握常用的HTML语言标记； 2．利用文本编辑器建立HTML文档，制作简单表单页面。 二、实验环境 计算机、Windows10 操作系统 三、实验内容、源码及运行结果 1．  实验内容 在文本编辑器“记事本”中输入如下的HTML代码程序，以文件名sy1.html保存，并在浏览器中运行。（请仔细阅读下列程序语句，理解每条语句的作用） 源程序清单如下： 1. <html> 2. <head> 3. <title>Example</title&
前端学习笔记-2-HTML标签
joe_xby的博客
04-26 246
一、HTML语法规范 1、 HTML 标签 <> 包围的关键字，例如：<html>, 标签一般成双成对出现，例如 <html></html> （开始标签和结束标签）， 但也有少数的单标签 例如<br /> 2、双标签有包含标签和并列标签 包含标签例如：<head><title></t...
2.HTML基本格式
weixin_33709364的博客
02-28 101
一、 1、先在“文件”中打开文件夹，选择一个文件夹，在“查看”中的“侧边栏”中可以显示/隐藏工作栏。 2、在“文件”中新建文件夹，在“文件夹”保存或"Ctry+S"保存，弹出让你保存的位置，选择保存在“第一步”选中的文件夹，取名（例如index.html）。 二、 在完成“一”中的过程后. 1、直接输入‘html’后点击‘Tab’会出现基本内容，还要在输入“&lt...
web前端-2.HTML的基础知识点
weixin_51077152的博客
08-16 784
2.1. Html常用元素 网页标题标签 h1~h6 双标记 默认居左且加粗 一号标题字体最大，六号标题字体最小，逐级递减 属性： align=“left|center|right” 设置元素内容水平对齐方式 段落标记 <p>内容</p> 属性：align=“left|center|right” 设置元素内容的水平对齐方式 换行标记：没有任何的属性 <br/> 水平线 <hr/> 属性： align=“center|left
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值