HTML总结

最新推荐文章于 2024-08-16 22:57:43 发布
最新推荐文章于 2024-08-16 22:57:43 发布
阅读量109 收藏 1
点赞数 4
分类专栏： web 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47318888/article/details/114535544
版权

HTML总结

什么是HTML

  • HTML是超文本1标记语言（ HyperText Markup Language）
  • HTML 用来构建 Web 页面，定义了网页的内容和结构
  • HTML不是一种编程语言而是标记语言

一、一个HTML实例

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

实例解析

  1. <!DOCTYPE html>声明文档类型。
  2. <html></html>元素是 HTML 页面的根元素，包括了整个页面，所有的元素都嵌套在里面。
  3. <head></head>元素包含了文档的元数据，如<meta charset="utf-8">定义网页编码格式为 utf-8。
  4. <title></title>: 该元素描述了网页的标题，出现在浏览器标签上。
  5. <body></body>: 包含页面可见的所有内容，包括文本，图片，音频，游戏等等内容。
  6. <h1></h1>元素定义一个大标题，HTML 提供了从大到小6级标题2，分别是：<h1>~ <h6>.
  7. <p></p>定义元素段落

二、HTML元素

开始标签元素内容结束标签
<!DOCTYPE html>文档声明类型</p>
<html>根元素</html>
<head>包含文档元数据的容器</head>
<title>文档标题</title>
<body>包含可见页面内容</body>
<p>描述一个段落</p>
<h1>这是一个标题</h1>
<a href="https://www.baidu.com/" target="_blank">链接</a>
<img src="url" alt="some_text">图片

三、文本格式

  • HTML 使用标签 <b>(“bold”) 与<i>(“italic”) 对输出的文本进行格式, 如：粗体 or 斜体
    这些HTML标签被称为格式化标签
  • 除本此介绍的这些标签可用于文本的格式外，其它标签都不建议用来进行格式的设置。HTML 是用来表现页面内容而不是对页面进行修饰的，专门的页面美化需要使用 CSS 。

知道如下标签

标签描述
<b>粗体文本
<i>斜体文本
<em>着重文本
<del>删除文本
<ins>插入文本
<sub>下标文本
<sup>上标文本
<small>小号文本
<strong>大号文本

四、超链接

HTML使用标签 <a>来设置超文本链接。当然，我们可以吧任何东西加上超链接，如文本、图像等。

1.HTML 链接语法

<a href="url" target="_blank">链接文本</a>

说明：

  1. href即为要跳转去的地址 URL（Uniform Resorce Locator)
  2. target属性为_blank表示在新的页面打开超链接（默认是在当前页面打开即_self）

2.锚点

锚点（id），也称书签。id属性可用于创建在一个HTML文档书签标记。通过锚点，可以在长页面内实现跳转。
注意：

  • 元素的id值必须是唯一的。
  • 超链接中的地址需要有#符号
<a id="tips">书签所在部分</a>
<a href="#tips">访问赎书签所在部分部分</a>

五、图像

1.图像

在页面插入图片：

<img src="url" alt="some_text" width="200" height="200">
  • str属性指存储图像的位置，即图片文件的路径
  • alt属性涌来了为图像定义一串预备的可替换的文本，替换文本的值是由用户定义的。当获取图片出现问题时，会显示替换文本。
  • 图片可以指定高宽度，但是可能会导致图片变形。

2.文件路径

文件路径分为相对路径和绝对路径两种。
绝对路径例子：

  • HTML文档：
<img src="https://i-blog.csdnimg.cn/blog_migrate/c207bbda52b345a4fc808a9f93ca8aa8.jpeg" alt="MDB Logo" width="200" height="200">
  • 效果：
    MDB Logo

相对路径：
.表示在当前目录，…表示上一级目录。

标签描述
<img src="picture.jpg">该图片文件与当前文档在同一目录中
<img src="./images/picture.jpg">该图片文件在当前目录的images目录中
<img src="../picture.jpg">该图片文件在上一级目录中

六、表格

表格实例

Header 1Header 2
（1,1）（1,2）
（2,1）（2,2）

实例代码：

<table >
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td>（1,1）</td>
        <td>（1,2）</td>
    </tr>
    <tr>
        <td>（2,1）</td>
        <td>（2,2）</td>
    </tr>
</table>

其中，<tr>表示表格的行, <td>表示表格单元,<th>是表头的单元（将会加粗显示）

七、列表

1、无序列表

无序列表使用<ul>标签，每个项目前用粗体圆点进行标记。
代码：

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

效果：

  • Coffee
  • Milk

2、有序序列表

有序列表使用 <ol>标签,每个项目前默认用数字进行标记。
代码：

<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

效果：

  1. Coffee
  2. Milk

当然，还可以使用其他标志，比如大写字母A，小写字母a，罗马字母i等。
代码：

<ol type="a">
<li>Coffee</li>
<li>Milk</li>
</ol>

八、区块

区块元素

区块元素在浏览器显示时，通常会以新行来开始（和结束）。
比如: <h1>, <pre>, <p>,<ul>, <table>,<div>等。

<h2>区块元素</h2>
<div>Hello</div>
<div>World</div>
<p>单独一行</p>

内联元素

内联元素在显示时通常不会以新行开始。
比如: <span>, <td>,<input>, <a>, <img>等。

<span>姓名：</span>
<input name="username">
<img src="https://i-blog.csdnimg.cn/blog_migrate/c207bbda52b345a4fc808a9f93ca8aa8.jpeg" alt="MDB Logo" width="200" height="200">

九、表单

表单用于收集当网站需要获取一些信息是，让客户进行填写或选择来用户的输入。表单元素使用<form>标签来设置。输入标签是<input>，输入类型由type来决定

<form>
<span>姓名：</span>
 <input type="text" name="name"><br>
 <span>密码：</span>
 <input type="password" name="pwd"><br>
 
 <p>单选:</p>
 <input type="radio" name="sex" value="male">Male<br>
 <input type="radio" name="sex" value="female">Female
 
 <p>复选:c
 <input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car

 <p>日期：</p>
  <input type="date"><br>
 
   <p>文件:</p>
  <input type="file" name="photo"><br>
  <!-- 文本输入区域，注意 rows 和 cols 属性 -->
  
  <p>文本框</p>
  <textarea name="message" rows="5" cols="30">
</form>
    • “超文本”是超级文本的中文缩写。
      • 超文本是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本。超文本更是一种用户界面范式，用以显示文本及与文本之间相关的内容。现时超文本普遍以电子文档方式存在，其中的文字包含有可以链结到其他位置或者文档的连结，允许从当前阅读位置直接切换到超文本连结所指向的位置。超文本的格式有很多，目前最常使用的是超文本标记语言（标准通用标记语言下的一个应用）及富文本格式。
    ↩︎

  2. 标题十分重要，搜索引擎用标题来索引页面，用户也习惯用标题来进行内容浏览。 ↩︎

一条笔直的路
关注
  • 4
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
关于对html学习的总结
qq_48612214的博客
03-09 4892
关于对html学习的总结 我的开发工具与所用浏览器 开发工具选用vs code，浏览器选择Firefox。 HTML的内容 1.html（Hyper Text Markup Language）超文本标记语言，主要用来构建网页内容 2.html结构： <!DOCTYPE html>//声明文档类型。可有可无 <html>//这个元素包裹了整个完整的页面，是一个根元素，其它元素都嵌套到其中。 <head>//这个元素是一个容器，它包含了所有你想包含在HTML页面中但不想在HT
网络编程学习笔记1
Baker的博客
03-06 196
这里写自定义目录标题1.IP地址 1.IP地址 IP地址: Internet Protocol Address 用于唯一定位网络上的一台计算机。 127.0.0.1: 本机localhost 分类: 共有地址（公网）:给物联网用 私有地址（私网）:给局域网用 如192.168.XX.XX 一般为私网，专门给组织内部使用。 或者分为 IPV4和IPV6 域名: 用于记忆IP问题. 如: www.baidu.com ...
php 输出html 总结
chihouzi的博客
06-29 1万+
while($row = $result->fetch_assoc()) { echo "<a href={$row['link']} title=''> {$row['name']}</a></br>"; }
HTML网页制作知识总结（简单易学）
m0_74807013的博客
03-18 2758
html制作网页所需要学的知识点
超详细html5登录注册页面总结
weixin_45738504的博客
03-28 1万+
一、HTML5简介 HTML是互联网上应用最广泛的标记语言。HTML文件就是普通文本+HTML标记，而不同的HTML标记能表示不同的效果。 HTML5优势 HTML5并不是一种革新的的升级，而是一种向规范向习惯的妥协，因此HTML5并不会带给开发者过多的冲击，从HTML4到HTML5过渡会非常轻松。 HTML5解决了以下四点问题 ： 解决跨浏览器问题 部标签代替了原来的JavaScript 更明确的语义支持 增强了web应用程序和功能 二、我的第一个网页 下面在ideal中先写一个第一个网页，测试一下环
MySQL数据库总结
热门推荐
匿名攻城狮
11-25 12万+
一、数据库简介 数据库(Database，DB)是按照数据结构来组织，存储和管理数据的仓库。 典型特征：数据的结构化、数据间的共享、减少数据的冗余度，数据的独立性。 关系型数据库：使用关系模型把数据组织到数据表(table)中。现实世界可以用数据来描述。 主流的关系型数据库产品：Oracle(Oracle)、DB2(IBM)、SQL Server(MS)、MySQL(Oracle)。 数据表：数...
html总结.xmind
09-08
自己总结的html的笔记，绘制了详细的思维导图，每个思维导图中均有详细的博文解释，方便大家学习和理解，免费分享给大家。适合网页前端的爱好者和学习者
HTML总结.xmind
02-23
HTML总结.xmind
html总结.
03-02
html总结.
html总结文档
05-12
html常用标签总结，包含各种表单标签 1.表单：<form></form> 主要属性：id name action method 2.input元素： 主要属性：name type value class type： text submit button radio checkbox hidden...
HTML静态网页成品作业(HTML+CSS)——电影网首页网页设计制作(1个页面)
2301_78945238的博客
08-16 461
HTML静态网页成品作业(HTML+CSS)——电影网首页网页设计制作(1个页面)
响应式Web设计：纯HTML和CSS的实现技巧
最新发布
Caleb的博客
08-16 784
响应式设计的核心理念是使用灵活的布局和媒体查询来自动调整网页的布局和样式。传统的静态网页设计往往只能适应固定的屏幕尺寸，而响应式设计则能够根据用户设备的不同，自适应地调整内容展示。它允许我们为不同的屏幕尺寸和特性定义不同的CSS样式，从而实现页面的自适应布局。）在响应式设计中非常重要，因为它们可以根据不同的设备和用户设置调整元素的大小。这样，无论图片的实际尺寸如何，它都会根据其容器的宽度自动缩放，从而避免了图片溢出容器的情况。函数，使得网格项在屏幕尺寸变化时自动调整列数和列宽，从而适应不同的显示设备。
JS（三）——更改html内数据
初叙
08-15 317
JavaScript更改html内数据
HTML补充——表格&表单
Fan_web的博客
08-14 1560
本文补充了HTML中的一些表格和表单的标签，下文继续分享CSS中的动画知识内容。
JavaScript HTML DOM 实例
wjs2024的博客
08-16 435
通过这些实例，我们可以看到JavaScript HTML DOM的强大功能。它可以让我们动态地添加、修改和删除页面元素，以及响应用户的交互操作。掌握DOM操作是前端开发的重要技能之一，希望这些实例能帮助您更好地理解和应用DOM操作。
会员注册表单包括先写基础信息，地址选择，上传文件，填写身份证号等功能JavaScript+HTML
weixin_68441705的博客
08-15 737
基础信息，比如用户名、密码等都使用正则表达式在JS中实现，地址采用省市区三级联动，包括了全部地区，身份证号也是适用正则进行验证的。比较基础，适合刚开始接触前端的小白（因为我就是）
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值