（讲解1）HTML基本结构

最新推荐文章于 2024-04-16 08:00:00 发布
最新推荐文章于 2024-04-16 08:00:00 发布
阅读量166 收藏
点赞数
分类专栏： 1+x
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45929422/article/details/103300516
版权 
<!DOCTYPE html>
<html>
<head>
	<title>笔记2</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="">
</head>
<body>

	<!-- 
		教师在授课过程中避免模棱两可的表述：比如浏览器有容错能力，所以标签大小写都可以等这样语言不要出现。
		从开始就要树立标准规范，强调这样几点：1双标签必须闭合，2单标签必须有结尾正斜线 3所有标签要求小写 4标签嵌套规范
		5属性值必须使用引号包裹等。
		
		教师重点强调：标题标签   对搜索引擎优化有重要意义 
		 搜索引擎要抓取网页的关键字   遍历不同的标签  有不同的权重  标题标签对爬虫程序来说权重值比较高   -->
标题标签   
	<h1 id="main">标题1</h1>
	<h2>标题2</h2>
	<h3>标题3</h3>
	<h4>标题4</h4>
	<h5>标题5</h5>
	<h6>标题6</h6>	



段落标签
	<p>段落标签<p>非常棒</p></p>



换行标签
	<br/>


水平线
	<hr/>


强调标签
	<em>倾斜</em>
	<i>倾斜</i>
	<strong>强壮</strong>
	<b>加粗</b>

<!-- 教师要强调路径问题  讲清什么是相对路径    什么是绝对路径 
	还要强调在项目中为什么不能使用绝对路径  
	第二点要强调路径中不能有中文  
	第三点注意相对路径中表示当前目录推荐（要求）写./
-->

图片标签
	<img src="img/adv1.png" alt="tu" title="图"/>
	<img src="img/adv1.png" alt=""/>


超链接
	<a href="http://www.baidu.com" target="_blank">百度</a>
	<a href="#main">主题</a>
	<a href="mailto:a.61@163.com">打开邮箱</a>
	<a href="笔记1.html#footer">跳转到笔记1的底部</a>



<!-- 列表标签能够更清晰的表达层级，w3c标准是推荐使用的标签  在实际开发中ul使用更多   ol也是不错的选择    -->

列表标签
	<ul>

		<li>
			<a></a>
		</li>
		<li>2</li>
		<li>3</li>
	</ul>


	<ol>
		<li>a</li>
		<li>b</li>
		<li>c</li>
	</ol>

	<dl>
		<dt>第一章</dt>
		<dd>第一节</dd>
		<dd>第二节</dd>
		<dd>第三节</dd>
		<dt>第二章</dt>
		<dd>第一节</dd>
		<dd>第二节</dd>
		<dd>第三节</dd>
		<dt>第三章</dt>
		<dd>第一节</dd>
		<dd>第二节</dd>
		<dd>第三节</dd>
	</dl>

<!-- 
	在div和css布局之前，前端开发人员都是使用表格布局的，这种布局方式对seo不友好，现在都要求div+css
	现在的表格就是展示数据用。注意colspan  和   rowspan 的使用。
	border="1" width="800" 这种属性的写法也是过时了。在面试过程中绝对不能出现table布局。
 -->

表格标签
	<table border="1" width="800">
		<caption>通讯录</caption>
		<thead>
			<tr>
				<th>序号</th>
				<th>姓名</th>
				<th>电话</th>
				<th>备注</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td rowspan="2">1</td>
				<td rowspan="2">刘艳</td>
				<td>13754899251</td>
				<td rowspan="2">山西太原</td>
			</tr>
			<tr>
				<td>15383405767</td>
			</tr>
			<tr>
				<td>2</td>
				<td>杨艳</td>
				<td>13753846431</td>
				<td>山西吕梁</td>
			</tr>
		</tbody>
		<tfoot>
			<tr>
				<td colspan="4" align="right">共2人</td>
			</tr>
		</tfoot>
	</table>








<!-- 
	表单标签对于初学者来说是难点   一下子接触这么多input类型  容易混淆，更难的是不理解表单作用，不理解get和post区别，
	最好通过搭建一个真实的服务器环境，比如phpstudy，简单演示如何进行get请求   post请求  。

	容易忽视的表单的一个属性  enctype="application/x-www-form-urlencoded" 在做上传业务必须有这个属性否则无法成功上传

	＜input type="checkbox" name="cb[]"＞ 可以直接checkbox name属性是一个数组形式

 -->



表单标签
	<form action="" method="post">
		用户名：<input type="text" name="username"/><br/>
		密码：<input type="password" name="password"/><br/>
		性别：<input type="radio" name="sex" value="0">男 <input type="radio" name="sex" value="1">女<br/>
		爱好：<select name="like"> 
			 <option value="看书">看书</option> 
			 <option value="旅游" selected="selected">旅游</option> 
			 <option value="运动">运动</option> 
			 <option value="购物">购物</option> 
		</select><br/>
		个人简介：<textarea cols="50" rows="10"></textarea>
		<input type="button" name="but" value="按钮">
		<input type="submit" name="submit" value="提交">
		<input type="reset" name="reset" value="重置">
	</form>




无语义标签
	<div></div>
	<span></span>





模块划分
	常见的企业站，多由头部区，展示图片区域，主题区域，底部信息区域组成





考点：
	1.块级元素和内联元素，空元素
	2.alt与title的区别
	3.head标签中的哪个标签不能省略
	4.标签书写正确的是
	5.src与href的区别
	6.<!doctype html>的意义
	7.语义化标签的作用
</body>
</html>
我还能再写两行
关注
专栏目录
HTML基本网页结构
weixin_69761220的博客
05-04 4405
HTML基本结构
HTML页面基本结构
cyjbdqn的博客
10-19 2491
之前介绍了HTML的编码规范，良好编码规范可以让我们的代码更加的易于维护，而今天要说的基本结构，则是能够让我们的页面正确的进行页面显示和SEO，正确的HTML格式加上良好的编码规范才是一个成熟合格的项目。 HTML页面基本结构 <!DOCTYPE html> <html> <head> <metacharset="utf-8...
html结构的解释（重点）
YCQNB_的博客
10-18 170
1.HTML的基本框架 1.html为超文本标记语言 2.html为头部标签 3.head为头部标签 4.body为主体标签 5.title为标题标签 6.标签的关系：包含关系 7.标签分为单标签和双标签 8.DOCTYPE声明文档类型 告诉浏览器要按照html的语法规则解析 9.lang="en"：声明页面语言类型（cn声明为中文语言） 10.charset="UTF-8"编辑格式 起到翻译作用 ...
html结构详解
qq_55016379的博客
04-27 204
html结构详解 head标签 只有一些特殊的标签才能放在head标签内，其他大部分标签都是放在body标签里的 head标签的六个子标签 title标签 meta标签 link标签 style标签 script标签 base标签 title标签 title标签的唯一作用就是定义网页的标题 meta标签 在HTML中，meta标签一般用于定义页面的特殊信息，如页面文字，页面描述等 这些内容并不能被用户所看到，是提供给搜索引擎的 meta标签有两个重要的属性name和http-equiv name属性 n
简单的HTML结构
weixin_42646310的博客
03-12 153
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...
html页面基本结构
webpon
08-05 794
什么是HTML？ 超文本标记语言(Hypertext Markup Language)"超文本"指的就是页面内可以包含图片，链接，甚至音乐，程序等非文本元素。 HTML发展历史 超文本标记语言（第一版）–在1993年6月作文互联网工程工作小组（IETF）工作草案发布（并非标准）。HTML2.0 --1995年11月作为RFC 1866发布，在RFC2854于2000年6月发布之后被宣布已...
HTML——基础结构以及常见标签
最新发布
程序员阿皓的博客
04-16 1581
本文介绍一下HTML基础结构以及常用的标签。
【HTML5】->初识HTML->HTML简单介绍&HTML5基本元素讲解
01-08
HTML边缘探索Ⅰ HTML简介Ⅱ HTML到HTML5—-HTML发展历史Ⅲ HTML5简介Ⅳ HTML5环境Ⅴ HTML5基本元素介绍Ⅵ 写一个最简单的HTML程序 Ⅰ HTML简介 超文本标记语言（Hyper Text Markup Language），缩写为HTML，标准通用...
html基本知识讲解
10-10
在“html基本知识讲解”这个主题中，我们将深入探讨HTML的核心概念、基本结构以及常用标签。 1. HTML的基本结构：HTML文档通常以`<!DOCTYPE html>`声明开始，表明文档类型为HTML5。接着是`<html>`标签，它是整个...
html的实例教材 有详细的讲解 看完基本就会了 不要错过啊
12-30
HTML的基本结构通常包括`<!DOCTYPE html>`声明，`<html>`元素作为整个文档的根元素，以及`<head>`和`<body>`两个主要部分。`<head>`部分包含元数据，如页面标题、字符集设置等，而`<body>`则包含实际的可见内容。 ...
HTML讲解（HTML结构及标签）
m0_48273471的博客
04-20 7344
HTML的使用及HTML常见标签 目录 1. HTML结构 1.1HTML 基本结构 1.2标签层次结构 2. HTML常见标签 2.1 注释标签 2.2 标题标签 2.3 段落标签 2.4 换⾏标签: br 2.5 格式化标签 2.6 图⽚标签: img 2.7 超链接标签: a 2.8 表格标签 2.9 列表标签 2.10 表单标签 1. HTML结构 1.1HTML 基本结构 <html> <head> ...
HTML简述及基本结构
qq_39671720的博客
05-13 5852
前端开发的定义： 为B/S架构软件提供界面解决方案 HTML概述 HTML是 HyperText Mark-up Language 的首字母简写，意思是超文本标记[标签]语言，超文本指的是超链接，标记指的是标签，是一种用来制作网页的语言，这种语言由一个个的标签组成，用这种语言制作的文件保存的是一个文本文件，文件的扩展名为html或者htm。 HTML文档基本结构 一个html的基本结构如下： &l...
HTML基本结构及基本标签
awjdwb的博客
08-11 8108
什么是HTML： HTML是Hyper Text Markup Language的缩写，即超文本标记语言（所谓超文本可以理解为具有超能力的文本），是一种解释性语言，用于制作网页界面，使用该语言编写的网页最终被浏览器解释执行 HTML基本结构： &amp;lt;html&amp;gt;//用来标记HTML文档的开始 &amp;lt;head&amp;gt; //用来标记HTML文档头部的开始 &amp;lt;/...
想要写好HTML代码你必须知道的核心骨架结构！
电笔小鑫的博客
05-22 444
要制作一个静态页面，需要用HTML和CSS来实现。一个页面由多个HTML元素组成，层次结构很重要。 CSS来选中某个元素添加样式，为了让页面看起来更美观。 HTML的文档结构可以这样理解： html元素又叫跟标记、根元素，是所有元素的祖先元素，文档中的其他元素都在它里面。 该元素的相关属性有 : lang-指文档中的文字是用哪种自然语言书写（该属性可能会影响浏览器的语音阅读和翻译行为） head元素是文档头，它是HTML的第一个子元素，通俗的讲就是人的头部。（head元素中的内容不会展示到页面上）
HTML的基本结构
热门推荐
LM193的博客
03-12 1万+
HTML的基本结构第一次学习前端的小白们看过来，知道下面这些都是什么意思吗？<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body></body> </html>下面我们就来一个标签一个标签的去理解。<!--文档声明：告诉浏览器以下文件用html
认识html文件基本结构
xinianbuxiu的博客
11-28 678
一个HTML文件是有自己固定的结构的。     ...     ... 代码讲解： 1. 称为根标签，所有的网页标签都在中。 2.  标签用于定义文档的头部，它是所有头部元素的容器。头部元素有、、 、、 等标签，头部标签在下一小节中会有详细介绍。 3. 在和标签之间的内容是网页的主要内容，如、、、等网页内容标签，在这里的标签中的内容会在浏览器中显示出来。
HTML head包含内容
hr226的博客
09-09 199
<!DOCTYPE html> <!-- lang=language en=english --> <html lang="en"> <head> <!-- charset="字符集" 为了解决语法正常解析问题 --> <meta charset="UTF-8"> <!-- viewport 跟...
Html结构解析
weixin_30527143的博客
07-10 2773
一、html文档树状图结构 　　1）html树状图 2）html代码解释树形图 <!DOCTYPE html> <!--声明--> <html lang="en"> <!--html开始--> <head> <!--头部开始--> &lt...
HTML基础：超级链接与结构讲解
此资源重点在于帮助读者理解HTML的基本结构、元素使用以及与互联网技术的关联，从而能有效地创建和管理网页内容。通过学习，读者可以掌握在网页中创建链接、控制文本样式、插入多媒体等内容的技巧。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值