HTML基础入门

最新推荐文章于 2024-07-14 10:34:53 发布

BKolo

最新推荐文章于 2024-07-14 10:34:53 发布

阅读量447

点赞数

文章标签： html 前端

本文链接：https://blog.csdn.net/BKolo/article/details/122389890

版权

一、什么是HTML?

HTML是一门语言，所有的网页都是用HTML语言编写的。
HTML超文本标记语言。
- 超文本：超越了文本的限制，除文字信息，还可以定义图片、音频、视频等内容。
- 标记语言：由标签构成的语言。
HTML运行在浏览器上，HTML标签由浏览器来解析。
HTML标签都是预定义好的。
W3C标准：网页主要由三部分组成。
- 结构：HTML
- 表现：CSS
- 行为：JavaScript

二、HTML快速入门

新建文本文件，后缀名改为.html。
编写HTML结构标签。
在中定义文字。

<html>
	<head>
		<title></title>
	</head>
	<body>
	</body>
</html>

注意：

HTML文件以.htm或.html为扩展名。
HTML结构标签。
签描述
<HTML> 定义HTML文档
<head> 定义关于文档的信息
<title> 定义文档等标题
<body> 定义文档的主体
HTML标签不区分大小写。
HTML标签属性值单双引皆可。
HTML语法松散。

签	描述
<HTML>	定义HTML文档
<head>	定义关于文档的信息
<title>	定义文档等标题
<body>	定义文档的主体

三、标签

1、基础标签

标签	描述
<h1> - <h6>	定义标题，h1最大，h6最小
<font>	定义关于文本的字体、字体尺寸、字体颜色
<b>	定义粗体文本
<i>	定义斜体文本
<u>	定义文本下划线
<center>	定义文本居中
<p>	定义段落
<br>	定义换行
<hr>	定义水平线

<font face="楷体" size="5" color="#ffcc00">你好</font>
<!-- 
	html5表示颜色：
		1.英文单词：red，pink。。。
		2.rgb(值1，值2，值3)，0-255
		3.#值1值2值3，00-ff
 -->

注意：

<!-- html5标识 --> 
<!DOCTYPE html>
<!-- 页面的字符集 --> 
<meta charset="UTF-8">

下面是特殊的转义字符

HTML源代码	显示结果	描述
&lt；	<	小于号或显示标记
&gt；	>	大于号或显示标记
&amp；	&	可用于显示其他特殊字符
&quot；	"	引号
&reg；	®	已注册
&copy；	©	版权
&trade；	™	商标
&nbsp；		不断行的空白

2、图片、音频、视频标签

标签	描述
<img>	定义图片
<audio>	定义音频
<video>	定义视频

img：定义图片
- src：规定显示图像的URL（统一资源定位符）
- height：定义图像的高度
- width：定义图像的宽度
audio：定义音频。支持的音频格式：MP3、WAV、OGG
- src：规定音频的URL
- controls：显示播放控件
video：定义视频。支持的视频格式：MP4、WebM、OGG
- src：规定视频的URL
- controls：显示播放控件
尺寸单位：px 和 %

3、超链接标签

标签	描述
<a>	定义超链接，用于连接另一个资源

href：指定访问资源的URL。
target：指定打开资源的方式
- _self：默认值，在当前页面打开
- _blank：在空白页打开

4、列表标签

有序列表（order list）
无序列表（unorder list）

标签	描述
<ol>	定义有序列表
<ul>	定义无序列表
<li>	定义列表项

type属性：设置列表项的标识符号。不建议使用，用css样式取代。

5、表格标签

标签	描述
<table>	定义表格
<tr>	定义行
<td>	定义单元格
<th>	定义表头单元格

table：定义表格
- border：规定表格边框的宽度
- width：规定表格的宽度
- cellspacing：规定单元格之间的空白
tr：定义行
- align：定义表格行的内容对齐方式
td：定义单元格
- rowspan：规定单元格可横跨的行数
- colspan：规定单元格可横跨的列数

6、布局标签

标签	描述
<div>	定义HTML文档中的一个区域部分，经常与CSS一起使用，用来布局网页
<span>	用于组合行内元素

7、表单标签

表单：在网页中主要负责数据采集功能，使用<form>标签定义表单。
表单项（元素）：不同类型的input元素、下拉列表、文本域等。

标签	描述
<form>	定义表单
<input>	定义表单项，通过type属性控制输入形式
<label>	为表单项定义标注
<select>	定义下拉列表
<option>	定义下拉列表的列表项
<textarea>	定义文本域

form：定义表单
- action：规定当提交表单时向何处发送表单数据，URL。
- method：规定用于发送表单数据的方式
  - get（默认值）：浏览器会将数据直接附在表单的action URL之后。数据大小有限制。
  - post：浏览器会将数据放到http请求消息体中。数据大小无限制。

8、表单项标签

<input>：表单项，通过type属性控制输入形式。
<selec>：定义下拉列表，<option>定义列表项。
<textarea>：文本域。

type取值	描述
text	默认值。定义单行的输入字段
password	定义密码字段
radio	定义单选按钮
checkbox	定义复选框
file	定义文件上传按钮
hidden	定义隐藏的输入字段
submit	定义提交按钮，提交按钮会把表单数据发送到服务器
reset	定义重置按钮，重置按钮会清楚表单中的所有数据
button	定义可点击按钮

<body>
<form action="#" method="post">
	<!-- 用label的for和input的id使两个框组合在一起 --> 
	<label for="username">用户名：</label>
	<input type="text" name="username" id="username"><br>
	<label for="password">密码：</label>
	<input type="password" name="password" id="password"><br>
	
	<!-- 要使多个单选框达到互斥的效果，只需要单选框的name相同即可 --> 
	<!-- value的作用是表单提交时提交的值，否则都提交的是“on” --> 
	<!-- 也可以像上面的用户名、密码一样通过label增大点击区域，提高用户体验 --> 
	<input type="radio" name="gender" value="1"> 男
	<input type="radio" name="gender" value="2"> 女
	<br>
	<input type="submit" value="注册">
</form>
</body>

BKolo

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML基础入门

HTML是一门语言，所有的网页都是用HTML语言编写的。HTML超文本标记语言。超文本：超越了文本的限制，除文字信息，还可以定义图片、音频、视频等内容。标记语言：由标签构成的语言。HTML运行在浏览器上，HTML标签由浏览器来解析。HTML标签都是预定义好的。W3C标准：网页主要由三部分组成。结构：HTML表现：CSS行为：JavaScript
复制链接

扫一扫