HTML基础入门

最新推荐文章于 2022-04-12 07:40:27 发布

JimmyYanDev

最新推荐文章于 2022-04-12 07:40:27 发布

阅读量321

点赞数

分类专栏：学习笔记 Web HTML JavaEE 文章标签： HTML 基础入门

本文链接：https://blog.csdn.net/Miracle_Yan/article/details/85009167

版权

学习笔记同时被 3 个专栏收录

6 篇文章 0 订阅

订阅专栏

Web

6 篇文章 0 订阅

订阅专栏

JavaEE

6 篇文章 0 订阅

订阅专栏

一，简介

HTML 是英文 Hyper Text Markup Language 的简写，即超文本标记语言的意思。HTML 不是一种编程语言，而是一种标记语言。HTML 定义了一系列的标记标签，我们可以通过这些标签来描述一个网页的具体结构。HTML 文档，也叫做 web 页面，我们使用 .html 作为 HTML 文档的后缀名。

W3CSchool HTML 教程：https://www.w3cschool.cn/html/html-intro.html
W3CSchool HTML 在线调试网址： https://www.w3cschool.cn/tryrun/showhtml/tryhtml_intro

二，HTML 标签

HTML 标记标签通常被称为 HTML 标签或者 HTML 元素。
HTML 标签语法：

HTML 标签是由尖括号包围的关键词，比如 <html>
HTML 标签通常是成对出现的，比如 <html>和 </html>
标签中第一个标签是开始标签，第二个标签是结束标签
开始标签和结束标签又被称作为开放标签和闭合闭合标签
开始标签和结束标签中间存放的是标签内容，比如<h1>这是一个标题</h1>

三，HTML 文档注释

HTML 文档注释语法：
将我们要注释的内容，使用包裹起来即可，比如

<!-- 这是一条注释 -->

四，HTML 文件的结构

一个标准的基础的 HTML 文件的结构如下，

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

通常有以下这个部分构成：

<!DOCTYPE>文档声明，声明了文档的类型，这里声明了它是一个 HTML5 文档
<html>标签是 HTML 页面的根元素
<head>标签定义了 HTML 页面的头部信息，包含了 HTML 网页的标题信息和一写配置信息
<title>标签定义了 HTML 页面的标题
<meta>标签定义了 HTML 页面的元素据，这里定义了浏览器打开 HTML 文档的编码方式
<body>标签定义了 HTML 页面的主体部分，包含了 HTML 所显示的页面信息

五，常用标签

1，HTML 标题

1）用法

标题是通过<h1> - <h6> 标签进行定义的，<h1>定义最大的标题。<h6> 定义最小的标题。

2）代码示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Demo</title>
	</head>
	<body>
		<h1>标题一</h1>
		<h2>标题二</h2>
		<h3>标题三</h3>
		<h4>标题四</h4>
		<h5>标题五</h5>
		<h6>标题六</h6>
		<h7>标题七</h7>
		<h8>标题八</h8>
	</body>
</html>

3）显示效果

HTML 标题

说明：本文所有标签都是定义在<body>标签体内，在下面的代码示例中将省略其他部分内容，只保留标签部分内容

2，HTML 段落

1）用法

段落使用一对<p></p>标签来定义

2）代码示例

<p>段落一</p>
<p>段落二</p>
<p>段落三</p>

3）显示效果

HTML 段落

3，HTML 文本格式化

1）用法

粗体（“bold”）使用一对<b></b>标签来定义
斜体（“italic”）使用一堆<i></i>标签来定义
注意：
通常标签 <strong>替换加粗标签<b> 来使用，<em> 替换 <i>标签使用。
然而，这些标签的含义是不同的：
<b> 与<i> 定义粗体或斜体文本。
<strong>或者 <em> 是带有语义的，意味着你要呈现的文本是重要的，所以要突出显示。

2）代码示例

<b>加粗的字体</b>
<i>倾斜的字体</i>
<strong>加粗的字体</strong>
<em>倾斜的字体</em>

3）显示效果

HTML 文本格式化

4，HTML 链接

1）用法

链接使用一对<a></a>标签来定义
常用属性：

href：设置所要跳转的链接，使用属性值 # 可以定义一个空链接
target：设置链接的跳转方式，可选属性值：_self 在当前窗口打开，默认值；_blank 在新的窗口打开

2）代码示例

<!-- 空链接，不会跳转 -->
<a href="#">空链接</a>
<!-- 跳转到外部链接需要使用HTTP协议，否则将跳转失败 -->
<a href="www.baidu.com">在当前窗口打开百度(www.baidu.com)</a>
<!-- 链接的跳转方式：默认在当前页面打开 -->
<a href="http://www.baidu.com">在当前窗口打开百度(http://www.baidu.com)</a>
<a href="http://www.baidu.com" target="_self">在当前窗口打开百度(http://www.baidu.com)</a>
<a href="http://www.baidu.com" target="_blank">在新的窗口打开百度(http://www.baidu.com)</a>

3）显示效果

HTML 链接

5，HTML 图像

1）用法

图像使用<img>标签定义
常用属性：

src：设置所要显示图像的源文件存放地址
alt：设置图片加载失败时的提示
width：设置图片的宽度
height：设置图片的高度

2）代码示例

<!-- 简单使用，只需要设置图片的地址即可 -->
<img src="https://tse1-mm.cn.bing.net/th?id=OET.5d076c700eb7426a93c5d447501e33a8&w=135&h=135&c=7&rs=1&o=5&pid=1.9">
<!-- 设置图片加载失败时的提示-->
<img src="http://www.unkown.com/123.jpg" alt="图片加载失败">
<!-- 设置图片的宽度和高度，分别使用百分比和具体的像素值两种方式 -->
<img width="20%" height="300px" src="https://tse1-mm.cn.bing.net/th?id=OET.5d076c700eb7426a93c5d447501e33a8&w=135&h=135&c=7&rs=1&o=5&pid=1.9">

3）显示效果

HTML 图像

6，HTML 列表

1）用法

有序列表使用一对<ol></ol>标签来定义
常用属性：

type：规定列表的项目符号的类型，可选属性值：1、A、a、I和i，1是默认值
start：规定有序列表的起始值

无序序列表使用一对<ul></ul>标签来定义
常用属性：

type：规定列表的项目符号的类型，可选属性值：disc，实心小圆点，默认值；square，实心方块；circle，空心圆。

列表项使用一对<li></li>标签来定义

2）代码示例

<h3>有序列表</h3>
<ol type="I" start="2">
	<li>列表项</li>
	<li>列表项</li>
	<li>列表项</li>
	<li>列表项</li>
</ol>
<h3>无序列表</h3>
<ul type="square">
	<li>列表项</li>
	<li>列表项</li>
	<li>列表项</li>
	<li>列表项</li>
</ul>

3）显示效果

HTML 列表

7，HTML 空元素

1）用法

HTML 空元素即为没有内容的 HTML 元素。
HTML 空元素应该在开始标签中关闭。
HTML 的一个空元素为 <br>（用于定义换行），<br> 元素就是没有关闭标签。
HTML 空元素的关闭方法是在开始标签中添加斜杠，比如 <br />，HTML、XHTML 和 XML 都接受这种方式。
注意：在 XHTML、XML 以及未来版本的 HTML 中，所有元素都必须被关闭，即使是空元素。

2）代码示例

<!-- 换行符 -->
123<br/>456
<!-- 水平线 -->
<hr/>

3）显示效果

HTML 空元素

8，HTML 表单

1）用法

表单使用一对 <form></form>标签来定义，表单是一个包含表单元素的区域
表单元素是允许用户在表单中输入内容，比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等

2）代码示例

<!-- action设置提交的地址，method设置提交的方式：get、post -->
<form action="#" method="get">
	姓名：
	<!-- 输入框，type设置表单元素类型，name设置表单元素名称将作为提交表单时参数的key，placeholder设置提示内容 -->
	<input type="text" name="name" placeholder="请输入您的名字">
	<br/>
	性别：
	<!-- 单选按钮 -->
	<input type="radio" name="sex">男
	<input type="radio" name="sex">女
	<br/>
	省份：
	<!-- 下拉选择框 -->
	<select>
		<option>请选择</option>
		<option>北京</option>
		<option>上海</option>
		<option>杭州</option>
	</select>
	<br/>
	头像：
	<!-- 文件选择 -->
	<input type="file" name="avatar">
	<br/>
	生日：
	<!-- 日期选择 -->
	<input type="date" name="birthday">
	<br/>
	密码：
	<!-- 密码框 -->
	<input type="password" name="password">
	<br/>
	兴趣爱好：
	<!-- 复选框 -->
	<input type="checkbox" name="hobbies">篮球
	<input type="checkbox" name="hobbies">足球
	<input type="checkbox" name="hobbies">排球
	<br/>
	备注：
	<!-- 文本域，rows设置行数，cols设置列数 -->
	<textarea rows="3" cols="20" name="remarks"></textarea>
	<br/>
	<!-- 提交表单数据按钮，val设置按钮显示的名称 -->
	<input type="submit" val="提交">
	<!-- 重置表单数据按钮 -->
	<input type="reset" val="重置">
	<br/>
</form>

3）显示效果

HTML 表单

9，HTML 表格

1）用法

表格使用一对<table></table>标签定义
表格的行使用一对<tr></tr>标签来定义
表格的列使用一对<td></td>标签来定义
常用属性

border：设置表格的边框大小
width：设置表格的宽度
height：设置表格的高度
colspan：和并列
rowspan：合并行

2）代码示例

<!-- 定义一个三行三列的表格 -->
<!-- 合并列11和列12，合并行21和行31 -->
<table border="1px" width="300px" height="300px">
	<tr>
		<td colspan="2">11</td>
		<td>13</td>
	</tr>
	<tr>
		<td rowspan="2">21</td>
		<td>22</td>
		<td>23</td>
	</tr>
	<tr>
		<td>32</td>
		<td>33</td>
	</tr>
</table>

3）显示效果

HTML 表格

9，HTML 字体

1）用法

字体使用一对<font></font>标签来定义
常用属性：

size：设置字体大小，取值范围1~7
color：设置字体颜色
face：设置所采用的字体

2）代码示例

<font size="7" color="red" face="黑体">1234ABcd</font>

3）显示效果

HTML 字体

JimmyYanDev

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录