HTML基础知识

最新推荐文章于 2022-04-29 16:27:06 发布
最新推荐文章于 2022-04-29 16:27:06 发布
阅读量284 收藏 3
点赞数 1
分类专栏： HTML / CSS / JS 文章标签： html html5 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44339789/article/details/120059610
版权

目录

一、什么是HTML

二、HTML基本结构

三、网页基本标签元素

四、图像标签

五、超链接标签

六、锚链接

七、HTML列表

1、无序列表

2、有序列表

3、定义列表

 八、表单

1、表单的典型应用

2、常见的表单元素

 3、表单的基本结构

4、表单基本元素

5、其他表单元素

6、表单的高级用法

九、表格

1、表格的基本语法

 2、表格常用属性

 3、表格的分组标签

 4、表格的跨行与跨列

 十、iframe框架结构

一、什么是HTML

  • HTML（Hyper Text MarkupLanguage）超文本标记语言
  • 超文本包括：文字、图片、音频、视频、动画等。

二、HTML基本结构

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>网页标题</title>
	</head>

	<body>
        网页内容<hr/>
	</body>
</html>
  • head部分为网页头部，设置网页的属性
  • body部分为主体部分，网页内容的编辑区
  • <body> </body>等成对标签，分别称为开放标签和闭合标签
  • 单独出现的标签（空元素），如<hr/>：以为用/来关闭空元素
  • 用DOCTYPE来声明页面规范（告诉浏览器使用什么规范）
  • 用<meta>标签来设置页面编码。（推荐使用utf-8）其中gb2312包含全部中文字符，utf-8包含全世界所有国家需要使用到的字符。页面编码应与页面文件保存时的编码一致。

三、网页基本标签元素

HTML标签1
斜体标签<em>
换行标签<br/>
段落标签<p>
标题标签<h1>~<h6>
粗体标签<strong>
水平线标签<hr />
空格&nbsp
大于符号 >&gt
小于符号 <&lt
引号 “&quot
版权符号 ©

&copy

注释内容<!-- HTML注释内容 -->
  • 案例1：（使用HBuilderX编写html文件，Chrome浏览器运行）

代码实现：

<html>
	<head>
		<meta charset="utf-8">
		<title>清平乐·年年雪里</title>
	</head>
	<body>
		<!--注释，不会被浏览器解释执行 ctrl+/快捷键-->
		<!-- h1标题 -->
		<h1>清平乐·年年雪里</h1>
		<!-- em斜体   $nbsp空格  strong黑体  hr /画一条线  -->
		<em>朝代：宋代</em>&nbsp;作者：<strong>李清照</strong><hr />
		原文：
		<!-- <p>段落 -->
		<p>
		年年雪里，常插梅花醉，挼尽梅花无好意。
		<!-- br空格 -->
		赢得满衣清泪！<br>
		今年海角天涯，萧萧两鬓生华。
		看取晚来风势，故应难看梅花。</p>
		
		&gt;大于 
		&lt;小于 
		&quot;引号
		&copy;版权说明符
	</body>
</html>
  •  案例2：

    代码实现：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>李清照简介</title>
	</head>
	<body>
		<h1>人物简介</h1>
		<p>
		<strong>李清照</strong>(<em>1084年3月13日~1155年5月12日</em>)，
		宋代女词人，号易安居士婉约词派代表，有“千古第一才女”之称。早期生活优裕，
		金兵入据中原时，流寓南方，境遇孤苦。所作词，前期多写其悠闲生活，
		后期多悲叹身世，情调伤感。形式上善用白描手法，白辟途径，语言清丽。
		论词强调协律，崇尚典雅，提出词“别是一家”之说，反对对作诗文之法作词，
		留有诗集《易安居士文集》、《易安词》等。
		</p><hr />
	</body>
</html>

四、图像标签

  • 常见的图像格式：.jpg    .gif   .bmp   .png
  • 图像标签的语法格式
<img src="images/1.jpg" alt=“text” title=“text” width="x" height="y"/>
  •  src：图像路径（绝对路径 \ 相对路径）
  • alt：图像的代替文字（断网或未加载出来的提示内容）
  • title：鼠标悬停提示内容
  • width：图像宽度
  • height：图像高度

五、超链接标签

<a href="demo03.html" target="_blank">打开网页</a>
  • href：链接路径
  • target：链接在哪个窗口打开，常用值：_self（当前窗口）、_blank（新的窗口）
  • 可以给文本或图片添加超链接
<a href="demo03.html" target="_blank"><img src="images/1.jpg" alt=“text” title=“动漫图片” width="400px"/></a>

  • 案例1：制作简单的家用电器排行榜页面，家电名称使用超链接、商品之间使用水平线（电脑里没有图片随便加的）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h2>家用电器排行榜</h2>
		<img src="images/1.jpg" width="100px"/>
		<a href="demo03.html">创维42e5chr</a>
		42英寸&nbsp;￥2799.0
		<hr />
		
		<img src="images/2.jpg" width="100px"/>
		<a href="demo03.html">海信42e5chr</a>
		42英寸&nbsp;￥2848.0
		<hr />
		
	</body>
</html>

六、锚链接

  • 从A页面的甲位置跳转到本页中的乙位置（同一个页面）
  • 从A页面的甲位置跳转到B页面中的乙位置（两个页面）
  • 创建步骤：
    1. 创建跳转标记
<a name="marker">乙位置</a>

                 2. 创建跳转链接

<a href="#marker">甲位置</a>

代码展示：（同一个页面）

<a href="#C4">查看 Chapter 4。</a>
			</p>
		
			<h2>Chapter 1</h2>
			<p>This chapter explains ba bla bla</p>
		
			<h2>Chapter 2</h2>
			<p>This chapter explains ba bla bla</p>
		
			<h2>Chapter 3</h2>
			<p>This chapter explains ba bla bla</p>
		
			<h2><a name="C4">Chapter 4</a></h2>
			<p>This chapter explains ba bla bla</p>

代码展示：（两个页面）

<a href="demo06.html#C4" target="_blank">查看 Chapter 4。</a>
			</p>
		
			<h2>Chapter 1</h2>
			<p>This chapter explains ba bla bla</p>
		
			<h2>Chapter 2</h2>
			<p>This chapter explains ba bla bla</p>
		
			<h2>Chapter 3</h2>
			<p>This chapter explains ba bla bla</p>
		
			<h2><a name="C4">Chapter 4</a></h2>
			<p>This chapter explains ba bla bla</p>

七、HTML列表

  • 无序列表（没有序号）
  • 有序列表
  • 定义列表

1、无序列表

  • 语法格式：
<ul>
    <li>列表内容1</li>
    <li>列表内容2</li>
    <li>列表内容n</li>
</ul>
  • 没有顺序符号，每个<li>标签独占一行
  • 默认<li>标签项前有实心小圆点

2、有序列表

  • 语法格式：
<ol>
    <li>列表内容1</li>
    <li>列表内容2</li>
    <li>列表内容n</li>
</ol>
  • 有顺序符号，每个<li>标签独占一行
  • 默认<li>标签项前有顺序标记
  • 可以通过修改<ol>标签的type属性值（a，A等）更改

3、定义列表

  • 语法格式：
<dl>
    <dt>标签1</dt>
    <dd>列表内容1</dd>
    <dt>标签2</dt>
    <dd>列表内容2</dd>
</dl>
  • 没有顺序符号，每个<dt><dd>标签独占一行
  • 默认没有标签
  • 案例1：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- ul无序号的列表(无序列表) -->
		<ul>
			<li>北京</li>
			<li>上海</li>
			<li>深圳</li>
			<li>杭州</li>
		</ul>
		
		<!-- ol有序号的列表(有序列表) -->
		<ol>
			<li>北京</li>
			<li>上海</li>
			<li>深圳</li>
			<li>杭州</li>
		</ol>
		
		<!-- dl自定义序号列表(定义列表) 二级列表 -->
		<dl>
			<dt>吉林省</dt>
				<dd>长春市</dd>
				<dd>吉林市</dd>
				<dd>四平市</dd>
			<dt>浙江省</dt>
				<dd>宁波市</dd>
				<dd>杭州市</dd>
				<dd>金华市</dd>
		</dl>
	</body>
</html>

                执行结果：

 八、表单

1、表单的典型应用

  • 提供搜索工具
  • 登陆

2、常见的表单元素

单行文本标签text
密码框password
文本域textarea
单选按钮radio
文本选择框file
复选框checkbox
下拉列表select
提交按钮submit
重置按钮reset

 3、表单的基本结构

  • 语法：
<form action="表单提交地" method="提交方法址">
文本框、按钮等表单元素
</form>
  • action：若为空则代表当前页面提交
  • method：可选值有（post、get）get方法提交参数在地址栏可见，post方法一般用于数据、保密数据提交

4、表单基本元素

  • <input>标签语法：
<input type="类型" name="表单元素名" id="" value="值" size="显示宽度"  maxlength="最大长度"  checked="是否选中" />
  • type：可选值text（默认）、password、button、checkbox、radio
  • checked：仅与<input type=”checkbox“> 或 <input type="radio"> 配合使用，选中值为checked
  • 案例1： 

    <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- form表单标签 action表示提交到某个服务器 method提交的方法(可以为空)-->
		<form action="" method="">
			<!-- 文本框由input标签提供 text为文本框  size(长度)输入几个文字-->
			名字：<input type="text" size="12" /><br>
			姓氏：<input type="text" size="12"/><br>
			登录名：<input type="text" size="12" />(包含a-z,0-9和下划线）<br>
			<!-- password为密码框 -->
			密码：<input type="password" size="12" />(至少包含6个字符)<br>
			再次输入密码：<input type="text" size="12" /><br>
			电子邮箱：<input type="text" size="12" /><br>
			
			<!-- radio单选按钮 定义name属性分组 name相同为同一个组 若不分组两个按钮都可以选择-->
			性别：<input name=“sex” type="radio"/>男 
			      <input name=“sex” type="radio"/>女<br>
			
			<!-- checkbox复选框 n -->
			爱好：<input name= “hobby” type="checkbox" />运动
				  <input name= “hobby” type="checkbox" />聊天
				  <input name= “hobby” type="checkbox" />运动
				  <input name= “hobby” type="checkbox" />玩游戏<br>
				  
			<!-- select下拉列表 option下拉列表项 -->
			户籍地：<select>
				<option>吉林省</option>
				<option>浙江省</option>
				<option>黑龙江省</option>
			</select><br>
			
			<!-- textarea文本域 rowx行  cols列数-->
			自我介绍：<textarea rows="5" cols="10"></textarea><br>
			
			<!-- 选择文件上传file -->
			选择文件：<input type="file" /><br>
			
			<!-- submit提交按钮 -->
			<input type="submit" value="提交"/>
			<!-- reset重置按钮 -->
			<input type="reset" value="重置" />
			
		</form>
	</body>
</html>

5、其他表单元素

  • 列表框
<select name="指定列表名称"  size="显示的行数">
<option value="选项"  selected="selected">...</option>
</select>
  • 文本域
<textarea name="..." rows="行宽" cols="列宽">文本内容</textarea>

6、表单的高级用法

  • 关联表单元素

语法：

<label for="关联元素ID">
</label>

实例：

  •  只读属性：readonly -- 希望某个框的内容只允许用户看，不可以修改
  • 禁用属性：disabled -- 因没有达到使用条件，限制用户使用
  • 隐藏属性：hidden -- 隐藏框体
  • 综合案例1：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h2>申请表</h2>
		<form>
			姓名：<input type="text" size="12" /><br>
			密码：<input type="password" size="12" /><br>
			照片：<input type="file" /><br>
			感兴趣的职位：
			<input type="radio" name="zw" />Web设计
			<input type="radio" name="zw" />Web开发<br>
						
			向往的城市：
			<select>
				<option>--请选择--</option>
				<option>宁波</option>
				<option>赤水</option>
				<option>淮北</option>
			</select><br>
			
			协议：<br>
			<!-- readonly只读 -->
			<textarea readonly="readonly" rows="10" cols="12">
				求职信息必须真实，准确。本网站只负责向企业推荐。
			</textarea><br>
			
			<input type="checkbox"/>认真阅读并接受以上的协议<br>
			
			经验：<br>
			<select>
				<option>--请选择--</option>
				<option>有经验</option>
				<option>无经验</option>
			</select><br>
			
			<input disabled="disabled" type="submit" value="提交"/>
			<input type="reset" value="重置" />
		</form>
	</body>
</html>

九、表格

1、表格的基本语法

<table bgcolor="gold" border="1" width="30%" cellspacing="50" cellpadding="80">
			<!-- tr行 td列 -->
			<tr>
				<td align="center">第1个单元格的内容</td>
				<td align="center">第2个单元格的内容</td>
			</tr>
			<tr>
				<td align="center">第1个单元格的内容</td>
				<td align="center">第2个单元格的内容</td>
			</tr>
		</table>

 2、表格常用属性

 3、表格的分组标签

表头<th>
表格标题<caption>
页眉<thead>
数据主体<tbody>
页脚<tfoot>
  •  案例1：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<table width="300px" border="1" cellspacing="0" cellpadding="0">
			<!-- caption表格标题 -->
			<caption>年终数据报表</caption> 
			
			<!-- 表头thead -->
			<thead bgcolor="aqua">
				<tr>
					<th>月份</th>
					<th>收入</th>
				</tr>
			</thead>
			
			<!-- 表体tbody -->
			<tbody bgcolor="aquamarine">
				<tr>
					<td>1月份</td>
					<td>100</td>
				</tr>
				<tr>
					<td>2月份</td>
					<td>80</td>
				</tr>
				<tr>
					<td>3月份</td>
					<td>300</td>
				</tr>
				<tr>
					<td>4月份</td>
					<td>400</td>
				</tr>
				<tr>
					<td>5月份</td>
					<td>100</td>
				</tr>
				<tr>
					<td>6月份</td>
					<td>200</td>
				</tr>
			</tbody>
				
			<!-- tfoot表角 -->
			<tfoot bgcolor="yellow">
				<tr>
					<td>平均月收入：</td>
					<td>196.67</td>
				</tr>
				<tr>
					<td>总计：</td>
					<td>1180</td>
				</tr>
			</tfoot>
			
		</table>
	</body>
</html>

 4、表格的跨行与跨列

  • 跨列：<td>标签的colspan属性，值为数字，代表合并几列
  • 跨行：<td>标签的rowspan属性，值为数字，代表合并几行
  • 案例2：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<table width="300px" border="1" cellspacing="1" cellpadding="0">
			<tr>
				<!-- colspan合并列 数字为合并几个 -->
				<td colspan="3">学生成绩</td>
			</tr>
			<tr>
				<!-- rowspan合并行 -->
				<td rowspan="2">张三</td>
				<td>语文</td>
				<td>98</td>
			</tr>
			<tr>
				<td>数学</td>
				<td>95</td>
			</tr>
			<tr>
				<td rowspan="2">李四</td>
				<td>语文</td>
				<td>88</td>
			</tr>
			<tr>
				<td>数学</td>
				<td>95</td>
			</tr>
		</table>
	</body>
</html>

 十、iframe框架结构

1、<iframe>标签

  • 作用：创建文档的内联框架
  • 属性：
    • src：需引入的文档路径
    • width / height：设定框架的宽与高
    • scrolling：是否显示滚动条，auto | yes | no
    • frameborder：是否要边框，1显示，0不显示
    • name：内联框架名称
  • 案例：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h2>这是一个动漫网页的iframe框架</h2>
		<!-- iframe动态面板 -->
		<!-- 在网页中嵌入网页 -->
		<!-- scrolling根据网页的大小判断需不需要滚顶条 -->
		<!-- frameborder为0是不显示边框 -->
		<iframe src="demo03.html" frameborder="0" scrolling="auto" width="500px" height="500px"></iframe>
	</body>
</html>

TanHuiWen-
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML第五章上机练习1
qq_36074064的博客
10-16 3981
百度音乐标签页面 全部歌手 A   A Fine Frenzy  Air Supply  Akon  Alan Silvestri   Apink  安又琪  安在旭  安室奈美惠  
HTML5第一章
BAILI18的博客
10-24 362
1.请写出网页的基本标签、作用和语法。 标题标签：&amp;amp;lt;h1~h6&amp;amp;gt;，所有标题字体加粗。 段落标签：…,表示一段文字等内容。 换行标签：,没有结束标签。 水平线标签：,没有结束标签。 字体样式标签：…让字体加粗。让文字倾斜。 2.超链接有哪些类型？它们的区别是什么？ 页面间链接：A页到B页，最常用，用于网站导航。 锚链接：A页甲位置到A页乙位置或A页甲位置到B页乙位置。 功能性链接：在页面...
html第一章作业1：制作家用电器排行榜
weixin_48131445的博客
04-29 689
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt...
用html制作家用电器网页设计，个人网页，css
Night_798的博客
04-24 1848
1.<div>通用分组 <div>这是一个通用分组</div> <div>这是又一个通用分组</div> 解释：<div>元素在早期的版本中非常常用，通过<div>这种一般性分组元素进 行布局。而在HTML5 中，由于语义的缘故，被其他各种文档元素所代替。和 <p>段落的区别就是，两段文本的上下空隙是没有的，空隙间隔和<br>换行一 样。 2.<pre>展现格式化内容
HTML css 家用电器分类
weixin_30378311的博客
11-10 3684
转载于:https://www.cnblogs.com/qinxinabc/p/7815825.html
家电排行榜
qq_36074096的博客
10-09 498
家用电器排行榜 家用电器排行榜 创维42E5CHR 42英寸 ￥2799.00 海信电视海信LED42EC260JD 42英寸 ￥2848.00 索尼电视索尼 KLV-40R476A 40英寸 ￥3599.00 创维电视创维42E83RE 42英寸 ￥3699.00 创维电视创维42E7BRE 42英寸 ￥3299.00
HTML5
Bulid_Evolto的博客
08-09 924
《HTML5-笔记》 学习内容 HTML的概述 目标 学习HTML的概念和作用 概念 ​ HTML：Hyper Text Markup Language 超文本标记语言。 ​ HTML的作用：就是开发网页的。 超文本：(超人) 不同于普通文本，超文本不但可以阅读，还可以有交互的功能，还可以设置字体，颜色，添加图片等。 标记语言：由一些固定标记组成 标签格式：以<开头 ，以>结...
家用电器排行榜
初学者
10-09 967
家用电器排行榜 家用电器排行榜 创维42E5CHR 42英寸 $2799.00 海信LED42EC260JD 42英寸 $2848.00 索尼KLV-40R476A 40英寸 $3500.00 创维42E82RE 42英寸 $3699.00 创维42E7BRE 42英寸 $3299.00
html基础知识
12-04
html基础知识html基础知识html基础知识html基础知识html基础知识
练习4：家用电器商品分类页面.7z
06-04
家用电器商品分类页面，这里是参考答案，大家可以借鉴一下，如果对于学术上有疑问可以通过博客找我.
Html基础知识点.docx
07-23
Html 基础知识点 Html 是一种标记语言，用于创建网页的结构和内容。以下是 Html 基础知识点： 一、Html5 文档类型和字符集 * Html5 文档类型：<!doctype html> * Html5 字符集： 二、Html5 Canvas 元素 * ...
html基础知识1111
最新发布
03-26
html基础知识1111
HTML基础知识点汇总
12-04
HTML 基础知识点汇总 HTML（Hypertext Markup Language，超文本标记语言）是网页设计的基础语言，它将影像、声音、图片、文字等连接显示出来。HTML 语言使用标记式的指令（Tag），将网页文件组织起来，并由浏览器...
2.1作业
weixin_43027940的博客
10-23 490
1.网页的基本标签是什么 &amp;lt;h1&amp;gt;&amp;lt;/h1&amp;gt;为标题标签 分1至6级 &amp;lt;p&amp;gt;&amp;lt;/p&amp;gt;为段落标签 &amp;lt;a&amp;gt;&amp;lt;/a&amp;gt;为超链接标签 &amp;lt;img src=&quot;path&quot;&amp;gt;为图像
有关保存文件时的编码选项与html/jsp页面设定字符编码的配置
GodFamiliar的专栏
05-27 575
分两种情况介绍  注：首先，各位得对一次 请求/响应 的流程有基本认识，即：浏览器发出请求--》服务器接收并处理请求--》将html形式的页面返回（响应）给浏览器，一次 请求/响应 完毕！  静态页面（html）：                            保存文件时的编码选项(默认为ANSI，中文操作系统ANSI即为GBK)必须得与html页面中的content-Typ
HTML第一章作业
hao19980524的博客
10-23 1849
1.请写出网页的基本标签。 答：p 表示段落，默认段落上下会有行间距； br 是换行，自闭和标签； hr 是横线； em 是倾斜； 2.超链接有哪些类型？它们的区别是什么？ 答：超级链接简单来讲，就是指按内容链接。 超级链接在本质上属于一个网页的一部分，它是一种允许我们同其他网页或站点之间进行连接的元素。各个 网页链接在一起后，才能真正构成一个网站。所谓的超链接是指从一个网页指向一个...
HTML基础语法
qq_49956121的博客
08-31 501
什么是HTML？ Hyper Text MarkupLanguage（超文本标记语言） 什么是W3C？ World Wide Web Consortium（万维网联盟） W3C标准包括: 结构化标准语言（XHTML 、XML） 表现标准语言（CSS） 行为标准（DOM、ECMAScript） 一、HTML网页基本结构 1、基本结构 <html> <head> <title>网页标题</title> </head> <body&g
Html知识点汇总.docx
08-29
...它是Web开发的基础，允许开发者通过各种标签...这些只是HTML基础知识的一部分，实际开发中还有表格、列表、链接、图像、表单、框架、多媒体等诸多元素和属性。熟练掌握这些基本概念是成为一名合格的前端开发者的基础。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值