HTML笔记整理

最新推荐文章于 2021-11-29 09:06:01 发布
最新推荐文章于 2021-11-29 09:06:01 发布
阅读量324 收藏
点赞数
文章标签： html python html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38874239/article/details/111245505
版权

HTML入门

HTML基础

在这里插入图片描述HTML总体来说是由head和body组成的标签语言。
在这里插入图片描述而标签语言分为自闭和标签体。
如下是一个HTML文件的模板：

<!DOCTYPE html>     <!--<!DOCTYPE> 标签位于文档的最前面，用于向浏览器说明当前文档使用哪种 HTML 或 XHTML 标准规范-->
<html lang="en">
<!--向搜索引擎表示该页面是html语言，并且语言为英文网站，其"lang"的意思就是“language”，语言的意思，而“en”即表示english-->
<!--你的页面如果是中文页面，可将其改为
<html lang="zh">-->
<head>
    <meta charset="UTF-8">  <!--确定字符集（自闭合标签）-->
    <title>Title</title>  <!--定义头部(标签)的标题-->
</head>
<body>

</body>
</html>

在这里插入图片描述

head

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="refresh" content="5; url=https://www.baidu.com/" />
    <!--三秒刷新并跳转百度-->
    <title>Title</title>
</head>
<body>

</body>
</html>

描述信息（name=“description”）
我们打开检查就可以看见

常用标签

在这里插入图片描述


<body>
    劝君更尽一杯酒<br>
    西出阳关无故人
</body>

在这里插入图片描述

<body>
    <p>劝君更尽一杯酒</p> <!--默认左边-->
    <p align="center">劝君更尽一杯酒</p> <!--居中-->
    <p align="right">劝君更尽一杯酒</p> <!--右边-->
    <p align="left">劝君更尽一杯酒</p>

在这里插入图片描述

<body>
    <h1>劝君更尽一杯酒</h1> <!--默认左边-->
    <h2 align="center">劝君更尽一杯酒</h2> <!--居中-->
    <h3 align="right">劝君更尽一杯酒</h3> <!--右边-->
    <h4 align="left">劝君更尽一杯酒</h4>

</body>

在这里插入图片描述

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    &nbsp;&nbsp;劝&nbsp;&nbsp;&nbsp;君更尽一杯酒&nbsp;ddd
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <a href="https://www.baidu.com/">百度</a>
</body>
</html>

在这里插入图片描述

<body>
    <span>百度，谷歌</span>
    <span>百度，谷歌</span>
    <div>百度，谷歌</div>
    <div>百度，谷歌</div>

</body>

在这里插入图片描述
在这里插入图片描述

登录框和按钮

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"> <!--定义格式-->
    <title>Title</title>
</head>
<body>
    <form action="" method="GET"> <!--提交数据-->
        <input type="text" name="user" /> <!--文本框--><!--name属性-->
        <input type="password" name="pwd" /><!--密码--><!--name属性-->
        <input type="button" value="登录1" /><!--按钮--><!--name属性-->
        <input type="submit" value="登录2" /><!--提交--><!--name属性-->
    </form>
</body>
</html>

在这里插入图片描述

按钮案例

<form action="提交地址" method="提交方式">表单内容</form>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form action="https://www.baidu.com/baidu">
        <input type="test" name="wd" />
        <input type="submit" value="搜索" />

    </form>
</body>
</html>

在这里插入图片描述

HTML input

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form enctype="multipart/form-data">
        <div>
            <input type="text" name="user" />
            <p>请选择性别：</p>
            男：<input type="radio" name="gender" value="1" checked="checked"/>
            <!-- checked="checked"默认被选中-->
            <!-- radio单选框，name相同则互斥-->
            女：<input type="radio" name="gender" value="2"/>
            cat：<input type="radio" name="gender" value="3"/>
            <p>爱好</p>
            <!-- checkbox多选框，name批量获取数据-->
            篮球<input type="checkbox" name="favor" value="1" />
            唱<input type="checkbox" name="favor" value="2" />
            跳<input type="checkbox" name="favor" value="3" />
            <p>技能</p>
            LINUX:<input type="checkbox" name="skill" />
            CENTOS:<input type="checkbox" name="skill" />
            <p>上传文件</p>
            <input type="file" name="fname">

        </div>
        <input type="submit" value="提交" />
        <input type="reset" value="重置">

    </form>
</body>
</html>

a标签

用a标签处理章节太长

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <a href="#i1">第一章</a>
    <a href="#i2">第二章</a>
    <a href="#i3" >第三章</a>
    <a href="#i4">第四章</a>
    <a href="#i5">第五章</a>
    <!--_blank开启新的一个网页-->
    <div id="i1" style="height:600px;">第一章的内容</div>
    <!--600像素-->
    <div id="i2" style="height:600px;">第二章的内容</div>
    <div id="i3" style="height:600px;">第三章的内容</div>
    <div id="i4" style="height:600px;">第四章的内容</div>
    <div id="i5" style="height:600px;">第五章的内容</div>
</body>
</html>


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <a href="http://www.baidu.com">
    <img src="萤火虫.jpg" title="百度" style="height: 200px;width: 400px;" alt="百度">
    </a>
</body>
</html>

标准表的书写

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <table border="1">
        <thead><!--表头-->
        <tr>
            <th>第一行，第1列</th><!--改为th-->
            <th>
                <a href="http://www.baidu.com">check </a>
                第一行，第2列
            </th>

            <th>第一行，第3列</th>
        </tr>
        </thead>
        <tbody>
            <tr>
                <td>第二行，第1列</td>
                <td>第二行，第2列</td>
             <td>第二行，第3列</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

合并单元格

<td colspan="2">第二行，第1列</td> <!--合并单元格-->

向下合并单元格

<td rowspan="2">第二行，第2列</td> <!--向下合并单元格-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <fieldset>
        <legend>登录</legend>
        <label for="username">用户名：</label>  <!--for 创建关联-->
        <input id="username" type="test" name="user" />
        <br>
        <label for="pwd">密码：</label>  <!--for 创建关联-->
        <input id="pwd" type="test" name="user" />
    </fieldset>
</body>
</html>


<!--label   用于点击文件，使得关联的标签获取光标-->
qq_38874239
关注
2021-05-12
m0_57516003的博客
05-12 1031
html+css构成了我们网页的基本页面结构和样式 <html>标签位于HTML文档的最前面，用来标识HTML文档的开始；</html>标签位于HTML文档的最后面，用来标识HTML 文档的结束；这两个标签对成对存在，中间的部分是文档的头部和主题。 .<body></body>标签对：它是HTML文档的主体部分 html文件注释 这时就需要<p>标签了，把文章的段落放到<p>标签中。 <span>标签..
html完整教程(<html>标志用于Html文档的最前边，用来标识Html文档的开始。)
12-14
Html是英文 HyperText Markup Language 的缩写，中文意思是“超文本标志语言”，用它编写的文件(文档)的扩展名是.html或.htm，它们是可供浏览器解释浏览的文件格式。您可以使用记事本、写字板或 FrontPage Editor 等编辑工具来编写Html文件。Html语言使用标志对的方法编写文件，既简单又方便，它通常使用<标志名></标志名>来表示标志的开始和结束(例如<html></html>标志对)，因此在Html文档中这样的标志对都必须是成对使用的。在此教程中，我先讲一下Html的基本标志： 1.<html></html> <html>标志用于Html文档的最前边，用来标识Html文档的开始。而</html>标志恰恰相反，它放在Html文档的最后边，用来标识Html文档的结束，两个标志必须一块使用。 2.<head></head> <head>和</head>构成Html文档的开头部分，在此标志对之间可以使用<title></title>、<script></script>等等标志对，这些标志对都是描述Html文档相关信息的标志对，<head></head>标志对之间的内容是不会在浏览器的框内显示出来的。两个标志必须一块使用。 3.<body></body> <body></body>是Html文档的主体部分，在此标志对之间可包含<p>、</p>、<h1>、</h1>、<br>、<hr>等等众多的标志，它们所定义的文本、图像等将会在浏览器的框内显示出来。两个标志必须一块使用。<body>标志中还可以有以下属性：
位于html文档的最前面,位于HTML文档的最前面，用于向浏览器说明当前文档使用哪种 HTML 或 XHTML 标准规范的标记是...
weixin_34523442的博客
06-07 3145
图形是一种说明性的 ( )，位于文档在纸或其它表面上表现为形状、绘画、摄影、象形文字等。浏览ECM最档使LCD前面器说前文Thefeedisdefinedasthedistancethecuttingtoolprojectsbelowtheoriginalsurfaceofthework-piece.用于向用Machiningisthemanufacturinginwhichtheworkersc...
html中最前面的标记,HTML5中的标记方法
weixin_35843569的博客
06-21 1182
1.内容类型(ContentType)DOCTYPE声明是HTML文件中必不可少的，它位于文件的第一行。在HTML 4中，它的声明方法如下： 在HTML 5中，不需要使用版本声明，一份文档将会适用与所有的HTML版本。HTML 5中的DOC TYPE声明方法(不区分大小写)如下：什么是DOCTYPE 声明位于文档中的最前面的位置，处于 标签之前。此标签可告知浏览器文档使用哪种 HTML 或...
html语言中文档最前面的标记,位于HTML文档的最前面，用于向浏览器说明当前文档使用哪种HTML或XHTML标准规范的标记是（）。...
weixin_39640195的博客
06-03 4446
位于HTML文档的最前面，用于向浏览器说明当前文档使用哪种HTML或XHTML标准规范的标记是()。更多相关问题实现多地控制时,只要将起动按钮串联、将停止按钮并联即可。( )下列度量单位用来度量CPU时钟主频的是______。某女士,25岁,孕2产1。自诉第一胎分娩历时4小时。现妊娠39周,阵发性宫缩约30分钟急诊入院,检查:宫缩持续50秒,间歇约2分钟,宫口开3cm,先露头,胎膜未破,先...
张鹏老师html笔记整理
12-15
HTML，全称HyperText Markup Language，即超文本标记语言，是一种用于创建网页的标准标记语言，而非编程语言。它主要用于描述网页的内容和结构，使浏览器能够理解并呈现网页内容。HTML文档通常由一系列的元素（标记...
张鹏老师html笔记整理了很久
03-23
HTML，全称HyperText Markup Language，即超文本标记语言，是一种用于创建网页的标准标记语言，而非编程语言。HTML文档由一系列元素组成，这些元素通过标签来定义，它们描述了网页的结构和内容。 在Lesson 1中，...
HTML笔记整理2 -- HTML标签
DonkeyL's
10-15 1575
笔记整理2 -- HTML标签关于标签(标记)标记的分类标记的属性重要的标记!DOCTYPE标签meta标签meta标签中的 --- 字符编码问题常用标记常用标记-1---段落、换行、水平线常用标记-2---字体设置标签---标题标签---列表有序列表无序列表自定义列表标签---链接分类空链接下载链接锚链接==关于路径==标签---图片标签---热点标签---flash标签---表格与表格相关的标...
html知识点笔记整理
03-29
HTML、CSS、JavaScript 基础知识点笔记 HTML HTML（HyperText Markup Language）是一种超文本标记语言，用于网页的创建和结构化。HTML 由标签组成，标签可以分为单标签和双标签。单标签只有一个组成，例如：` `...
HTML头部文档相关标记,html头部基本标记详解
weixin_29862397的博客
06-03 1487
1.2.3.4.Html是英文 HyperText Markup Language 的缩写，中文意思是“超文本标志语言”，用它编写的文件(文档)的扩展名是.html或.htm，它们是可供浏览器解释浏览的文件格式。您可以使用记事本、写字板或 FrontPage Editor 等编辑工具来编写Html文件。Html语言使用标志对的方法编写文件，既简单又方便，它通常使用标志名>来表示标志的开始和结...
文档中根元素前面的标记必须格式正确_HTML相关知识之文档声明标签——HTML学习之路（2）...
weixin_39723010的博客
12-01 889
上篇文章介绍了 注释标签，我个人感觉很容易理解，在日常编码中，大多数编辑器都有注释标签的快捷键，如sublime或VS code里在html代码里，选中想要注释掉的代码后，直接按ctrl+/即可。几乎不用手动输入了。还是很方便的。这篇我写标签，说起来这个标签，很常见，因为它会出现在每一个httml文档的最开头，然而，我们很少去重视它，为什么呢？说到这个标签，我不得不说起html的版本历史了。在大约...
《HTML5文档头部常用标签》
yk_ddm的博客
07-26 607
目录头部标签常用的头部标签标题标签元信息标签 头部标签 常用的头部标签 标题标签 <title></title> 元信息标签 <meta /> <!-- name: 可以为keywords、description、author --> <meta name="名称" content="值" /> <!-- 设置服务器发送给浏览器的http头部信息，即文件类型信息 --> <meta http-equiv="名称" content
web前端开发与应用——文档
m0_59742894的博客
11-29 413
title标签 title标签用于定义HTML页面的标题。它是双标签，开始和结束标签之间的内容就是要设置的页面标题。 它的作用是： 在浏览器的标题栏中显示标题 标题可以用作默认快捷方式或收藏夹的名称 标题还可以作为搜索引擎结果中的页面标题 应用时注意： 一个网页只能有一个标题 标题名称的长度不超过64个字符数 标题标记对之间不允许有其它的标签存在 用法示例： <title>个人网页</title> charset属性 在html5中，可直接通过meta标签的char
html文档头部标记
diexi9030的博客
11-27 1506
html文档头部标记 <head>头部标记</head> <title></title>(定义网页标题，显示在浏览器的标题栏中) <base/>（基底网址标记，用于设定浏览器中文件的绝对路径，网页中的文件只需要写相对路径就可以了） <link> <meat> <meat name="" ...
网页开发基础——HTML技术
liuxt_9的博客
08-04 1399
HTML：（超文本标记语言） 主要作用是通过HTML标记对网页中的文本、图片、声音等内容进行描述。 带< >符号的元素被称为HTML标记，标记是放在标记符（< >）中的用户表示某个功能的编码命令，也称为HTML标签或元素。 1.<!DOCTYPE>标记 位于文档最前面，用于向浏览器说明当前文档使用的是哪种HTML，如7-1使用的是HTML5。通常网页必须在开头处使用<!DOCTYPE>标记为所有的HTML文档指定HTML版本和类型。只有这样浏览器才能将该网页
位于html文档的最前面,位于HTML文档的最前面,用于向浏览器说明当前文档使用哪种 HTML 或 XHTML 标准规范的标记是...
weixin_31437187的博客
06-07 1645
【单选题】假定市场可以用国内生产总值(G)、利率(R)、消费者信心(C)三种因素及相对应的风险溢价进行描述,已知国内生产总值的风险溢价、利率的风险溢价、消费者信心的风险溢价分别为6%,2%和4%,假定无风险利率为6%,某股票的收益率可以由以下方程确定 r=20%+1.0G+0.5R+0.75C+e 那么该股票的均衡收益率为______,股票价格被________。【单选题】Which is not...
HTML说明当前文档使用,75．!DOCTYPE标记位于文档的最前面，用于向浏览器说明当前文档使用哪种HTML或XHTML标准规范。（）...
weixin_33554514的博客
06-04 1259
在没有特别的情况下，．DOCTYPE浏览我们一般讲的理想信念，在当代中国就是指( )只要有温度差存在，标记L标热量就会自发地由高温处传向低温处。( )位于文档Prior to the 1990’s, medical travel movements were mainly from northto south.最档使The Belt and Road Initiative has little i...
HTML 学习手册（常用的标签）
05-02 3393
HTML标签 1、 声明位于文档中的最前面的位置，处于 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。 PUBLIC"-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 2、 标签可定义锚 属性 取
达内Java全栈技术笔记整理
"达内Java_笔记整理" 是一份针对Java开发的学习资料，源自达内的培训课程，适合初学者和进阶者。这份笔记包含了Java核心概念、数据库操作、框架应用以及服务器端技术等多个方面的内容。 笔记整理内容概述： 1. **...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值