学习笔记——day26(html)_html基础模板-优快云博客

本文链接：https://blog.youkuaiyun.com/Katherine_c/article/details/99335978

本文详细介绍了HTML的基本概念，包括HTML的定义、基础模板、元素语法、常用标签及其属性，以及如何创建标题、段落、列表、表格和表单等内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一 .什么是HTML

简单的说，就是平时我们所看到的网页。
HTML就是万维网中的超文本，也叫做超文本标记语言。”超文本”就是表示页面内可以包含非文字元素，如：图片、链接、音乐等等。在Web服务中，信息一般是使用HTML格式以超文本和超媒体方式传送的，所使用的
Internet协议是HTTP协议。

二.HTML基础模板

<!DOCTYPE html >

<!DOCTYPE html><!--必须写在HTML文件首行-->

< html> </html >

<html><!--HTML文档的开始-->
</html><!--HTML文档的结束-->

< head> </head >

构成HTML文档的开头部分。

< title> </title>

< meta> </meta >

< body> </body >

二.html元素

HTML元素指的是从开始标签（starttag）到结束标签（endtag）的所有代码。

1.html语法

HTML元素以开始标签起始
HTML元素以结束标签终止
元素的内容是开始标签与结束标签之间的内容
某些HTML元素具有空内容（emptycontent）
空元素在开始标签中进行关闭（以开始标签的结束而结束）大多数HTML元素可拥有属性

2.嵌套的HTML元素

大多数HTML元素可以嵌套（可以包含其他HTML元素）。

3.HTML实例解释

<p>元素

定义一个段落

<p>Thisismyfirstparagraph.</p>

<body>元素

定义文档的主题

<body>
<p>Thisismyfirstparagraph.</p>
</body>

<html>元素

定义整个html文档

<html>
<body>
<p>Thisismyfirstparagraph.</p>
</body>
</html>

HTML提示：使用小写标签

三.html常用标签和属性

HTML页面是由标签组成，不同的标签浏览器对其进行不同样式和内容的渲染，我们需要记忆常用的标签即
可。大致可分为如下几类：头标签、标题、水平线、段落、换行、图片、表格、超链接、列表、表单、下拉列表、div和span、格式化文字的。

HTML标签可以拥有属性

属性提供了有关HTML元素的更多的信息。
属性总是以名称/值对的形式出现，比如：name=“value”。
属性总是在HTML元素的开始标签中规定。
属性分为公共的和私有的。也就是公共属性是所有标签都有的，私有的是部分标签特有的

1、HTML标题

<body>
<!--HTML标题（Heading）是通过<h1>-<h6>等标签进行定义的-->  
<h1>Thisisaheading</h1>
  <h2>Thisisaheading</h2>
  <h3>Thisisaheading</h3>
  <h4>Thisisaheading</h4>
  <h5>Thisisaheading</h5>
  <h6>Thisisaheading</h6>
</body>

2、HTML段落

<body>
 <!--HTML段落是通过<p>标签进行定义的-->  <p>Thisisaparagraph.</p>
  <p>Thisisanotherparagraph.</p>
</body>

3、HTML水平线

<hr/>

4、HTML注释

<!--Thisisacomment-->

5、HTML换行

<br/>

6、HTML链接

  <body>
<!--HTML链接是通过<a>标签进行定义的-->
  <ahref="http://www.baidu.com">Thisisalink</a>
  </body>

7、HTML图像

<body>
 <!--HTML图像是通过<img/>标签进行定义的-->  <imgsrc="img/1.jpg"title="这是一个图片"/>
 </body>

8、HTML格式化(了解)

文本格式化标签

标签	描述
<b >	定义粗体文本
<big >	定义大号字
<em >	定义着重文字
<i >	定义斜体字
<small>	定义小号字
<strong >	定义加重语气
<sub >	定义下标字
<sup>	定义上标字
<ins >	定义插入字
<del>	定义删除字

9、原样输出pre

格式化标签，pre标签中的内容，基本可以以原样展示，比如写了两行文字，不添加br标签就可以。

<pre> 锄禾日当午，汗滴禾下土。 谁知盘中餐，粒粒皆辛苦。 </pre>

10、div和span

<div> 是一个块级元素，通常与css配合使用，用于布局。

<div> 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其
关联。
<div> 是一个块级元素。这意味着它的内容自动地开始一个新行。实际上，换行是 <div> 固有的唯一格式
表现。可以通过 <div> 的 class 或 id 应用额外的样式。

<!DOCTYPE html>
 <html>
    <head>    
<meta charset="UTF-8">     
 <title>HTML_div_span</title>    
 </head> 
<body>    
  <!-- 构建一个div 设置边框黑色1px 宽度200px高度200px 字体居中 -->     
 <div style="border: 1px solid black;width: 200px;height: 200px;text-align: center;">这是一个div</div>          
 <!-- 构建一个span 字体为红色 -->    
  <span style="color: red;">这是一个span</span>   
  </body> 
 </html>

标签的分类
HTML中标签元素三种不同类型：块状元素，行内元素，行内块状元素。
块级元素特点：元素都从新的一行开始，并且其后的元素也另起一行；元素的高度、宽度、行高以及顶和底
边距都可设置；元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一
个宽度。
行内元素特点：和其他元素都在一行上；元素的高度、宽度及顶部和底部边距不可设置；元素的宽度就是它
包含的文字或图片的宽度，不可改变。
行内块状元素的特点：和其他元素都在一行上；元素的高度、宽度、行高以及顶和底边距都可设置。可通过
浏览器查看是何种元素，后期也可以通过CSS进行修改。

11、HTML表格

表格基础内容
表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由
<td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图
片、列表、段落、表单、水平线、表格等等。
表格和边框属性
如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。
表格的表头

表格的表头使用 <th> 标签进行定义。
大多数浏览器会把表头显示为粗体居中的文本。
表格中的空单元格
在一些浏览器中，没有内容的表格单元显示得不太好。如果某个单元格是空的（没有内容），浏览器可
能无法显示出这个单元格的边框。
这个空的单元格的边框没有被显示出来。为了避免这种情况，在空单元格中添加一个空格占位符
&nbsp; ，就可以将边框显示出来。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>HTML表格</title>
	</head>
	<body>
		<!-- 表格标签 属性border="1" 添加表格边框粗细为1 -->
		<table border="1">
			<!-- 设置表格标题 -->
			<caption>
				<h3>这是一个表格</h3>
			</caption> <!-- 定义行 -->
			<tr>
				<!-- th定义列 一般写在表格首行 内容会被加粗居中 -->
				<th>Heading</th>
				<th>Another Heading</th>
			</tr>
			<tr>
				<!-- td定义列 -->
				<td>row 1, cell 1</td>
				<td>row 1, cell 2</td>
			</tr>
			<tr>
				<td> </td>
				<td>row 2, cell 2</td>
			</tr>
		</table>
	</body>
</html>

表格样式属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>table标签</title>
	</head>
	<body>
		<!--cellspacing:（单元格外边距）单元格之间的距离          cellpadding：（单元格内边距）单元格与文字之间的距离-->
		<table width="600px" height="400px" border="1px" cellspacing="0" cellpadding="10px" align="center">
			<tr align="center">
				<!--bgcolor:更改单元格的背景颜色-->
				<td bgcolor="aquamarine">1</td>
				<!--colspan：合并两列内容                -->
				<td colspan="2">2</td>
				<!--<td>3</td>-->
				<!--rowspan:将上下2行进行合并，                注意：这个时候取消下一行的表格，要不就会多一个表格出来-->
				<td rowspan="2">4</td>
			</tr>
			<!--行内元素，对其方式为靠右-->
			<tr align="right">
				<td>1</td>
				<td>2</td>
				<td>3</td>
				<!--<td>4</td>-->
			</tr>
		</table>
	</body>
</html>

12、HTML列表

无序列表

无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。
无序列表始于 <ul> 标签。每个列表项始于 <li> 。
列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>HTML列表</title>
	</head>
	<body>
		<h4>一个无序列表：</h4>
		<ul>
			<li>咖啡</li>
			<li>茶</li>
			<li>牛奶</li>
		</ul>
	</body>
</html>

有序列表

有序列表也是一列项目，列表项目使用数字进行标记。
有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。
列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>HTML列表</title>
	</head>
	<body>
		<h4>一个有序列表：</h4>
		<ol>
			<li>咖啡</li>
			<li>牛奶</li>
			<li>茶</li>
		</ol>
		<ol start="50">
			<li>咖啡</li>
			<li>牛奶</li>
			<li>茶</li>
		</ol>
	</body>
</html>

13、HTML表单

<form> 元素
HTML 表单用于收集用户输入。
表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等。
表单用于向服务器传输数据。form 元素是块级元素。

常用属性

属性	值	描述
action	URL	规定当提交表单时向何处发送表单数据
method	get、post	规定用于发送 form-data 的 HTTP 方法
name	Form_name	规定表单的名称

<input>元素


<input> 元素是最重要的表单元素。
<input> 元素有很多形态，根据不同的 type 属性。
常用属性

属性	值	描述
alt	text	定义图像输入的替代文本
disabled	disabled	当 input 元素加载时禁用此元素
readonly	readonly	规定输入字段为只读
maxlength	number	规定输入字段中的字符的最大长度
value	value	规定 input 元素的值
type	button checkbox file hidden image password radio reset submit text	规定 input 元素的类型按钮复选框文件隐藏域图像形按钮密码单选框重置按钮提交按钮文本

text 文本输入

<form>First name:<br> 
<input type="text" name="firstname" /> 
<br> Last name:<br> 
<input type="text" name="lastname" />
</form>

password 密码输入

<input type="password"> 定义密码字段

<form>
	用户名：<input type="text" name="username" /> <br /> 
	密&nbsp;&nbsp;&nbsp;
	码：<input type="password" name="password" />
</form>

radio 单选按钮输入

<input type="radio"> 定义单选按钮

<form>
<input type="radio" name="sex" value="male" checked />
Male <br>
 <input type="radio" name="sex" value="female" />
Female
 </form>

checkbox 复选框
`定义复选框
复选框允许用户在有限数量的选项中选择零个或多个选项。

<form>
<input type="checkbox" name="vehicle" value="Bike" />
I have a bike <br> 
<input type="checkbox" name="vehicle" value="Car" />
I have a car 
</form>

submit 提交按钮

<input type="submit"> 定义用于向表单处理程序（form-handler）提交表单的按钮。

表单处理程序通常是包含用来处理输入数据的脚本的服务器页面。表单处理程序在表单的 action 属性中指
定。
action 属性
action 属性定义在提交表单时执行的动作。
向服务器提交表单的通常做法是使用提交按钮。
通常，表单会被提交到 web 服务器上的网页。
如果省略 action 属性，则 action 会被设置为访问当前页面。

<form action="http://www.baidu.com"> First name: <input type="text" name="firstname" value="Mickey" /> <br /> Last
	name: <input type="text" name="lastname" value="Mouse" /> <br /><br /> <input type="submit" value="Submit" /> </form>

select 下拉列表
定义一个下拉列表。

<select name="cars"> 
<option value="sh">上海 </option>
 <option value="bj">北京 </option> 
 <option value="cs">长沙 </option> 
 <option value="zz">郑州 </option>
  </select>

textarea 文本域
该标签定义多行的文本输入控件。文本区中可容纳无限数量的文本，可以通过 cols 和 rows 属性来规定
textarea 的尺寸。cols规定文本区内的可见宽度。rows规定文本区内的可见行数。

<textarea name="message" rows="10" cols="30">
 The cat was playing in the garden. 
 </textarea>

button 按钮

<button> 元素定义可点击的按钮

常用属性

属性	值	描述
disabled	disabled	禁用该按钮
type	button、submit、reset	规定按钮的类型
value	text	规定按钮的初始值
name	button_name	规定按钮的名称

<button type="button">Click Me!</button>

label 标注标签

<label> 标签为input 元素定义标注（标记）。 label元素不会呈现任何的特殊效果。label标签的for属性应当与
相关元素的id属性相同。

<label for="username">
用户名：</label> 
<input type="text" id="username" name="username"/>