HTML入门和基础标签使用

已于 2022-10-27 10:05:21 修改
阅读量2.5k 收藏 2
点赞数
分类专栏： 编程语言 文章标签： html 标签 表格 form表单 按钮
于 2022-01-10 15:18:06 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yy8623977/article/details/121419966
版权

目录

1. 浏览器内核

浏览器内核备注
IETridentIE、猎豹安全、360极速浏览器、百度浏览器
firefoxGecko火狐浏览器内核
SafariWebkit苹果浏览器内核
chrome / OperaBlinkchrome / Opera浏览器内核, Blink其实是Webkit的分支

目前国内一般浏览器都会采用Webkit/Blink内核，如360、UC、QQ、搜狗等

2. 标题标签

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>test title</title>
</head>
<body>
    <h1>一级标题</h1>
    <h2>一级标题</h2>
    <h3>一级标题</h3>
    <h4>一级标题</h4>
    <h5>一级标题</h5>
    <h6>一级标题</h6>
</body>
</html>

显示效果如下：
标题标签

3. 段落和换行

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>test title</title>
</head>
<body>
<p>段落1<br />段落1第二行</p>
<p>段落2</p>
</body>
</html>

显示如下：
段落或换行

4. 文字加粗、倾斜、删除线、下划线

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>test title</title>
</head>
<body>

我是<strong>加粗</strong>的文字 <br />
我是<b>加粗</b>的文字 <br />

我是<em>倾斜</em>的文字 <br />
我是<i>倾斜</i>的文字 <br />

我有<del>删除线</del> <br />
我有<s>删除线</s> <br />

我有<ins>下划线</ins> <br />
我有<u>下划线</u> <br />

</body>
</html>

显示如下：
文字格式化

5. div和span

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>test title</title>
</head>
<body>

<div>我是一个div盒子, 我单独占一行</div>
<div>我是一个div盒子, 我单独占一行</div>

<span>第一列span</span>
<span>第二列span</span>
<span>第三列span</span>

</body>
</html>

显示效果：
div和span

6. 图片img

项目目录结构如下：
目录结构
test.html内容如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>test title</title>
</head>
<body>
<img src="../images/pic1.jpg" title="鼠标放到图片上面输出此标题" width="200" border="15"/>
<img src="../images/pic2.jpg" height="300"/>
<img src="pic.jpg" alt="图片显示不出来时, 输出此文字"/>

<img src="https://www.baidu.com/img/flexible/logo/pc/result.png"/>

</body>
</html>

显示结果如下：
显示结果

7. 链接

项目结构如下：
项目结构index.html内容如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>test title</title>
</head>
<body>

<a href="http://www.baidu.com"><img src="images/baidu.png"/></a> <br />
<a href="html/test.html" target="_blank">在新窗口打开test.html</a> <br />
<a href="#" target="_self">这是一个空链接, 表示在当前窗口打开当前页面, 默认在当前窗口</a> <br />
<a href="web_dev.iml">下载文件, 如果是zip包也可以下载, 如果是图片则在浏览器打开图片</a> <br />

<a href="#introduction">我要跳转到当前页面的介绍部分</a>
<h4 id="introduction">介绍部分</h4>

</body>
</html>

显示结果如下：
显示结果

  • 链接中还可以放表格、音频、视频等
  • target的其它选项。_parent: 在父窗口打开链接，因为一个页面由多个窗口组成，窗口中还可能包含窗口。_top: 在顶层窗口打开链接

8. 上下标、空格、大于号、小于号、注册商标和版权符号

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>test title</title>
</head>
<body>

<div>上标应用：3的平方表达式：3<sup>2</sup></div>
<div>下标应用：水分子化学式：H<sub>2</sub>O</div>
<div>&nbsp;&nbsp;我前面有两个空格</div>
<div>输出一个&lt;p&gt;标签</div>
<div>注册商标&reg和版权符号&copy</div>

</body>
</html>

输出结果如下：
符号图标

9. 表格

项目结构如下：
项目结构
index.html内容如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>test title</title>
</head>
<body>

<table>
    <thead>
        <tr>
            <th>姓名</th>
            <th>其它</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>张三</td>
            <td><a href="html/test.html">张三的说明</a></td>
        </tr>

        <tr>
            <td>李四</td>
            <td><img src="images/baidu.png" /></td>
        </tr>
    </tbody>
</table>

</body>
</html>

显示效果如下：
显示效果

合并单元格的操作如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>test title</title>
</head>
<body>

<table>
    <thead>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td rowspan="2">张三</td>
            <td>13</td>
        </tr>

        <tr>
            <td>14</td>
        </tr>

        <tr>
            <td colspan="2">王五</td>
        </tr>
    </tbody>
</table>

</body>
</html>

显示效果如下：

合并单元格

10. 列表

  1. 无序列表
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>test title</title>
</head>
<body>

<ul>
    <li>苹果</li>
    <li>香蕉</li>
</ul>

</body>
</html>

显示效果如下：

无序列表

  • ul里面最好只放li，li里面可以放其它标签
  1. 有序列表
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>test title</title>
</head>
<body>

<ol type="i" start="3">
    <li>第三</li>
    <li>第四</li>
</ol>

</body>
</html>

显示效果如下：
有序列表

  • ol里面最好只放li，li里面可以放其它标签
  • type表示序号显示的类型，可选项有：A、a、I、i、1(默认)。start表示第一个li的开始序号，默认从1开始
  1. 自定义列表
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>test title</title>
</head>
<body>

<dl>
    <dt>名称</dt>
    <dd>名称解释1</dd>
    <dd>名称解释2</dd>
</dl>

</body>
</html>

显示效果如下：
显示效果

  • dl里面最好只放dt和dd，dt和dd里面可以放其它标签
  • dt和dd没有数量限制

11. form表单

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>test title</title>
</head>
<body>

<form action="test.php" method="get" name="test_form">

    <!-- >>>>>>>>input部分>>>>>>>>-->
    用户名: <input type="text" name="username" value="请输入您的用户名" maxlength="10" /> <br />
    密码: <input type="password" name="password" maxlength="8" /> <br />
    性别: <label for="man_label">男</label> <input type="radio" name="sex" value="man" checked="checked" id="man_label"/>
    <label for="woman_label">女</label> <input type="radio" name="sex" value="woman" id="woman_label"/> <br />
    爱好: 蓝球 <input type="checkbox" name="hobby" value="basketball" />
    购物 <input type="checkbox" name="hobby" value="shopping" checked="checked" /> <br />
    <input type="submit" name="submit" value="提交"/> <br />
    <input type="reset" name="reset" value="重置"/> <br />
    <input type="button" name="send_code" value="发送验证码"/> <br />
    <input type="file" name="upload_file" value="上传文件" /> <br />

    <!-- >>>>>>>>select部分>>>>>>>>-->
    城市:
    <select name="select_city">
        <option value="Beijing" selected="selected">北京</option>
        <option value="Shanghai">上海</option>
        <option value="Guangzhou">广州</option>
    </select> <br />

    <!-- >>>>>>>>textarea部分>>>>>>>>-->
    个人评价: <textarea name="remark" rows="3" cols="60">请输入您的个人评价</textarea> <br />

</form>

</body>
</html>

参数说明如下：

  • form表单的action：表示处理表单数据的程序
  • form表单的method：可以为post
  • input、select、textarea标签也可以不放在form表单中使用
  • label标签的作用是扩大input元素的选择范围，增加用户体验
  • 点击input submit类型的提交按钮，会跳转到：http://localhost:63342/web_dev/test.php?username=zhangSan&password=88888888&sex=man&hobby=basketball&hobby=shopping&submit=%E6%8F%90%E4%BA%A4&upload_file=
  • input button类型的按钮需要配合javascript来使用
  • select默认选择第一个option

显示效果如下：
form表单

12 水平线标签

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>test title</title>

</head>
<body>

<div>盒子一</div>
<hr />
<div>盒子二</div>

</body>
</html>

显示效果如下：
水平线

13. 按钮标签

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>test title</title>

</head>
<body>

<button>提交</button>

</body>
</html>

显示效果如下：
按钮标签

14 查阅文档

  1. W3school
  2. MDN Web Docs
Bulut0907
关注
专栏目录
爬虫百度图片进入百度验证怎么办？
lavender_dream的博客
03-20 6299
文章目录前言爬虫百度图片时，总是有时好有时坏 解决方案更改headers：（2）我选择通过如下命令升级pip：（3）再下载cryptography（4）最后尝试最初的下载早中晚温差较大，注意保暖哦，sincerely，end. 前言   爬虫百度图片时，总是有时好有时坏（爬不上的居多），已解决，如有错误，请纠正，万分感谢！ 爬虫百度图片时，总是有时好有时坏 解决方案 出现问题： 根据调试信息，我观察到了返回结果如下： <!DOCTYPE html> <html lang="zh-C
HTML入门-页面结构&基础标签
01-08
(面试题)三、三个版本和一个标准（面试题）四、html5的扩展五、html创建文件（重点）六、html格式（重点）七、html基本结构（重点）八、注释九、基础标签（重点）十、文本标签十一、布局标签十二、特殊符号 ...
html里放在body后的js,如何让放在body前面的js代码运行
weixin_36116139的博客
06-21 517
下面的代码，js是放在body的底部的，我想放在的下面，也就是body前面运行，但是显示结果是失败的，要怎么修改，才能放在顶部，或者放在单独的js文件中，谢谢！调试*{margin:0; padding:0; color:black;}ul{list-style:none;}a{text-decoration:none;}a:hover{color:orange;}#articleList{wid...
HTML5之基础、元信息标签
杨筱斌的博客
10-17 2167
<html>标签 常用属性：          [manifest]：定义一个URL，该URL上记录了此文档的缓存信息 作用：          该标签用来告知浏览器这是一个HTML文档，浏览器在读取该标签后...
【HTML5】2.语法入门总结（第二部分）
qq_44078824的博客
04-17 872
0.思维导图 1.HTML5基本框架 HTML5 是HyperText Markup Language 5 的缩写，是一种标记语言。 第一个程序，基本框架。 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name=
HTML笔记
weixin_46307478的博客
02-25 1027
HTML 1.初识HTML HTML Hyper Text Markup Language(超文本标记语言) 超文本包括文字、图片、视频、音频、动画等。 现在用的是HTML5。 ECMScript是JavaScript需要遵守的规范 面试可能问到的问题： W3C是什么 W3C标准包括什么 前端的最常用的IDE：WebStorm 2.网页基本信息 注释： <!--DOCTYPE：(文档类型)告诉浏览器，我们要使用什么规范，默认是HTML5，因此可以省略不写--> <!
HTML5 video标签（播放器）学习笔记（一）:使用入门
09-28
首先，使用`<video>`标签非常简单，只需要在HTML文档中插入一个空的`<video>`标签即可。基础形式如下： ```html <video></video> ``` 接下来，我们需要为视频指定来源，通过`src`属性来实现。例如： ```html 视频URL...
html入门知识点，各种基础标签
02-24
基础写网页的标签
入门：HTML的基本标签和属性简单介绍
09-28
随着学习的深入，还将接触到更多复杂的布局、交互性以及响应式设计的相关知识，但这些基础标签和属性无疑是学习HTML的起点。通过不断的实践和实验，可以创造出各种各样的网页，满足不同的需求。
尚硅谷前端入门html+css零基础教程，零基础前端开发html5+css3视频尚品汇项目源码
最新发布
03-06
【标题】中的“尚硅谷前端入门html+css零基础教程”指的是一个由尚硅谷教育机构提供的，面向初学者的前端开发课程，主要涵盖了HTML（超文本标记语言）和CSS（层叠样式表）的基础知识。这个教程是为那些对前端开发...
HTML中的 ＜!DOCTYPE＞ 声明
qq_51735681的博客
04-05 2886
HTML中的 <!DOCTYPE> 声明： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>标题</title> </head> <body> 内容...... </body> </html> 几乎所有主流浏览器都支持 <!DOCTYPE> 声明。（其中包括像IE、火狐、Opera、Go
前端知识之HTML标签
weixin_33724046的博客
11-11 199
1.HTML是一个标准，规定了大家怎么写网页。 2.HTML->>学标签 <标签名> --> 标记语言（HTML、XML） 3.标签分类 　双标签、单标签　 （1）<h1></h1> （2）<img/>或<img> （3）<a></a> 4，标记语句和编程语言...
html基础
weixin_45951689的博客
09-17 1834
<!DOCTYPE html><!--约束，声明--> <html lang="zh_CN"> <!--html标签表示html的开始 lang="en"表示英文，lang="zh_CN"表示中文--> <head> <!--表示头部信息，一般包含三部分，title标签，css样式，js代码--> <meta charset="UTF-8"> <!--表示当前页面使用UTF-8字符集-->
前端知识之HTML内容
weixin_30894389的博客
12-07 209
HTML介绍 Web服务本质 import socket sk = socket.socket() sk.bind(("127.0.0.1", 8080)) sk.listen(5) while True: conn, addr = sk.accept() data = conn.recv(8096) conn.send(b"HT...
<html lang="zh-cn">和<meta chartset="utf-8">
zhp_em的博客
11-02 2572
：网站编码格式 ：浏览器语言环境
【17】Bootstrap — 导航条
有心博客
09-06 353
默认样式的导航条<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <sty
热门推荐
u014497548的博客
06-03 57万+
Title img,div,body{margin: 0;padding: 0;} .orgindiv {width: 200px;height: 200px;position: relative;float: left;margin-left: 100px;} .orgindiv img{width: 100%;height: 100%;}
HTML meta 标签
zhangankang的博客
06-28 3万+
！！<meta> 标签是 HTML 语言头部的一个辅助性标签，我们可以定义页面编码语言、搜索引擎优化、自动刷新并指向新的页面、控制页面缓冲、响应式视窗等！ 属性 值 描述 charset( H5 New) character_set 定义文档的字符编码。 content text 定义与 http-equiv 或 name 属性相关...
Web学习（一） html基础标签
May the Force be with you
03-05 3227
Web学习（一） html基础标签 1.1 文档结构 文档结构 html的所有标签为树形结构，例如： <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Web应用课</ti
HTML入门：基础标签与属性详解
4. 列表：无序列表使用和标签，有序列表使用和标签。无序列表示例：`<ul><li>条目1</li><li>条目2</li></ul>`，有序列表示例：`<ol><li>条目1</li><li>条目2</li></ol>`。 5. 超级链接：标签创建链接，`href`属性...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值