HTML总结（1）

已于 2022-03-24 17:54:22 修改
阅读量100 收藏
点赞数 1
分类专栏： 其它 文章标签： html5
于 2022-03-24 17:44:10 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_59524897/article/details/123715300
版权

HTML框架：

<!DOCTYPE html>
<!-- 告诉浏览器用html5版本显示网页 -->
<html lang="en">
<!-- language = english -->
<!-- 说明该网站用什么语言 -->
<!-- lang = "zh-CN" 表示中文 -->
<head>
    <meta charset="UTF-8">
    <!-- 告诉浏览器用UTF-8读取该文档，一般用UTF-8 -->
    <!-- 一定要写 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 这两条用于移动端开发 -->
    <title>Document</title>
</head>
<body>
    
</body>
</html>

<!-- 标题标签 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- h1 - h6 从一级标签到六级标签，作为标题适用 -->
    <!-- 标题独占一行，属于块级元素 -->
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
</body>
</html>

常用标签：

  • 段落标签：p
  • 强制换行：br
  • div(division)/span(跨度),可以把图片或文字放在里面
    • div：独占一行(属于块级元素)
    • span：一行可以放多个span(属于行内元素)
  • 加粗标签：strong或b
  • 倾斜标签：em或b
  • 删除线：del或s
  • 下划线：ins或u
  • 空格：&nbsp
  • 大于号(less than)：&lt
  • 小于号(greater than)：&gt

图片插入：

可以使用相对路径，也可以使用绝对路径，也可以链接到某网站的链接 
../pic.png代表链接到上一级路径的pic图片(../代表上一级路径)
img/pic.png代表下一级img路径的pic图片(/代表下一级路径)
当然也可以使用绝对路径值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 插入图像:可单标 -->
    <img src="C:\Users\64516\Desktop\first.png" alt="" title="" border="15">
    <!-- src 指定路径 -->
    <!-- alt 替换文本，当图片无法显示时展示的文本 -->
    <!-- title 提示文本，把鼠标放上去时显示的文本 -->
    <!-- width 设定图像宽度 -->
    <!-- height 设定图像高度,width和height不成比例时失真 -->
    <!-- border 设定图像边框,一般用css来做 -->

    <!-- 属性之间不分先后顺序，用空格分割 -->
    <!-- 属性采用键值对的形式，属性=值 -->
    <!-- src属性必须写 -->
</body>
</html>

超链接:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 超链接的语法规范 -->
    <a href=""></a>
    <!-- a(anchor:矛) -->
    <!-- href:跳转目标，用于指定目标的url地址 -->
    <!-- target:打开窗口的形式，默认是_self(本窗口),还可以是_blank(新窗口) -->
    
    <!-- 链接分类-->
    <!-- 链接实体可以为图片或者文字 -->
    <!-- 连接地点可以分为：1.外部链接（即网站地址） 2.内部链接(即本机其它html文件) -->

    <!-- 1.外部链接-->
    <!-- 必须是http开头 -->
    <a href="http://www.qq.com" target="">跳转到腾讯</a>
    <a href="http://www/baidu.com"><img src="/img/first.png" alt="加载失败"></a>
    <!-- 2.内部链接 -->
    <a href="html006.html" target="_blank">跳转到html006</a>
    <a href="../首页.png">首页</a>
    <!-- 3.空链接，采用herf=“#” 搭建框架,即尚未填充跳入地址 -->
    <a href="#">空链接</a>
    <!-- 4.下载链接，一般用于下载压缩包 -->
    <a href="/img/first.zip">download</a>
    <!-- 5.锚点连接，实现同一界面的跳转 -->
    <!-- （1）给标签设置id -->
    <!-- （2）通过herf = id的形式跳转 -->
    <br><br><br><br><br><br>
    
    <!-- id在哪个标签内部应该是都行的 -->
    <a href="#experience"><h1>早年经历</h1></a>   
    <p>这里是一大段文本内容</p>    
    <a href="#back" id=experience><h2>早年经历</h2></a>
	<p>这里是一大段文本内容</p>  
   
</body>
</html>

table标签：

  • tr代表行,td代表列,td嵌套在tr中
  • th可以替代tr作为表头行，效果是居中加粗
  • 后期效果我们一般在css中实现
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- th标签：表头单元格,table head,居中且加粗 -->
    <table border="1" cellspacing="5" width="400">
        <tr><th>姓名</th><th>年龄</th></tr>
        <tr align="center"><td>陈星宇</td><td>20</td></tr>
        <tr align="center"><td>cxy</td><td>20</td></tr>
    </table>
    
    <!-- 表格属性，一般用css实现 -->
    <!-- align,对齐方式,left,center,right -->
    <!-- border,是否有边框,1,2,3... -->
    <!-- width,表格宽度 -->
    <!-- cellpadding,单元边缘和内容之间的空白 -->
    <!-- cellspacing,单元格之间的空白 -->
</body>
</html>
  • 我们一般把表格的表头和其它内容分别放在thead和tbody中
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table border="1" cellspacing="0" align="center" width="400">
        <!-- table分为thead和tbody -->
        <thead>
            <tr><th>排名</th><th>关键词</th><th>趋势</th><th>今日搜索</th><th>最近七日</th><th>相关链接</th></tr>
        </thead>
        <tbody>
            <tr align="center"><td>1</td><td>鬼吹灯</td><td><img src="" alt="未加载"></td><td>345</td><td>123</td><td><a href="http://www.baidu.com">百度</a>&nbsp;<a href="http:www.qq.com">qq</a></td></tr>
            <tr align="center"><td>1</td><td>鬼吹灯</td><td><img src="" alt="未加载"></td><td>345</td><td>123</td><td><a href="http://www.baidu.com">百度</a>&nbsp;<a href="http:www.qq.com">qq</a></td></tr>
            <tr align="center"><td>1</td><td>鬼吹灯</td><td><img src="" alt="未加载"></td><td>345</td><td>123</td><td><a href="http://www.baidu.com">百度</a>&nbsp;<a href="http:www.qq.com">qq</a></td></tr>
        </tbody>    
    </table>
</body>
</html>
  • table表格的单元格合并
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 合并单元格 -->
    <!-- rowspan跨行合并 colspan跨列合并 -->
    <!-- rowspan把上边单元格作为目标单元格 -->
    <!-- colspan把左边单元格作为目标单元格 -->
    <table border="1" cellspacing="5" width="400">
        <tr><th>姓名</th><th>年龄</th><th>职业</th></tr>
        <tr align="center"><td>陈星宇</td><td colspan="2">20</td></tr>
        <tr align="center"><td rowspan="2">cxy</td><td>20</td><td>教师</td></tr>
        <tr align="center"><td>20</td><td>wwws</td></tr>
        <!-- 写在td/th里面  -->
    </table>
</body>
</html>

列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 无序列表ul+li -->
    <!-- ul中只能嵌套li标签，不能放其他标签,但li里面可以放很多元素 -->
    <!-- 无序列表有自己的属性，在css中修改 -->

    <!-- 有序列表ol+li -->
    <!-- ol中只能嵌套li标签，不能放其他标签 -->

    <!-- 自定义列表 dl dt dd -->
    <!-- 只能放dt和dd标签 -->
    <!-- 经常是一个dt和多个dd -->
    <dl>
        <dt>关注我们</dt>
        <dd>微信</dd>
        <dd>微博</dd>
        <dd>b站</dd>
    </dl>

</body>
</html>

表单

  • 常见于注册界面,用于收集用户信息并送到后台
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 构成 -->
    <!-- 表单域 表单控件 提示信息 -->

    <!-- 表单域：包含表单元素的区域 -->
    <form action="" method="" name="">
    </form>
    <!-- action=url地址，接受表单数据的服务器程序的url地址 -->
    <!-- mothod=提交方式 -->
    <!-- name=名字，区分其他表单域 -->

    <!-- 表单控件 -->
    <!-- name:区别表单元素,name=value的形式输送后台 -->
    <!-- type="属性值",有button.checkbox.file.text等 -->


    <!-- 1.input -->
    <!-- 账号text和密码password -->
    <form action="">
        <input type="text" maxlength="7"><br>
        <input type="password" name="pwd"><br>
        <!-- 单选按钮radio和复选框checkbox -->
        <!-- 单选按钮和复选框要有相同的name值 -->
        🚹<input type="radio" name="gender" id="" value="male" checked=checked>
        🚺<input type="radio" name="gender" id="" value="famele">
        <br>
        爱好：<input type="checkbox" name="hobby" value="playgame" checked=checked>
        打游戏
        <br>
        <!-- submit:提交按钮,将表单域form内数据发送给服务器 -->
        <!-- reset:清除表单数据,还原默认值 -->
        <input type="submit" name="" id="" value="注册">
        <input type="reset" name="" id="">
        <!-- button:不会提交数据，如获取验证码，搭配js -->
        <input type="button" name="" id="" value="button">
        <!-- file,文件域,如上传文件，上传头像 -->
        <input type="file" name="" id="">
        <!-- label:绑定表单元素,增加用户体验 -->
        <!-- label的for值对应后面的id值 -->
        <!-- id不同,name相同 -->
        <label for="male">男性</label><input type="radio" name="gender" id="male">
        <label for="famele">女性</label><input type="radio" name="gender" id="famele">
    </form>

    <!-- 2.select下拉表单元素 -->
    <!-- select + option -->
    <form action="">
        籍贯
        <select name="" id="">
            <option value="北京">北京</option>
            <option value="山东">山东</option>
            <option value="地球" selected=selected>地球</option>
        </select>
    </form>

    <!-- 3.文本域表单元素 -->
    <form action="">
        <textarea name="" id="" cols="30" rows="10">
        我最帅！
    </textarea>
        <input type="reset" name="" id="">
    </form>
</body>

</html>
  • 注册界面
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 构成 -->
    <!-- 表单域 表单控件 提示信息 -->

    <!-- 表单域：包含表单元素的区域 -->
    <form action="" method="" name="">
    </form>
    <!-- action=url地址，接受表单数据的服务器程序的url地址 -->
    <!-- mothod=提交方式 -->
    <!-- name=名字，区分其他表单域 -->

    <!-- 表单控件 -->
    <!-- name:区别表单元素,name=value的形式输送后台 -->
    <!-- type="属性值",有button.checkbox.file.text等 -->


    <!-- 1.input -->
    <!-- 账号text和密码password -->
    <form action="">
        <input type="text" maxlength="7"><br>
        <input type="password" name="pwd"><br>
        <!-- 单选按钮radio和复选框checkbox -->
        <!-- 单选按钮和复选框要有相同的name值 -->
        🚹<input type="radio" name="gender" id="" value="male" checked=checked>
        🚺<input type="radio" name="gender" id="" value="famele">
        <br>
        爱好：<input type="checkbox" name="hobby" value="playgame" checked=checked>
        打游戏
        <br>
        <!-- submit:提交按钮,将表单域form内数据发送给服务器 -->
        <!-- reset:清除表单数据,还原默认值 -->
        <input type="submit" name="" id="" value="注册">
        <input type="reset" name="" id="">
        <!-- button:不会提交数据，如获取验证码，搭配js -->
        <input type="button" name="" id="" value="button">
        <!-- file,文件域,如上传文件，上传头像 -->
        <input type="file" name="" id="">
        <!-- label:绑定表单元素,增加用户体验 -->
        <!-- label的for值对应后面的id值 -->
        <!-- id不同,name相同 -->
        <label for="male">男性</label><input type="radio" name="gender" id="male">
        <label for="famele">女性</label><input type="radio" name="gender" id="famele">
    </form>

    <!-- 2.select下拉表单元素 -->
    <!-- select + option -->
    <form action="">
        籍贯
        <select name="" id="">
            <option value="北京">北京</option>
            <option value="山东">山东</option>
            <option value="地球" selected=selected>地球</option>
        </select>
    </form>

    <!-- 3.文本域表单元素 -->
    <form action="">
        <textarea name="" id="" cols="30" rows="10">
        我最帅！
    </textarea>
        <input type="reset" name="" id="">
    </form>
</body>

</html>
超级帅的陈星宇
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html表单实验总结,html表单知识的相关总结
weixin_34307029的博客
06-09 2750
表单在网页中主要负责数据采集功能。一个表单有三个基本组成部分： 表单标签：这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。 表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。 表单按钮：包括提交按钮、复位按钮和一般按钮；用于将数据传送到服务器上的CGI脚本或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工作。1. ht...
html实训'总结,html5实习心得体会.docx
weixin_27180827的博客
07-08 4884
文档介绍：html5实****心得体会html5实****心得体会该怎么写呢?下面小编整理了html5实****心得体会,欢迎大家参考学****篇一:html5实****心得体会 21世纪的时期,中国的网络正在实飞猛进,大多的企业都是通过建立网站来进入企业宣传,通过企业网站来打广告,宣传产品、品牌推广,促进销售等方法来实现企业营利的目的。所以,中国的互联网在中国的近几年来,有了非常大的发展空间,如...
HTML+CSS学习总结
weixin_53351919的博客
06-26 2800
html+css学习总结
php 输出html 总结
chihouzi的博客
06-29 1万+
while($row = $result->fetch_assoc()) { echo "<a href={$row['link']} title=''> {$row['name']}</a></br>"; }
HTML和CSS总结
m0_46275263的博客
06-15 3273
前端三剑客之二：HTML和CSS的初步了解
html5项目总结
weixin_40388697的博客
11-30 5743
HTML5项目总结 总的来说，我们组能在短短的一周的时间里把项目完成，我们还是都挺开心的。 不过在此期间也有些不足之处和小小的遗憾。 毕竟第一次做项目，我也是第一次开始管理项目。所以一开始我主要是给每个组员一个大部分的内容要求他们完成。但渐渐的我开始发现效率低到我们跟本没办法按时完成整个项目。在此期间我也认真的观察了组员们做的进度和在此期间犯的错误。 由于第二天组员们给我的成果根本不
超详细html5登录注册页面总结
weixin_45738504的博客
03-28 1万+
一、HTML5简介 HTML是互联网上应用最广泛的标记语言。HTML文件就是普通文本+HTML标记，而不同的HTML标记能表示不同的效果。 HTML5优势 HTML5并不是一种革新的的升级，而是一种向规范向习惯的妥协，因此HTML5并不会带给开发者过多的冲击，从HTML4到HTML5过渡会非常轻松。 HTML5解决了以下四点问题 ： 解决跨浏览器问题 部标签代替了原来的JavaScript 更明确的语义支持 增强了web应用程序和功能 二、我的第一个网页 下面在ideal中先写一个第一个网页，测试一下环
HTML5 基础知识总结(全)
IT_Holmes的博客
04-22 7319
HTML 一1.文档类型2.字符集3.标签< h1 >到< h6 >4.文本格式化标签（熟记）5.标签属性6.图像标签img 学习HTML推荐使用Sublime Text软件来操作练习，一定要熟练使用这个软件，对以后的无论是工作还是学习都有很大帮助。 1.文档类型<!DOCTYPE> <!DOCTYPE html> 这句活就是告诉我们使用那个html版本。 只需要记住，看到上面这行代码，说明使用的是html5的版本。 2.字符集 <meta chars
HTML知识点总结大纲
super_Fake的博客
11-30 5833
HTML知识点总结 一.基本知识 HTML 指的是超文本标记语言: HyperText Markup Language HTML 标记标签通常被称为 HTML 标签 (HTML tag) <标签>内容</标签> HTML 元素包含了开始标签与结束标签，元素的内容是开始标签与结束标签之间的内容，元素属性是 HTML 元素提供的附加信息。 基本HTML 网页结构如下，body标签内的才是我们在浏览器上所视内容 <!DOCTYPE html>声明为 HTML5 文档 &
HTML——基础知识点总结
热门推荐
m0_61016904的博客
10-30 2万+
HTML总结 一.HTML简介 1.HTML HTML(HyperText Markup Language),超文本标记语言，使用各种标记来表示文档的结构以及标识超链接的信息。 2.HTML文档 HTML文档包含了标签及文本内容，并且 html 文档也叫做 web 页面。 二.HTML基本结构 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> 菜鸟教程（runoob.com
html新手总结1
01-02
html,希望大家给点分，我下载个结业，求你们了，ok不，
HTML+CSS总结.doc
11-17
"HTML+CSS总结" HTML（HyperText Mark-up Language）是目前网络上应用最为广泛的语言，也是构成网页文档的主要语言。HTML 文本是由 HTML 命令组成的描述性文本，HTML 命令可以说明文字、图形、动画、声音、表格、...
HTML标签总结
07-27
HTML标签总结，详细
HTML 知识点总结
01-02
HTML 知识点总结 HTML 知识点总结 HTML 知识点总结 HTML 知识点总结
HTML常用标签总结
03-09
经过一段时间的学习，对于HTML也有了基础的认识。所以我就一点点的总结一下各类常用的标签的用法。
HTML5实现好看的天气预报网站源码
xcLeigh
07-18 1161
HTML5实现好看的天气预报网站源码，天气预报大作业，网站源码，天气预报网站，天气预报网站源码，这里可以灵活配置要显示的省市区的天气预报，这里用的是北京、上海、广州、深圳、台湾五个地区的天气预报。免费的数据接口，数据API，童话故事API，笑话API，名言API，提供免费天气预报接口，各种新闻资讯类、生活服务类、趣味娱乐类、功能应用类、知识问答类、数据智能类等API接口数据提供。兼容手机端和PC网页端。各种风格都有，代码上手简单，代码独立，可以直接使用。也可直接预览效果。
使用 React 和 Redux 进行井字游戏并附带源代码.zip
最新发布
07-24
项目：使用 React 和 Redux 进行井字游戏并附带源代码 使用 react 和 redux 的井字游戏是一个简单的 react 项目。整个项目都是使用 react components 和redux制作的。游戏很简单，玩法也很多。要运行此项目，您必须先安装 NodeJS。 关于项目 井字游戏反应而 redux 是使用ReactJS开发的。说到这个游戏，它具有高级功能和游戏玩法。要运行此项目，首先，您必须安装费用到您的系统。然后运行npm安装然后开始运行npm开始。游戏启动后，您可以选择不同的游戏选项。您还可以选择所需的网格框数量。此外，您还可以选择对手的类型。 要运行此项目，您需要 在计算机上安装NodeJS 并使用现代浏览器，例如 Google Chrome、  Mozilla Firefox。 演示： 该项目为国外大神项目，可以作为毕业设计的项目，也可以作为大作业项目，不用担心代码重复，设计重复等，如果需要对项目进行修改，需要具备一定基础知识。 注意：如果装有360等杀毒软件，可能会出现误报的情况，源码本身并无病毒，使用源码时可以关闭360，或者添加信任。
使用 JavaScript 编写的专注力游戏（附源代码）.zip
07-24
项目：JavaScript 中的专注力游戏（附源代码） 专注力游戏是一个使用 JavaScript、CSS 和 HTML 开发的简单项目。这款游戏很有趣。玩家必须点击移动的框并获得分数。要点击正确的位置，玩家需要在这个游戏中集中注意力。这款游戏可以帮助玩家练习以进一步增强他们的专注力。 游戏制作 这个游戏项目仅使用 HTML、CSS 和 JavaScript。说到这个游戏的特点，用户必须单击移动框并得分。游戏有三种模式：简单、中等和困难。游戏的 PC 控制非常简单。您只需使用光标单击移动框的碎片即可。 该游戏包含大量的 javascript 以确保游戏正常运行。 如何运行该项目？ 要运行此游戏，您不需要任何类型的本地服务器，但需要浏览器。我们建议您使用现代浏览器，如 Google Chrome 和 Mozilla Firefox。要玩游戏，首先，单击 index.html 文件在浏览器中打开游戏。 演示： 该项目为国外大神项目，可以作为毕业设计的项目，也可以作为大作业项目，不用担心代码重复，设计重复等，如果需要对项目进行修改，需要具备一定基础知识。 注意：如果装有360等杀毒软件，可能会出现误报的情况，源码本身并无病毒，使用源码时可以关闭360，或者添加信任。
人脸识别方案资料61EDA-C1590.zip
07-24
人脸识别方案资料61EDA_C1590.zip
HTML常用标签总结及用法实例
经过一段时间的学习，对于HTML也有了基础的认识。在网页基本结构中，一个HTML网页最基本由网页头...希望通过对HTML常用标签的总结和学习，能够帮助大家更好地理解和应用HTML标签，为日后的网页开发工作打下坚实的基础。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值