【HTML】基础知识

最新推荐文章于 2024-10-04 22:04:56 发布
最新推荐文章于 2024-10-04 22:04:56 发布
阅读量139 收藏
点赞数
分类专栏： Web框架 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43797885/article/details/94202589
版权

一、html及其基本结构

  1. html概述
    html是一种超文本标记语言，扩展名为.html或者.htm
  2. 基本结构
<!DOCTYPE html>
<html lang="zh-CN">
<html>
<head>
	<title>01.html结构</title>
</head>
<body>
	<h3>你好，世界！</h3>
</body>
</html>
  1. html1.0和html5
    html1.0是html5的旧版本，现在估计很少有网站用了。
    html5是最新的一种版本。
    注意：两者 的主要区别是html5简化了文档注释，而且html5增加了新的元素
  2. html注释
<!--注释内容-->

二、html的标题标签

标题标签总共6个

<h1>你好，世界！</h1>
<h2>你好，世界！</h2>
<h3>你好，世界！</h3>
<h4>你好，世界！</h4>
<h5>你好，世界！</h5>
<h6>你好，世界！</h6>

三、段落标签、换行标签和字符实体

  1. 段落标签

主要作用是将一段话划分成一块，并且换行。

  1. 换行标签
这里的<br>是一种换行标签

<!DOCTYPE html>
<html>
<head>
	<title>换行标签</title>
</head>
<body>
	<h4>换行标签</h4>
	<h6>111<br>222<br>333<br>444<br>555</h6>
</body>
</html>
  1. 字符实体
    &nbsp：表示空格
    &lt：小于号
    &gt：大于号
<!DOCTYPE html>
<html>
<head>
	<title>字符实体</title>
</head>
<body>
	你好&nbsp世界<br>
	<!-- “<” 和 “>” 的字符实体为 &lt; 和 &gt;  -->
	<p>
		3 &lt; 5 <br>10 &gt; 5
	</p>
</body>
</html>

四、块标签和含样式的标签

  1. div表示一块内容，没有具体的语意
  2. span表示行内的一小块内容，没有具体的语意
  3. 强调词
<em>斜体</em>
<i>斜体</i>
<b>加粗</b>
<strong>加粗</strong>

五、图画标签和路径

  1. 图画标签
    img是加载外部图片的标签，常用属性有：src=“图片的路径”，alt=“图片的文字描述”
    图片放置在当前路径下的imgs文件夹中
<img src="./imgs/1.jpg" alt="帅哥" width="300" height="300">
  1. 绝对路径和相对路径
    绝对路径：是相对磁盘的位置去加载该位置的图片的。
<img src="F:/第3阶段：前端开发阶段/01html和CSS/01html/projects/imgs/1.jpg" alt="帅哥" width="300" height="300">

相对路径：这个是相对当前的位置来加载图片的。

<img src="./imgs/1.jpg" alt="帅哥" width="300" height="300">

注意：我们使用./表示当前位置；使用…/表示上一级目录的位置

六、链接标签

a是一个链接地址的标签，href表示需要链接的地址，
常用属性是：
href定义链接地址；
title定义鼠标悬停是出现的提示文本框；
target定义浏览器打开的窗口位置

<!--表示在新窗口中打开-->
<a href="http://www.baidu.com" title="百度知道" target="_blank">百度</a>

七、列表标签

  1. 有序列表
<ol type="a">
	<li>列表</li>
	<li>列表</li>
	<li>列表</li>
</ol>

  1. 无序列表

  2. 定义列表

dl：定义术语整体
dt：定义术语标题
dd：定义术语解释

<h3>前端三大块</h3>
<dl>
    <dt>html</dt>
    <dd>负责页面的结构</dd>

    <dt>css</dt>
    <dd>负责页面的表现</dd>

    <dt>javascript</dt>
    <dd>负责页面的行为</dd>

</dl>

八、表单

  1. form定义整体的表单区域
    action定义表单区域提交地址
    method定义表单提交方式

  2. label表单元素定义文字标注

  3. input定义通用的表单元素

1】type属性
text单行文本框
password密码输入框
radio定义单选框
checkbox定义复选框
file定义上传文件
submit定义提交按钮’
reset定义重置按钮
button定义普通按钮
image定义图片作为提交按钮，使用src定义图片地址
hidden定义隐藏表单域，用来存储值

2】value属性
定义表单元素的值

3】name属性
定义表单元素的名称

  1. 定义多行文本框
    textarea

  2. 定义下拉表单元素
    select

  3. option和select配合使用来定义下拉框下面的选项

展示代码

<!DOCTYPE html>
<html>
<head>
	<title>登录界面</title>
</head>
<body>
	<h2>登录界面</h2>
	<form action="http://www.baidu.com" method="get">
		<p>
			<label>用户名：</label><input type="text" name="username">	
		</p>
		<p>
			<label>密&nbsp&nbsp&nbsp码：</label><input type="password" name="password">	
		</p>
		<p>
			<label>性别：</label>
			<input type="radio" name="gender" value="0">男
			<input type="radio" name="gender" value="1">女
		</p>
		<p>
			<label>爱好：</label>
			<input type="checkbox" name="habby" value="sing">唱歌
			<input type="checkbox" name="habby" value="dance">跳舞
			<input type="checkbox" name="habby" value="runing">跑步
		</p>
		<p>
			<label>照片：</label>
			<input type="file" name="picture">
		</p>
		<p>
			<label>个人描述：</label>
			<textarea name="person_describle"></textarea>
		</p>
		<p>
			<label>籍贯：</label>
			<select name="address">
				<option value="0">甘肃天水</option>
				<option value="1">四川成都</option>
				<option value="2">陕西西安</option>
				<option value="3">其他</option>
			</select>
		</p>
		<!--<input type="image" src="./imgs/2.jpg" width="50" height="50">-->
		<p>
			<input type="submit" value="登录" name="tj">
			<input type="reset" value="取消" name="cannal">
		</p>

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

展示页面
在这里插入图片描述

九、表格

  1. table：表明一个表格
    1】border属性，定义表格边框，设置值是数值
    2】cellpadding属性，定义单元格内容和边框之间的距离，设置数值
    3】cellspacing属性：定义单元格与单元格之间的距离，设置数值
    4】align属性：设置整体表格和浏览器窗口之间水平对齐的方式，值：left、right、center

  2. tr定义表格中的一行

  3. td和th定义一行中的一个单元格，td表示普通单元格，th表示表头单元格；常用属性如下：
    1】align：单元格中数据水平对齐方式
    2】valign：设置单元格内数据垂直对齐方式
    3】colspan：设置单元格水平合并
    4】rowspan：设置单元格垂直合并

展示代码：

<!DOCTYPE html>
<html>
<head>
	<title>个人信息</title>
</head>
<body>
	<h2>个人信息</h2><br>
	<table border="1" align="center" height="200">
		<tr><td>姓名</td><td width="80"></td><td>性别</td><td width="80"></td><td width="120" rowspan="5"><img src="./imgs/3.jpg" width="120"></td></tr>
		<tr><td>民族</td><td></td><td>出身日期</td><td></td></tr>
		<tr><td>政治面貌</td><td></td><td>健康情况</td><td></td></tr>
		<tr><td>籍贯</td><td></td><td>学历</td><td></td></tr>
		<tr><td>电子信箱</td><td></td><td>联系电话</td><td></td></tr>
	</table>

</body>
</html>

展示页面
在这里插入图片描述

十、页面布局

  1. table布局
    目前不是很常用了
  2. div布局
    比较常用
  3. html5新布局元素
    1】header：用于设置页面的标题部分：标题、logo、导航；
    2】footer：用于设置页面的底部区域：友情链接、版权声明、联系方式等。
    3】article：用于定义一个独立的内容块（一篇文章、一个帖子等），它可以嵌套其他元素，有自己的头尾和主体使用时要注意内容的独立性，一般对于独立完整的内容使用article元素，如果只是一段内容的话使用section元素
    4】04session元素
    【1】用来定义文章的章节（标题和段落）
    【2】用来定义文章特定的区块（可视为区域分组元素，用来给页面的内容分块）
    【3】section元素可以用来定义文档的主体内容
    【4】就是为了给内容分段、为页面分区
    【5】div强调在形式上的独立性；但是session强调在内容上的独立性
    5】article和session的区别
    语义不同
    article强调内容上的独立性；section强调内容上的关联性
    article强调独立完整的内容；section强调页面内容的分块
    相同点
    本质上都是带有语义的div块元素
    分别看作
    和

6】aside元素（header、aside、section、footer）
【1】设置侧边栏
【2】用于定义article之外的内容，前提是这些内容与article元素内的内容相关：个人简介、版权用法等。
【3】可嵌套在article元素内部使用，作为主要内容的附属信息

7】nav元素
用法：用来定义导航栏；通常把一个文档的主导航栏放置在nav中；nav还可以给文章的目录做一个超链接
text-align：center//用来设置文字居中
padding：6px//用来设置文字是否上下居中
li{display：inline}判断列表是否在一行上；
a{text-decoration：none；}去除超链接的下划线

8】Time元素
标签中属性为的是让浏览器能够识别，pubdate属性是为了让浏览器很方便的识别出文章的发表日期。

9】hgroup元素和address元素
hgroup：为了给标题分组；方便搜索引擎进行检索；是header的子属性
address：以斜体的形式显示；通常用来说明作者的联系信息。

10】figure元素：媒体组合元素：图像、图表等。
figcaption元素：用来为figure元素定义标题
eg：

<figcaption>这是我的厨艺</figcapton>
<figure>
	<img src="p3.jpg" alt="">
</figure>

展示代码：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>手机网页演示</title>
	<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0">
	<style type="text/css">
		body{margin: 0px;}
		h4{display: inline;}
		header{width: 100%;height: 50px;background:#AEFEEE;padding: 2px }
		aside{width: 20%;height: 540px;background: #708090;float: left;}
		section{width: 80%;height: 540px;background: #D8BFD8;float: left;overflow: auto;}
		footer{width: 100%;height: 50px;background: green;clear: left;}
		img{max-width: 90%}
		figure{padding: 6px;}
		ul{list-style-type: none;}
		
	</style>
</head>
<body>
	<header>
		<header>
			<hgroup>
				<img src="pictures\ss.jpg" width="12%";>
				<h4>移动端手机页面练习</h4>
			</hgroup>
		</header>
	</header>
	<aside>
		<ul>
			<li><a href="http://www.baidu.com/"><img src="pictures\1.jpg"></a></li><br>
			<li><a href=""><img src="pictures\2.jpg"></a></li><br>
			<li><a href=""><img src="pictures\3.jpg"></a></li><br>
			<li><a href=""><img src="pictures\4.jpg"></a></li><br>
			<li><a href=""><img src="pictures\5.jpg"></a></li><br>
			<li><a href=""><img src="pictures\6.jpg"></a></li><br>
			<li><a href=""><img src="pictures\1.jpg"></a></li><br>
			<li><a href=""><img src="pictures\2.jpg"></a></li><br>
			<li><a href=""><img src="pictures\3.jpg"></a></li><br>
			<li><a href=""><img src="pictures\4.jpg"></a></li><br>
			<li><a href=""><img src="pictures\5.jpg"></a></li><br>
			<li><a href=""><img src="pictures\6.jpg"></a></li><br>
		</ul>
	</aside>
	<section>
		<figure>
			<img src="pictures\yf1.jpg" alt="衣服" width="45%";	><img src="pictures\yf2.jpg" alt="衣服" width="45%";>
		</figure>
		<figcaption>衣服</figcaption>
		<figure>
			<img src="pictures\ms1.jpg" alt="美食" width="45%";><img src="pictures\ms2.jpg" alt="美食" width="45%";>
		</figure>
		<figcaption>美食</figcaption>
		<figure>
			<img src="pictures\fz1.jpg" alt="住房" width="45%";><img src="pictures\fz2.jpg" alt="住房" width="45%";>
		</figure>
		<figcaption>住房</figcaption>
		<figure>
			<img src="pictures\jt1.jpg" alt="交通" width="45%";><img src="pictures\jt2.jpg" alt="交通" width="45%";>
		</figure>
		<figcaption>交通</figcaption>
		<figure>
			<img src="pictures\yf1.jpg" alt="衣服" width="45%";	><img src="pictures\yf2.jpg" alt="衣服" width="45%";>
		</figure>
		<figcaption>衣服</figcaption>
		<figure>
			<img src="pictures\ms1.jpg" alt="美食" width="45%";><img src="pictures\ms2.jpg" alt="美食" width="45%";>
		</figure>
		<figcaption>美食</figcaption>
		<figure>
			<img src="pictures\fz1.jpg" alt="住房" width="45%";><img src="pictures\fz2.jpg" alt="住房" width="45%";>
		</figure>
		<figcaption>住房</figcaption>
		<figure>
			<img src="pictures\jt1.jpg" alt="交通" width="45%";><img src="pictures\jt2.jpg" alt="交通" width="45%";>
		</figure>
		<figcaption>交通</figcaption>
	</section>
	<footer>
		<nav  style="display: inline">
			<li style="display: inline"><a href=""><img src="pictures\a.jpg" width="45"></a></li><br>
			<li style="display: inline"><a href=""><img src="pictures\b.jpg" width="45"></a></li><br>
			<li style="display: inline"><a href=""><img src="pictures\c.jpg" width="45"></a></li><br>
			<li style="display: inline"><a href=""><img src="pictures\d.jpg" width="45"></a></li><br>
			<li style="display: inline"><a href=""><img src="pictures\e.jpg" width="45"></a></li><br>
		</nav>
	</footer>
</body>
</html>

展示页面：
在这里插入图片描述

小结

经过短暂的一天的学习，html5中一些基础性的东西我们已经学习完了，因为我们不是专门做前端的，因此，接下来，我们来学习CSS3.0

AI study
关注
专栏目录
HTML基础知识
xuan971130的博客
03-02 2943
一、基础知识： 1.网站：许多网页的集合。 2.HTML：超文本标记语言（Hyper Text Markup Language），用来描述网页的一种语言。不是一种变编程语言，而是一种标记语言。 3.浏览器内核（渲染引擎）：负责读取网页内容，整理讯息、计算网页的显示方式并显示页面。 4.Web标准的组成 ...
HTML基础知识总结
qq_40046544的博客
11-14 4153
HTML 是用来描述网页地一种语言。HTML 指的是超文本标记语言（Hyper Text Markup Language）HTML 不是一种编程语言，而是一种标记语言（markup language）标记语言是一套标记标签（markup tag）HTML 使用标记标签来描述网页声明必须是 HTML 文档的第一行，位于 html 标签之前。声明不是 HTML 标签；它是指示 web 浏览器使用哪个 HTML 版本进行编写的指令。
HTML基础知识点
qq_40046544的博客
07-27 8881
网页是一个包含HTML标签的纯文本文件，它可以存放在世界某个角落的某一台计算机中，是万维网中的一页，是超文本标记语言格式。它通常是由图片、文字、链接、声音、视频等元素组成。通过网页浏览器访问。HTML指的是超文本标记语言（HyperTextMarkupLanguage），它是用来描述网页的一种语言。web标准也成为网页标准，它是由一系列标准组成，这些标准大部分由W3C负责定制，也有一些标准由其他标准组织制定。绝对路径指目录下的绝对位置，可以直接到达目标位置，通常从盘符开始的路径。例如D从。...
HTML基础知识点总结
weixin_64704029的博客
07-28 2177
html知识点
HTML基础知识点大全
m0_69674158的博客
05-04 6942
一、什么是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基础知识详解
qq_52262831的博客
12-23 4979
目录： 初始常用的HTML标签 资源路径 列表标签 表格标签 表单标签 表单提交
html基础知识
热门推荐
PiShubing的博客
02-11 1万+
html hyperText markup Language! 超文本标记语言 （1） 其中html跟标签 head body是结构化标签 charset是编码字符集 （1）utf-8最常用 (2) gbk国家标本扩展版本（包含亚裔版本，和繁体字符集） （3）unicode万国码 lang=“en,zh” 注释：language en=english zh=...
HTML 基础知识
是芜湖的，更是世界的！
05-10 2195
html基础知识
Html基础知识点整理
m0_53157173的博客
06-15 1934
Html基础知识点整理基本标签字体标签格式化标签1. < br/ >2. < p > < /p >3. < h1 > < /h1 >4. & nbspHtml的注释图片标签1. < img/ >列表标签1. < ul > < /ul >2. < li > < /li >3. < ol > < /ol >超链接标签< a > < /a &
HTML5基础知识
qq_46485137的博客
02-13 6173
一、初识HTML HTML：Hyper Text Markup Language（超文本标记语言） 超文本包括：文字、图片、音频、视频、动画等 HTML5的优势： 跨平台、 W3C标准 World Wide Web Consortium（万维网联盟） 成立于1994年，Web及时领域最权威和具影响力的国际中立性技术标准机...
html基础知识1111
03-26
html基础知识1111
HTML基础知识点学习一
06-30
前端入门基础知识点,HTML知识点整理,用Typora写的
HTML 与 ES6 是前端开发的两大核心技术
qq_25416827的博客
10-02 887
HTML：主要负责页面的结构、语义化、布局和多媒体处理。ES6：提高了 JavaScript 的开发效率和可读性，尤其是模块化、异步编程和数据处理方式的革。
复习HTML(基础）
m0_74124657的博客
10-01 1185
目录HTML含义 HTML作用HTML的常用元素元素的特点元素的分类1 是否嵌套关系2 是否独占一行块元素：独占一行 行内元素：共享一行 行内元素与块级元素的转换3是否有结束标签 常用标签1 标题标签：有六级 我们用h1 ~h6 表示2 段落标签：内容3 图像标签:< img src=" 图片路径" > 是为了添加图片使用的4 视频标签： 添加视频使用5 列表5.1 无序列表5.2 有序列表6 超链接 ： 内容 1 访问同目录下的网页2 访问外部 网页3 访问本地网页7 标签 ， 8 表
html中的文本标签(含标签的实现案例)
2301_76862031的博客
10-01 937
html中常用的标签h,p,hn,hr,br,font,time,mark,cite,特殊字符标签，图像标签
【移动端】Viewport 视口
最新发布
小秀的博客
10-04 903
（视口）是指浏览器中用户可见的那部分网页内容的区域，简单来说，它是用户当前看到的网页的“窗口”区域。在不同的设备上，Viewport 的大小会有所不同。
XHTML 简介
wjs2024的博客
10-04 400
XHTML作为一种严格的、基于XML的标记语言，为网页设计和开发提供了良好的可读性、可维护性和扩展性。尽管HTML5已成为当前主流的网页标记语言，但XHTML在特定领域仍然具有广泛的应用价值。
前端编程艺术（1）---HTML
lys20221113242的博客
09-30 1164
HTML（HyperText Markup Language，超文本标记语言）是一种用于创建网页的标准标记语言。它描述了一个网站的结构骨架，使得浏览器能够展示具有特定格式的文本、链接、图片和其他内容。：主体元素，包含可见的页面内容，如文本、图片、视频、游戏、可播放的音频等。：头部元素，包含元信息，如字符集、页面标题、样式表链接、脚本链接等。标签：HTML标签用于标记文本，以便浏览器知道如何渲染它们。属性：提供关于元素的额外信息，通常在开始标签中规定。：根元素，包裹所有其他HTML元素。
HTML基础知识详解
...它是Web开发的基础，允许开发者通过各种标签...这些只是HTML基础知识的一部分，实际开发中还有表格、列表、链接、图像、表单、框架、多媒体等诸多元素和属性。熟练掌握这些基本概念是成为一名合格的前端开发者的基础。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值