HTML基础 HTML重点知识总结

最新推荐文章于 2024-05-23 13:39:19 发布
最新推荐文章于 2024-05-23 13:39:19 发布
阅读量3.4k 收藏 38
点赞数 11
分类专栏： HTML 文章标签： html 标签 结构
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Homing_qu/article/details/61930322
版权

HTML

1、HTML概念

HTML：Hyper Text Mark-up Language超文本标记语言，是一种用于创建网页的标准标记语言。通过元素标签的形式建立Web站点，通过浏览器进行解析。

2、HTML基本语法结构

开始标签 属性  属性值 内容 结束标签；

<h1 id = "h1">hello world 1</h1>

3、HTML文档结构

所用的HTML网页文件都是由<html></html>、<head></head>、<title></title>、<body></body>四对元素标签构成的；

<html>
	<head>
		<meta charset = "utf - 8">
		<title>标题测试</title>
	</head>
	<body>
		<h1 id = "h1">hello world 1</h1>
		<h2>hello world 2</h2>
		<h3>hello world 3</h3>
		<h4>hello world 4</h4>
		<h5>hello world 5</h5>
		<h6>hello world 6</h6>
	</body>
</html>

小结:

<html>…</html>标识网页文件的开始与结束，所有的Html元素，都要放在这对标记中;

<head>…</head>标识网页文件的头部信息，如标题、搜索引擎关键字等;

<title>…</title>标识网页文件的标题;

<body>…</body>标识网页文件的主体部分;

4、HTML文档的注释结构

<!--注释的内容-->

5、HTML元素块级元素、内联元素

块级元素(block):每一个块级元素默认占据一行，紧跟的块级元素分配在下一行，可以自己定义宽高、边距；常见的HTML块级元素有:<div>、<ul>、<ol>、<li>、<dl>、<dt>、<dd>、<h1>、<p>、<table>、<form>、<noform>、<td>等；

内联元素(span):在同一行内可以有多个内联元素，紧跟第一个内联元素的后面，不可以自己定义宽高、边距，要靠内容撑起来；常见的HTML内联元素有:<a>、<b>、<img>、<input>、<select>、<strong>、<span>、<option>、<em>、<textarea>等；

6、HTML常用元素

a) html标题（<h1>到<h6>,数字越大，级数越小）

<html>
	<head>
		<meta charset = "utf - 8">
		<title>标题测试</title>
	</head>
	<body>
		<h1>hello world 1</h1>
		<h2>hello world 2</h2>
		<h3>hello world 3</h3>
		<h4>hello world 4</h4>
		<h5>hello world 5</h5>
		<h6>hello world 6</h6>
	</body>
</html>

b) html水平线

<html>
	<head>
		<meta charset = "utf - 8">
		<title>标题测试</title>
	</head>
	<body>
		<h1>hello world 1</h1>
		<hr></hr><!--水平线-->
		<h2>hello world 2</h2>
	</body>
</html>

c) html注释

<html>
	<head>
		<meta charset = "utf - 8">
		<title>标题测试</title>
	</head>
	<body>
		<h1>hello world 1</h1>
		<hr></hr><!--水平线-->
		<h2>hello world 2</h2>
		<!--<h3>hello world 3</h3>为三级标题-->
	</body>
</html>

d) html段落<p>及段落换行<br/>

<html>
	<head>
		<meta charset = "utf - 8">
		<title>标题测试</title>
	</head>
	<body>
		<p>你好！中国</p>
		<hr></hr>
		<p>hello world</p>
		<br/><!--空一行-->
		<p>大家好<p/>
	</body>
</html>

e) html文本格式化

<html>
	<head>
		<meta charset = "utf - 8">
		<title>标题测试</title>
	</head>
	<body>
		<h1>hello world</h1>
		<hr></hr>
		<b>hello world		定义粗体文字</b>
		<hr></hr>
		<big>hello world	定义大号文字</big>
		<hr></hr>
		<em>hello world		定义着重文字</em>
		<hr></hr>
		<i>hello world		定义斜体文字</i>
		<hr></hr>
		<small>hello world		定义小号文字</small>
		<hr></hr>
		<strong>hello world		定义加重语气</strong>
		<hr></hr>
		<sub>hello world		定义下标文字</sub>
		<hr></hr>
		<sup>hello world		定义上标文字</sup>
		<hr></hr>
		<ins>hello world		定义插入文字</ins>
		<hr></hr>
		<del>hello world		定义删除文字</del>
		<hr></hr>
	</body>
</html>

f) html超链接

<html>
	<head>
		<meta charset = "utf - 8">
		<title>标题测试</title>
	</head>
	<body>
		<a href = "http://www.baidu.com">百度</a>
	</body>
</html>

注意:<a>比较重要的属性有两个，分别是href、target；href指定超链接地址；target指定打开方式；_blank  新页面打开；

g) html图像<img>

<html>
	<head>
		<meta charset = "utf - 8">
		<title>标题测试</title>
	</head>
	<body>
		<img src = "图片的相对路径"/>
	</body>
</html>

h) html表格<table>

<html>
	<head>
		<meta charset="utf-8"/>
		<title>员工表</title>
	</head>
	<body>
		<div class="emp_contaner">  
		    <h3>员工信息表</h3>
			<table id="tab">
				<tr>
				    <th>全选<input type="checkbox" id="allcheckbox" οnclick="allCheckboxOne()"/></th>
					<th>员工编号</th>
					<th>员工名称</th>
					<th>员工部门</th>
					<th colspan="2">操作</th>
				</tr>
				<tr>
				    <td><input type="checkbox" name="checkbox" οnclick="selectSingle();"/></td>
					<td>1001</td>
					<td>张三</td>
					<td>财务部</td>
					<td><a href="#">删除</a></td>
					<td><a href="#">修改</a></td>
				</tr>

				<tr>
					<td><input type="checkbox" name="checkbox" οnclick="selectSingle();"/></td>
					<td>1002</td>
					<td>李四</td>
					<td>人事部</td>
					<td><a href="#">删除</a></td>
					<td><a href="#">修改</a></td>
				</tr>

				<tr>
					<td><input type="checkbox" name="checkbox" οnclick="selectSingle();"/></td>
					<td>1003</td>
					<td>王二</td>
					<td>人事部</td>
					<td><a href="#">删除</a></td>
					<td><a href="#">修改</a></td>
				</tr>
			</table>
		</div>
	</body>
</html>
 注意：*colspan =”2” 横跨两列 ， rowspan =”2” 横跨两行； *cellpadding 单元格边距（字与内边框的距离） cellspacing 单元格间距（内外边框的间距）;

i) html列表<ul><ol>

<html>
	<head>
		<meta charset = "utf - 8">
		<title>标题测试</title>
	</head>
	<body>
		<h1 id = "h_list">列表演示</h1>
			<hr>无序列表</hr>
			<ul id = "list">
				<li><a href = "department_全选框.html" target = "iframe">全选框</a></li><br/>
				<li><a href = "Customer.html" target = "iframe">客户注册</a></li><br/>
				<li><a href = "marray.htm" target = "iframe">婚礼承办</a></li><br/>
				<li><a href = "floatImage.htm" target = "iframe">浮动布局</a></li><br/>
				<li><a href = "TestJavaScript.htm" target = "iframe">练习Javascript</a></li><br/>
			</ul>
			<hr>有序列表</hr>
			<ol>
				<li><a href = "department_全选框.html" target = "iframe">全选框</a></li><br/>
				<li><a href = "Customer.html" target = "iframe">客户注册</a></li><br/>
				<li><a href = "marray.htm" target = "iframe">婚礼承办</a></li><br/>
				<li><a href = "floatImage.htm" target = "iframe">浮动布局</a></li><br/>
				<li><a href = "TestJavaScript.htm" target = "iframe">练习Javascript</a></li><br/>
			</ol>
	</body>
</html>

浏览器显示:


j) html表单<form>

<form>中的属性：

action：后面加url  指定当提交表单时向何处发送表单数据

method：get/post两个值，get为明文  post为加密

name：指定表单的名称

target：_blanket  _self  _parent  _top 指定网页打开方式

<from>标签中较为常用的标签有<input>  <select>  <label>  <button>

<fieldset> 标签可以将表单内的相关元素分组。 会在相关表单元素周围绘制边框。

name  规定fieldset的名称

form  值：form_id   规定fieldset所属的表单

<legend>  定义了 <fieldset> 元素的标题。

<input>中最为常用的几个属性:

form  后面跟所属form的id。规定所属的form

required    值：required    规定必需在提交表单之前填写输入字段。

disabled   值： disabled   disabled 属性规定应该禁用的 <input> 元素。

type:决定输入类型

text  文本域

radio  单选按钮

checkbox  复选框

submit  提交按钮

password  密码输入

reset  重置

color  设置拾色器   html5

number  定义用于输入数字的字段（您可以设置可接受数字的限制）

range  定义用于精确值不重要的输入数字的控件（比如 slider 控件）。您也可以设置可接受数字的限制

name:input元素的名称

value：input元素的值

size：输入字段的宽度

pattern  规定用于验证 <input> 元素的值的正则表达式。pattern 属性适用于下面的 input 类型：text、search、url、tel、email 和 password

list  值为datalist的id   该属性引用 <datalist> 元素，其中包含 <input> 元素的预定义选项。

autofocus  该属性是一个 boolean 属性，让页面载入后，input自动获得焦点

<datalist>  html5中的新特性  标签规定了 <input> 元素可能的选项列表。<datalist> 标签被用来在为 <input> 元素提供"自动完成"的特性。

　用户能看到一个下拉列表，里边的选项是预先定义好的，将作为用户的输入数据。与<option>标签配合使用

<button>  定义一个点击按钮

form   所属的form表单

name  button名称

type

button  该按钮是可点击的按钮

reset  该按钮是重置按钮

submit  该按钮是提交按钮

<label>标签为 input 元素定义标注（标记）

label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。

　　　就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上

for  值为某个元素的id   规定 label 与哪个表单元素绑定。

form  form_id  

<textarea>  

name  规定textarea的名称

form    form_id  规定从属的表单

cols　规定可见列数

rows   规定可见行数

<select>使用<option>标签定义下拉列表的可用选项.常见的属性：

name：指定select名称

multiple：规定可选择多个选项

<optgroup>  用于把相关的选项组合在一起。

label  为选项组规定描述。

<option> 常见的属性：

value：指定送往服务器的选项值

selected：只有一个值--selected   默认选项

<keygen>  定义了表单的密钥对生成器字段

form  所属的表单名称

name  名称

keytype  使用的加密算法

rsa   默认的算法

dsa

es

<html>
	<head>
		<title>客户信息表</title>
		<style>
			table,td{
				margin-top:50px;
				border-collapse:collapse;
				margin-left : auto;
				margin-right : auto;
			}
			#tr1,#tr3,#tr5,#tr7,#tr9,#tr11,#tr13{
				background-color:#F0F8FF;
			}
			div{
				margin-left:50px;
			}
			a{
				color:red;
			}
		</style>
	</head>
	<body>
		<form action = "http://www.baidu.com" method = "post">
			<table border = "1" >
				<tr id = "tr1">
					<td align = "right" width = "300" >客户类型:</td>
					<td align = "left" width = "800"><select id = "s1" value = ""/>
							<option>大客户</option>
							<option>小客户</option>
					</td>
				</tr id = "tr2">
				<tr>
					<td align = "right"><a>*</a>姓 名:</td>
					<td align = "left"><input type = "text" value = "" id = "n1"/>
					</td>
				</tr>
				<tr id = "tr3">
					<td align = "right">性 别:</td>
					<td align = "left"><select id = "sex" value = ""/>
							<option>男</option>
							<option>女</option>
					</td>
				</tr>
				<tr id = "tr4">
					<td align = "right">出生年月:</td>
					<td align = "left"><input type = "text" value = "" id = "d"/></td>
				</tr>
				<tr id = "tr5">
					<td align = "right">所属公司:</td>
					<td align = "left"><input type = "text" value = "" id = "c"/></td>
				</tr>
				<tr id = "tr6">
					<td align = "right">职务:</td>
					<td align = "left"><input type = "text" value = "" id = "j"/></td>
				</tr>
				<tr id = "tr7">
					<td align = "right">电话:</td>
					<td align = "left"><input type = "text" value = "" id = "T"/></td>
				</tr>
				<tr id = "tr8">
					<td align = "right">地址:</td>
					<td align = "left"><input type = "text" value = "" id = "a"/></td>
				</tr>
				<tr id = "tr9">
					<td align = "right"><a>*</a>邮箱:</td>
					<td align = "left"><input type = "text" value = "" id = "m"/></td>
				</tr>
				<tr id = "tr10">
					<td align = "right">业务往来情况:</td>
					<td align = "left"><input type = "textarea" value = "" id = "s"/></td>
				</tr>
				<tr id = "tr11">
					<td align = "right">客户照片:</td>
					<td><input type = "file" value = "浏览...." id = "b"/></td>
				</tr>
				<tr id = "tr12">
					<td align = "right">事件提醒:</td>
					<td align = "left"><input type = "text" value = "" id = "t"/></td>
				</tr>
				<tr id = "tr13">
					<td align = "right"></td>
					<td align = "left"><input type = "submit" value = "提交" id = "sub"/><input type = "reset" value = "重置" id = "r"/></td>
				</tr>
			</table><br/>
			<div>注意:名称前面有<a>*</a>的为必填项</div>
		</form>
	</body>
</html>
浏览器显示:


豆豆_Q
关注
  • 11
    点赞
  • 踩
  • 38
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML基础知识点汇总
12-04
HTML基本标签汇总讲义。虽然只有短短几页但基本包含了html所有标签。对初学者是必不可少的资料。
HTML基础知识总结
ss810540895的博客
05-05 8561
是告诉浏览器这是html文档的开始。Html文档的最后一个标签是之间的文本是头部信息，在之间的文本是文档标题，会显示在浏览器的窗口的标题栏。设置网页编码的语句为，是在
html最全知识点（超级详细）
2301_79099287的博客
05-23 858
一列格式自定义的列表（几乎不用）十一、 HTML中的特殊字符（记忆）有时候需要在页面中显示空格、等特殊字符这份清华大牛整理的进大厂必备的redis视频、面试题和技术文档祝大家早日进入大厂，拿到满意的薪资和职级~~~加油！！！div和span是没有语义的标签，一般用于页面布局使用（项目中会经常使用到）这份清华大牛整理的进大厂必备的redis视频、面试题和技术文档祝大家早日进入大厂，拿到满意的薪资和职级~~~加油！！！
HTML基础知识
xuan971130的博客
03-02 2882
一、基础知识： 1.网站：许多网页的集合。 2.HTML：超文本标记语言（Hyper Text Markup Language），用来描述网页的一种语言。不是一种变编程语言，而是一种标记语言。 3.浏览器内核（渲染引擎）：负责读取网页内容，整理讯息、计算网页的显示方式并显示页面。 4.Web标准的组成 ...
Web前端学习：HTML基础【入门宝典】
Oh_Python的博客
03-11 7061
一、HTML简介 什么是HTML？ HTML(HyperText Markup Language) 超文本标记语言，是一种用于创建网页的标准标记语言。 1、HTML的特点 （1）HTML不是编程语言，而是标记语言。 （2）HTML使用标签的形式来标识网页的不同组成部分 （3）HTML文档包含了HTML标签和文本 （4）HTML文档又叫做Web页面 （5）HTML文档的后缀：html 或 htm 2、HTML元素语法 （1）HTML 元素以开始标签起始 （2）HTML 元素以结束标签终止
html基础知识总结-第一天
08-18
HTML 基础知识总结的第一天，主要涵盖 HTML 基础语法、标签的分类、网页组成、标签的关系、注释、标题标签、段落标签、换行和水平线、文本格式化标签、图像标签、路径、超链接标签、音频和视频等知识点。 HTML 基础...
HTML5 语法知识总结 思维导图
10-22
内容概要： 本资源是我自己在学习HTML5的过程中，...思维导图也是对重点知识的一个整理与总结，方便复习 这是我写过的最大同时也是最详细的思维导图，就免费分享给你们啦 谢谢你们一直以来的关注与支持 真的非常感谢
html常用知识点总结
01-15
html常用知识点总结,参考网上学习教程总结的知识点
html知识点
07-26
HTML（HyperText Markup Language）是构建网页的基础语言，它与CSS（Cascading Style Sheets）一起，构成了网页设计的核心技术。HTML负责结构，CSS则负责样式。以下是对这两个关键技术的详细解析。 一、HTML知识点 ...
鱼缸表盘系统小程序-html
最新发布
06-15
总结，鱼缸表盘系统小程序的HTML开发涉及到内容丰富，不仅需要扎实的HTML基础知识，还要掌握现代Web开发的技巧，如响应式设计、数据可视化、用户交互和无障碍访问等。通过精心设计和编码，我们可以构建出既美观又...
HTML基础知识点
qq_40046544的博客
07-27 8537
网页是一个包含HTML标签的纯文本文件，它可以存放在世界某个角落的某一台计算机中，是万维网中的一页，是超文本标记语言格式。它通常是由图片、文字、链接、声音、视频等元素组成。通过网页浏览器访问。HTML指的是超文本标记语言（HyperTextMarkupLanguage），它是用来描述网页的一种语言。web标准也成为网页标准，它是由一系列标准组成，这些标准大部分由W3C负责定制，也有一些标准由其他标准组织制定。绝对路径指目录下的绝对位置，可以直接到达目标位置，通常从盘符开始的路径。例如D从。...
Html基础知识点整理
m0_53157173的博客
06-15 1906
Html基础知识点整理基本标签字体标签格式化标签1. < br/ >2. < p > < /p >3. < h1 > < /h1 >4. & nbspHtml的注释图片标签1. < img/ >列表标签1. < ul > < /ul >2. < li > < /li >3. < ol > < /ol >超链接标签< a > < /a &
HTML基础知识点总结
cx0112的博客
03-16 1987
HTML 全称为 HyperText Mark-up Language，翻译为超文本标签语言，标签也称作标记或者元 素。HTML 是目前网络上应用最为广泛的技术之一，也是构成网页文档的主要基石之一。HTML 文本可以说明文字、图形、动画、声音、表格、链接等。
HTML常用基础内容总结
moteandsunlight的博客
02-26 3479
Web前端: 顾名思义是来做Web的前端的。我们这里所说的前端泛指Web前端，也就是在Web应用中用户可以看得见碰得着的东西。包括Web页面的结构、Web的外观视觉表现以及Web层面的交互实现。Web后端：后端更多的是与数据库进行交互以处理相应的业务逻辑。需要考虑的是如何实现功能、数据的存取、平台的稳定性与性能等。HTML，即Hyper Text MarkupLanguage，是一种超文本标记语言。顾名思义，这种语言可以表示很多形式的信息，不仅限于文本。
HTML重点知识点
weixin_44450506的博客
12-09 2094
一、基本快捷键 ctrl+c 复制 ctrl+v 粘贴 ctrl+x 剪切 ctrl+tab 切换（具体切换什么，要看是什么软件） alt+F4 关闭程序 F2 重命名 F5 刷新，比如看网页的时候，想刷新网页，按f5 ctrl+z 撤销，就是这一步弄错了，就ctrl+z撤销回到改之前状态 window...
学习HTML的知识点总结
Zrf2191318455的博客
11-01 2761
学习html一段时间，在视频中结合自己设备和理解写出了关于html的一些知识点
HTML基础知识 详细笔记
qq_41102578的博客
03-07 553
HTML基础知识
HTML超详细基础知识总结
全粘小谭的博客
09-25 3780
第一次写博客，这次打算把暑期复习的一些前端知识点（干货满满哦）发出来，主要是一些基础的东西，有时候在做一些小项目时，会发现网页写的很难受，主要原因就是基础不牢靠，所以复习的时候还是花了很多心思的，当基础学扎实了，无论多漂亮的网页都能自己写出来了，这种感觉还是挺爽的🤣

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值