HMTL简介

最新推荐文章于 2024-08-07 23:57:11 发布

Joise.

最新推荐文章于 2024-08-07 23:57:11 发布

阅读量4.4k

点赞数 3

文章标签： html

本文链接：https://blog.csdn.net/joise_/article/details/114625883

版权

文章目录

一、HTML是什么？
二、实例解析
三、Web浏览器
四、HTML常用元素
总结

一、HTML是什么？

超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。

HTML 不是一种编程语言，而是一种标记语言
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
HTML 文档包含了HTML 标签及文本内容
HTML文档也叫做 web 页面

二、实例解析

1.HTML实例

代码如下（示例）：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>页面标题</title>
</head>
<body>
 
<h1>我的第一个标题</h1>
 
<p>我的第一个段落。</p>
 
</body>
</html>

2.HTML文档结构分析

<!DOCTYPE html>声明为 HTML5 文档
<html>元素是 HTML 页面的根元素
<head>元素包含了文档的元（meta）数据，如<meta charset="utf-8">定义网页编码格式为 utf-8。
<title>元素描述了文档的标题
<body>元素包含了可见的页面内容
<p>元素定义一个段落

3.HTML标签、元素

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

HTML 标签是由尖括号包围的关键词，比如 <html>
HTML 标签通常是成对出现的，比如 <b> 和 </b>
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签

一个HTML元素包含了开始标签与结束标签，元素是可以有相关属性的。

<!-- （HTML注释）HTML元素：-->
<标签  属性 >内容</标签>

三、Web浏览器

Web浏览器（如谷歌浏览器，Internet Explorer，Firefox，Safari）是用于读取HTML文件，并将其作为网页显示。
web页面显示：
在这里插入图片描述
HTML网页结构：
web浏览器中只显示白色框内容！

四、HTML常用元素

1.HTML标题

HTML 提供了从大到小6级标题，分别是：<h1> ~ <h6>
实例代码：

<h1>标题1</h1>             

<h2>标题2</h2>

<h3>标题3</h3>

<h4>标题4</h4>

<h5>标题5</h5>

<h6>标题6</h6>

在这里插入图片描述

2.文本格式化

一些常用于设置文本字的元素。
实例代码：

<b>定义粗体文本</b><br />

<i> 定义斜体文本 </i><br />

<del>定义删除文本</del><br />

<sup>定义上标字</sup><br />

<sub>定义下标字</sub><br />

在这里插入图片描述

3.定义超链接

定义超链接的格式：

<a href=“URL”></a>

a标签用来定义一条超链接，其中要有的是href属性，href的作用是指明超链接要链接到的网址。除了href属性，还有title属性表示链接的提示信息。target属性表示链接的打开方式，即当点击了链接，选择是在另一个页面打开还是本页面打开。其属性值包括_blank(新的空白页)、_self(当前页)，_top（当前页）。
实例代码：

<a href="https://www.baidu.com" target="_blank">百度一下</a>

在这里插入图片描述
锚点，也称为书签，用于标记页面的某个元素或位置。通过锚点，可以轻易的在长页面内实现跳转。

<a href="#位置名"> </a>
<a name="位置名"> </a>

4.列表

HTML中列表也是常用的元素。无序列表用<ul><li></li></ul>表示。
说明：
属性：type

属性值	列表前的符号
disc	实心原点
circle	符号为空心圆
square	符号为方形

实例代码：

 <ul type="disc">

         <li>苹果</li>

         <li>香蕉</li>

         <li>雪梨</li>

 </ul>

在这里插入图片描述

5.表单

当网站需要获取我们的一些信息如：用户名、密码、选择买什么、买多少、提出意见等等时，需要使用表单（form）来让用户填写或选择。

实例代码：

<form>
  <!-- 文本框，注意有 placeholder 提示符 -->
  用户名：<br>
  <input type="text" name="name" placeholder="请输入用户名"><br>
  <!-- 密码框 -->
  密码：<br>
  <input type="password" name="ps" placeholder="请输入密码"><br>
  年龄：<br>
  <!-- 数字输入框，注意 min 和 value 属性-->
  <input type="number" name="age" min="18" value="18"><br>
  <!-- 单选按钮, 注意 checked 属性 -->
  性别：<br>
  <input type="radio" name="gender" value="male" checked> 男<br>
  <input type="radio" name="gender" value="female"> 女<br>
  <input type="radio" name="gender" value="other"> 其它<br>
  <!-- 下拉列表，注意 selected 属性 -->
  党派：<br>
  <select name="party">
    <option value="D">民主党</option>
    <option value="R" selected>共和党</option>
    <option value="N">无党派</option>
  </select><br>
  <!-- 多选框 -->
  您有哪些交通工具：<br>
  <input type="checkbox" name="vehicle1" value="Bike"> 自行车<br>
  <input type="checkbox" name="vehicle2" value="Motocycle" checked> 摩托车<br>
  <input type="checkbox" name="vehicle3" value="Car"> 轿车<br>
  <input type="checkbox" name="vehicle4" value="Jet"> 飞机<br>
  <!-- 日期选择器 -->
  您的工作日期：<br>
  <input type="date"><br>
  <!-- 文件选择器 -->
  上传您的照片:<br>
  <input type="file" name="photo"><br>
  <!-- 文本输入区域，注意 rows 和 cols 属性 -->
  您的建议：<br>
  <textarea name="message" rows="5" cols="30">
    The cat was playing in the garden.
  </textarea><br><hr>
  <!-- 表单提交/重置按钮，将表单中的数据取消或传输给服务器端进行处理 -->
  <input type="submit" value="提 交">
  <input type="reset" value="重 置">
</form>