HTML

最新推荐文章于 2022-04-09 10:43:09 发布
置顶 最新推荐文章于 2022-04-09 10:43:09 发布
阅读量314 收藏 10
点赞数 3
分类专栏： html 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45095415/article/details/104690274
版权

HTML-超文本标记语言

一个简单的HTML结构
HTML标题
HTML段落
HTML中的一些文本修饰标签
HTML 图片标签
HTML 超链接
HTML 列表
HTML 表格
HTML 表单
HTML 表格表单组合实例
HTML div标签（块级元素）

一个简单的HTML结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<h1>我是第一个标题</h1>
<p>我是第一个段落。</p>
</body>
</html>

DOCTYPE声明了文档的类型
<html>标签是 HTML 页面的根元素，该标签的结束标志为</html>
<head>标签包含了文档的元（meta）数据，如<meta charset="utf-8">定义网页编码格式为utf-8。
<title>标签定义文档的标题
<body>标签定义文档的主体，即网页可见的页面内容，该标签的结束标志为</body>
<h1>标签作为一个标题使用，该标签的结束标志为</h1>
<p>标签作为一个段落显示，该标签的结束标志为</p>

**body标签内是页面的主体内容，下文介绍的标签都定义在body标签下**

HTML标题

HTML 标题（Heading）是通过<h1> - <h6> 标签来定义的.

<h1>标题</h1>
<h2>标题</h2>
<h3>标题</h3>
<h4>标题</h4>
<h5>标题</h5>
<h6>标题</h6>

它们依次递减字体大小。
在这里插入图片描述

HTML段落

HTML段落是通过p标签定义的。<p></p>

<h1>标题</h1>
<p>这是一个段落</p>
<h2>标题</h2>
<p>这是另一个段落</p>

在这里插入图片描述

HTML中的一些文本修饰标签

<br>: 定义简单的折行（单标签，没有结束标签）
<hr>：定义水平线（单标签）

<b></b>: 定义文本粗体
<strong></strong>:定义重要的文本

<em></em>:呈现为被强调的文本。
<i></i>:定义斜体文本

<sup></sup>:定义文本上标文本
<sub></sub>:定义文本下标文本

<u></u>: 定义文本下划线

<del></del>:定义被删除文本
<ins></ins>:定义新插入的文本

代码演示：

<h1>HTML中的一些文本修饰标签</h1>
    <hr> <!--定义水平线单标签-->
    <p>
      <b>定义文本粗体</b>
      <strong>定义重要的文本</strong>
    </p>
    <hr> <!--定义水平线单标签-->
    <p>
      <em>呈现为被强调的文本</em>
      <i>定义斜体文本</i>
    </p>
    <hr> <!--定义水平线单标签-->
    <p>
        a <sup>2</sup>+ b <sup>2</sup> = c <sup>2</sup> 
        <br> <br> <!--br:简单的折行--> H <sub>2</sub>O
    </p>
    <hr> <!--定义水平线单标签-->
    <p>
      <u>下划线</u>
      促销：原价<del>300</del>，现价<ins>100</ins>.
    </p>

在这里插入图片描述

HTML 图片标签

可以在网页中使用<img>标签插入图片
<img>标签有两个必须的属性：src和alt

src：指source，它的值是要插入图片的URL地址，可以是绝对路径，也可以是相对路径。

相对路径下：./ 当前目录。 …/ 父级目录。/ 根目录。

alt：是一串预备的可替换的文本，当图片加载不出时候，会显示这串文本的内容
title:鼠标指向图片时显示的文字

  <!-- title属性为用户鼠标指向图片时会显示的文字 -->
  <img src="../img/Snipaste_2020-03-06_11-00-19.png" alt="图片" title="这是一张图片">

在这里插入图片描述

HTML 超链接

HTML使用标签 <a>来设置超文本链接，是可以从一个页面指向另一个目的端的链接。
在标签<a> 中使用了href属性来描述链接的地址。

<a href="https://www.baidu.com/" >访问百度</a>

可以在href中使用#来表示空链接，暂时使页面显示效果

<a href="#">空链接</a>

默认的被链接文档会在原窗口中打开，如果需要其在新窗口打开可以使用Target属性。

<a href="https://www.baidu.com/" target="blank">访问百度</a>

id 属性可用于在一个 HTML 文档中创建书签标记。用于跳转锚点。

<a href="#html">HTML</a>
<a href="#CSS">CSS</a>
<a href="#JS">Javascript</a>

    <a name=“HTML”></a>
    <h2 id="HTML">HTML超文本标记语言</h2>
    <p>模拟的段落</p>
    <a name=“CSS”></a>
    <h2 id="CSS">CSS层叠样式表</h2>
    <p>模拟的段落</p>
    <a name=“JS”></a>
    <h2 id="JS">脚本语言</h2>
    <p>模拟的段落</p>

HTML 列表

HTML列表分为两种，第一种为无序列表，第二种为有序列表：
1.无序列表 -> ul li 复合嵌套的规范，type属性：改变列表的样式。

<ul type="disc">
    <li><a href="">第一个链接</a></li>
    <li><a href="">第二个链接</a></li>
    <li><a href="">第三个链接</a></li>
    <li><a href="">第四个链接</a></li>
    <li><a href="">第五个链接</a></li>
</ul>

在这里插入图片描述
2.有序列表 -> ol li 列表的最外层容器、列表项（用的非常少）type属性：改变列表的样式。

   <ol>
        <li>第一项</li>
        <li>第二项</li>
        <li>第三项</li>
        <li>第四项</li>
    </ol>

在这里插入图片描述
3.定义列表
dl:定义列表
dt:定义专业术语或名字
dd:对名词进行解释和描述

<dl>
    <dt>HTML</dt>
    <dd>超文本标记语言</dd>
    <dt>CSSL</dt>
    <dd>层叠样式表</dd>
    <dt>HTML</dt>
    <dd>超文本标记语言</dd>
</dl>

在这里插入图片描述

HTML 表格

表格由<table>标签来定义。每个表格均有若干行（由<tr>标签定义），每行被分割为若干单元格（由<td>标签定义）。字母 td指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

HTML 表格的基本结构：

<table>…</table>：定义表格
<caption></caption>：定义表格标题
<th>…</th>：定义表格的标题栏（文字加粗）
<tr>…</tr>：定义表格的行
<td>…</td>：定义表格的列

表格可以分为三个部分 - 头部，主体和页脚，如同word文档中页面的页眉、正文、页脚。每个页面保持相同，而正文是表格的主要内容持有者。

头部，主体和页脚的对应的三个标签是：

<thead> - 创建单独的表头。
<tbody> - 表示表格的主体。
<tfoot> - 创建一个单独的表页脚。

<table>
    <!-- 表格标题 -->
    <caption>天气预报</caption>
    <thead>
      <tr>
        <th>日期</th>
        <th>天气情况</th>
        <th>出行情况</th>
      </tr>
    </thead>
    
    <tbody>
    <!-- 第二行 -->
    <tr>
      <!-- 二行一，二，三列 -->
      <td>19992年</td>
      <td>好</td>
      <td>天气晴朗，适合出行</td>
    </tr>
    <!-- 第三行 -->
    <tr>
      <!-- 三行一，二，三列 -->
      <td>19992年</td>
      <td>好</td>
      <td>天气晴朗，适合出行</td>
      </tr>
    </tbody>
  </table>

在这里插入图片描述
有以下两个属性，用于调整HTML表格中单元格的空间：

cellspacing属性-定义表格单元格之间的空间
cellpadding属性-表示单元格边框与单元格内容之间的距离

在上述代码table标签内添加，边框属性与这两个属性，显示效果会有所转变

<table border="1px" cellpadding="30px" cellspacing="30px">

在这里插入图片描述
如果要将两个或多个列合并为一个列，将使用colspan属性
如果要合并两行或更多行，则将使用rowspan属性。

<table border = "1">
    <tr>
        <th>Column 1</th>
        <th>Column 2</th>
        <th>Column 3</th>
    </tr>
    <tr>
        <td rowspan = "2">Row 1 Cell 1</td>
        <td>Row 1 Cell 2</td>
        <td>Row 1 Cell 3</td>
    </tr>
    <tr>
        <td>Row 2 Cell 2</td>
        <td>Row 2 Cell 3</td>
    </tr>
    <tr>
        <td colspan = "3">Row 3 Cell 1</td>
    </tr>
</table>

效果如下：
在这里插入图片描述

HTML 表单

<form>:最外层容器
<input>:标签用于搜集用户信息，根据不同的type属性值，展示不同的空间，如输入框、密码框、复选框
<textarea>：多行文本框
<select>、<option>:下拉菜单
label：辅助表单

<form >
    <h2>输入框：</h2>
    <input type="text" placeholder="请输入用户名">
    <h2>密码框：</h2>
    <input type="password" placeholder="请输入密码">
    <h2>复选框：</h2>
    <input type="checkbox" checked>苹果
    <input type="checkbox">香蕉
    <input type="checkbox" disabled>石头
    <h2>单选框：</h2>
    <input type="radio" name="gender">男
    <input type="radio" name="gender">女
    <h2>上传文件：</h2>
    <input type="file">
    <h2>提交按钮：</h2>
    <input type="submit">
    <h2>重置按钮：</h2>
    <input type="reset">
</form>

在这里插入图片描述

HTML 表格表单组合实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        td{
            text-align: center;
        }
    </style>
</head>
<body>
    <table border="1px" cellpadding="30px" align="center">
         <tr>
             <td rowspan="4">总体信息</td>
             <td colspan="3">用户注册</td>
         </tr>
         <tr>
             <td >用户名：</td>
             <td colspan="2" >
                <input type="text" placeholder="请输入用户名">
             </td>
         </tr>
         <tr>
             <td >密码：</td>
             <td colspan="2">
                 <input type="password" placeholder="请输入密码">
             </td>
         </tr>
         <tr>
             <td colspan="3">
                 <input type="submit">&nbsp&nbsp&nbsp&nbsp&nbsp;
                 <input type="reset">
             </td>
         </tr>
    </table>
</body>
</html>

效果如下：
在这里插入图片描述

HTML div标签（块级元素）

div:将网页分割成独立的部分，来实现网页的规划和布局

<div>
    <h2><a href=""></a></h2>
</div>

至此，HTML得基本使用方法介绍完毕。

不正宗小肥猪
关注
  • 3
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
HTML入门与进阶以及HTML5
wuyxinu的博客
12-12 37万+
目录 一、简介 1、前端开发最核心技术 （1）HTML是什么？ （2）CSS （3）JavaScript 2、前端开发其他技术 二、基础内容 1.基础总结 2.HTML的基本标签 (1)HTML标签 (2)head标签 (3)body标签 3、段落与文字 (一)、段落标签 (二)、网页特殊符号 (三)、自闭合标签 (四)、块元素和行内元素 (五)、练...
圣诞树代码 html
m0_73309780的博客
12-04 6万+
圣诞树 html
html5常用标签介绍
cong____cong的博客
03-09 401
HTML5·DOCTYPE 声明了文档类型·&lt;html&gt; 标签描述了文档类型，该标签的结束标志为 &lt;/html&gt;·&lt;body&gt; 标签定义文档的主体，即网页的可视化内容，该标签的结束标志为 &lt;/body&gt;·&lt;h1&gt; 标签作为一个标题使用，该标签的结束标志为 &lt;/h1&gt;，--...
HTML期末设计——代码篇
greengirl5的博客
06-22 12万+
事先声明 这个网页设计也就是用了我学到的知识做的一个中规中矩的网页，可以给以后的大一新生们做个参考，和商业网站的效果肯定是没得比的，期望太高的可以关掉了 引入页 效果图： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>欢迎来到香氛密语</title> <style>
制作一个简单HTML个人网页网页（HTML+CSS）
热门推荐
weixin_46153254的博客
12-04 35万+
制作一个简单的HTML个人网页
HTML零基础入门教程（详细）
ZONGXP的博客
10-22 21万+
HTML 是用来描述网页的一种语言。HTML 是一种在 Web 上使用的通用标记语言。HTML 允许你格式化文本，添加图片，创建链接、输入表单、框架和表格等等，并可将之存为文本文件，浏览器即可读取和显示。 HTML 指的是超文本标记语言:HyperTextMarkupL...
使用HTML制作一个简单的个人主页
indulgexiaomei的博客
10-09 20万+
此网页我对html有了一个简单，初步的认识后制作的一个网页，主要目的是练习html的一些简单操作，由于时间关系，有很多做的不好，细节处理不到位的地方。 废话不多说，先来看效果 1、首页 这一个网页就是进行了网页背景、背景音乐、段落的处理、水平线以及超链接的简单练习。 2、我的相册 这一页主要是对大量图片进行一个排版的练习 3、我的计划 这一页主要是对文本有序无序以及表格内部的背景颜色等等的练习 4、我的家乡 这一部分是对段落、还有文本与图片结合的练习 5、我的故事 这个是对表格进阶版的练习，文字
HTML超链接
m0_48289363的博客
04-09 2万+
超链接，外部链接，内部链接，空链接，下载链接，网页元素链接，锚点链接
【方法】HTML网页调用本地Python程序
crazyang的博客
05-07 18万+
代码已上传github 首先声明，在HTML中调用本地Python程序是十分不推荐的，一是因为网页调用本地程序的权限正在被取消，二是因为真不如JS写直接，三是只能在自己本地调用。 但如果你要用，像我一样，需要在课堂上进行一个Python代码的展示，并且想要一个好看的UI界面的话，可以这样来做，做起来还是很容易的，但这样的展示仅限于需要弹框的，比如我的人脸检测是弹窗式，如果需要内嵌在网页内...
HTML表格（HTML 表格的使用，收藏这一篇就够了）
weixin_47139649的博客
10-15 6万+
HTML基础之表格 文章目录HTML基础之表格1. 表格的定义2. 表格的标签3. 单元格边框(border)4. 合并单元格4.1 合并行单元格(colspan)4.2 合并列单元格(rowspan)5. 表格格式设置5.1 单元格的对齐（align）（居中，左对齐，右对齐）5.2. 背景色&图片（bgcolor & background）5.2.1 单元格背景色&图片5.2.2 表格背景色&图片5.3 单元格的边距（cellpadding）5.4 单元格间的距离(cel
圣诞树HTML.html
12-17
圣诞树HTML，下载点击即可使用，表白神器
HTML动态爱心代码爱心满屏
11-07
HTML动态爱心代码满屏爱心免费下载
html网页做的动态爱心（超好看）
11-07
用html+css+JavaScript网页做的动态爱心，浪漫十足
ECharts+html展示大屏模板30多套
12-18
ECharts+html展示大屏模板30多套,可以根据自己需求修改数据和样式。方便便捷，几乎涵盖目前市面上所有常见模板。 ECharts+html展示大屏模板30多套,可以根据自己需求修改数据和样式。方便便捷，几乎涵盖目前市面上...
一套后台管理html模版
08-04
在页面 http://www.cnblogs.com/strick/p/3884797.html 有一些说明
网页设计期末大作业+html+css
05-25
适合学生的html5响应式网站 成品可以让你们修改吗？ 学生网页成品坚持每周更新 学生网站一定不能太专业，否则老师会发现的！ DIV+css+js学生网站如何做？ 不靠这个吃饭--你还用自己做网站吗？ 大学生静态网页成品...
html 动态表白
06-25
html制作表白网页图片音乐可以自己更改，退出生成特效很好哦
网上订餐系统模板html源码
06-11
网上订餐系统模板html源码，是前端html静态页面，没有后端与数据库连接。
漂亮的html首页
04-12
漂亮的html首页，附加js文件和css文件，高端大气上档次
html
最新发布
05-29
HTML（Hypertext Markup Language）是一种用于创建网页的标记语言。HTML 由各种元素（tags）和属性（attributes）组成，这些元素和属性可以用来定义网页的结构和内容。 HTML 元素通常由一个开始标记和一个结束标记...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值