初识HTML

爱吃萝卜的大白熊

已于 2022-07-08 21:21:36 修改

阅读量130

点赞数 1

分类专栏：学习html 文章标签： javascript html html5

于 2022-05-18 21:15:14 首次发布

本文链接：https://blog.csdn.net/m0_59281909/article/details/124827634

版权

学习html 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

前言

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

用户可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。在这里，将开始我们的html之旅，希望能够帮助到大家，主要是方便自己回忆。温馨提示：本文章由初学者撰写，若有不对请谅解！
提示：以下是本篇文章正文内容，文中案例仅供参考

一、HTML是什么？

HTML 是用来描述网页的一种语言。

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

二、标签的介绍

1.html基本结构

Alt

2.基本结构标签

!DOCTYPE html 声明为 HTML5 文档
html元素是 HTML 页面的根元素
head元素包含了文档的元（meta）数据，如定义网页编码格式为 utf-8。
title元素描述了文档的标题
body元素包含了可见的页面内容
h1元素定义一个大标题，这里h1-h6共六级标签
p元素定义一个段落

3.稀少的单标签

br-换行

// 换行
<p> 
使用 br 元素<br>在文本中<br>换行。 
</p>

hr-文章分割线

// 分割文章内容
<h1>HTML</h1>
<p>HTML 是用于描述 web 页面的一种语言。</p>
<hr>
<h1>CSS</h1>
<p>CSS 定义如何显示 HTML 元素。</p>

img-图片标签

// 插入图片到网页上
<img src="smiley-2.gif" alt="Smiley face" width="42" height="42">

图片展示: Alt
4. input-标签规定了用户可以在其中输入数据的输入字段，一般input元素在 form元素中使用，用来声明允许用户输入数据的 input 控件。

// 输入按钮
<form action="demo_form.php">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="提交">
</form>

meta-标签提供了 HTML 文档的元数据。元数据不会显示在客户端，但是会被浏览器解析，一般位于head标签区域内。

<head>
<meta name="description" content="免费在线教程">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="runoob">
<meta charset="UTF-8">
</head>

link-标签定义文档与外部资源的关系。最常见的用途是链接样式表。

//链接到外部样式
<head>
<link rel="stylesheet" type="text/css" href="theme.css">
</head>

4.文本常用标签

加粗文字-strong 和 b标签

// An highlighted block
<p>这是一个普通的文本- <b>这是一个加粗文本</b>。</p>
<strong>查了一下资料发现：strong 是 web 标准中 xhtml 的标签，
strong 的意思是 "强调"；b 是 html 的，b 的意思是 bold（粗体）</strong>

倾斜文字-em标签

// 倾斜文字
<em>强调文本</em>

下划线-ins标签

// An highlighted block
<p>My favorite color is<ins>red</ins>!</p>

删除线-del标签

// An highlighted block
<p>My favorite color is <del>blue</del> </p>

空格与比较符标签

 <!-- 这个就叫注释 ctrl+/ -->
    <!-- &nbsp;代表一个空格，现在我写了四个空格 -->
    讲&nbsp;&nbsp;&nbsp;&nbsp;究
    <!-- ><号的表示为&gt何&lt -->
    &lt;王小明&gt;
    <!-- !其余字符请使用百度查询 -->

5.表格标签

// An highlighted block
<table border="1">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
</table>

在这里插入图片描述

5.1 下面设置表格属性，要直接写在table里面

<!-- align:表格位置 -->
<!-- border=1:有边框 -->
<!-- cellpadding:表格中内容和边框的像素距离,默认为1 -->
<!-- cellspacing:默认单元格之间的空白为2像素距离 -->
 <!-- <h2>设置表格的宽和高，width和height</h2> -->

6.表单标签

// An highlighted block
<form action="demo_form.php" method="get">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="提交">
</form>

如图
在这里插入图片描述

6.1表单元素

<!-- 常见于注册页面，主要是为了收集信息到后台 -->
<!-- 表单域:包含表单元素，帮助搜集信息到后台 -->
<!-- 表单元素:允许用户在表单中输入或者选择的内容控件 -->
<!--  -->
<!-- <form action="url处理地址" method="提交方式" name="表单域名称"-->

6.2 文本框元素

    <!-- name:是表单元素的名称，单选框必须拥有相同的name 才能实现多选一-->
    <!-- value:是用户选择或者输入的值，方便传输给后台 -->
    <!-- checked:单选框和复选框可以设置默认选中 -->
    <!-- maxlength:规定输入中字符最大数量 -->
    <!-- label:绑定一个表单元素,点击周围则可以选中该表单元素的输入 -->

// An highlighted block
<label for="username">用户名:</label><input type="text" name="username" value="请输入用户名" maxlength="6" id="username"><br>
    <!-- 给密码加密，text修改为password-->
    密码:<input type="password"name="password"><br>
    <!-- 小圆型单选按钮 ，可以实现多选一-->
    性别:<label for="nan">男</label><input type="radio"name="sex" value="男" checked id="nan">女<input type="radio" name="sex" value="女"><br>
    <!-- 方形多选框:checkbox -->
    爱好:吃饭<input type="checkbox"name="hobby" value="吃饭" checked> 睡觉<input type="checkbox"name="hobby" value="睡觉">打豆豆<input type="checkbox"name="hobby" value="打豆豆">

6.3 提交表单内容

 <!-- submit:点击提交将表单数据提交到后台 -->
 <!-- reset:重置表单 -->

// An highlighted block
 <span><input type="submit" name="" id="" value="免费注册"></span> &nbsp;&nbsp;<span><input type="reset" name="" id="" value="重置"></span>
    </form>
   <!-- 普通按钮button:后期结合js使用 -->
   <br>
   <input type="button" name="" id=""value="短信验证">

``
如案例
在这里插入图片描述

7.列表标签（无序、有序、自定义）

7.1 无序列表

// An highlighted block
 <!-- 无序列表！！！！！！ul:表示一个无序列表、li:表示一个列表项 -->
    <h3>无序列表！！！！！！！(Ul和li) ul里面只能有li标签，但可以放到li里面</h3>
    <ul type="square">
        <li>列表项1</li>
        <li>列表项2</li>
        <li>列表项3</li>
    </ul>

7.2 有序列表

// An highlighted block
 <h3>有序列表(自动排序1\2\3\.....)</h3>
      <ol>
        <li>列表项1</li>
        <li>列表项2</li>
        <li>列表项3</li>
      </ol>

7.3 自定义列表

// An highlighted block
<!-- dd:小标题,dt：大标题 -->
      <dl>
 <dt> 名词</dt>
 <dd>
     名词1:解释
 </dd>
 <dd>
    名词2:解释
</dd>
<dd>
    名词3:解释
</dd>
      </dl>

如图所示
在这里插入图片描述

8.超链接标签

 <!-- 超链接 -->
    <!-- 页面跳转 -->
    <!-- 外部链接 -->
    <h3 id="top">外部链接</h3>
    <a href="http://qq.com" >腾讯</a>
    <!-- 在当前窗口打开新页面 -->
    <a href="http://qq.com" target="_self">qq</a>
    <!-- 打开新窗口，target:打开页面的方式，_self(默认)和_blank -->
    <a href="http://qq.com" target="_blank">QQ</a>
    <br>
    <h3>内部链接</h3>
    <!-- 内部链接，打开自己的内部页面 -->
    <a href="标签.html" target="_blank">标签</a>
    <h3>空连接#</h3>
    <a href="#" target="_blank">博客</a>
    <h3>下载链接，下载某个东西的压缩包</h3>
    <a href="老虎.zip" target="_blank">下载图片</a>
    <h4>以网页元素作为标签</h4>
    <a href="http://baidu.com"><img src="图像.jpg"></a>
    <h4>锚点链接:跳转到当前页面的某一处</h4>
    <a href="#live">我的生活</a>

标签定义超链接，用于从一个页面链接到另一个页面。

元素最重要的属性是 href 属性，它指定链接的目标。

8.1提示与注释

提示：如果没有使用 href 属性，则不能使用 hreflang、media、rel、target 以及 type 属性。
提示：通常在当前浏览器窗口中显示被链接页面，除非规定了其他 target。
提示：请使用 CSS 来改变链接的样式。
使用id在本页面进行跳转，主要用于文章章节跳转

三、总结

以上就是html要讲的内容，本文仅仅简单介绍了html的使用，而html提供了大量能够帮助我们快速便捷地创建一个web网页的标签，使用这些标签我们可以创建出一个简单web网页以供使用，进一步的美化工作还需要css这门技术帮助我们美化页面，希望本文能够帮助到大家更好地理解html标签语言的应用！

爱吃萝卜的大白熊

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
初识HTML

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言一、HTML是什么？二、标签的介绍1.html基本结构2.基本结构标签3.稀少的单标签4.文本常用标签5.表格标签6.表单标签7.列表标签（无序、有序、自定义）8.超链接标签三、总结前言超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。用户可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。在这里，将开始我们.
复制链接

扫一扫