HTML教程

于 2022-05-18 00:06:59 发布
阅读量310 收藏
点赞数
文章标签： html css safari java 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45176111/article/details/124833279
版权

文章目录

HTML

1. HTML 概述
	超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。HTML是一种基础技术，常与CSS、JavaScript一起被众多网站用于设计网页、网页应用程序以及移动应用程序的用户界面[3]。网页浏览器可以读取HTML文件，并将其渲染成可视化网页。HTML描述了一个网站的结构语义随着线索的呈现，使之成为一种标记语言而非编程语言。
	2014年！！！
		HTML 5作为W3C推荐标准发布。

关于浏览器
	推荐 谷歌，火狐，Safari
	推荐 360 极速浏览器
2. 第一个 HTML 代码
<html>
<head>
	<title>第一个HTML页面</title>
	<meta charset="utf-8"/>
</head>
<body>
	<h1>你好 HTML</h1>
</body>
</html>
3. HTML 标签分类
双边标签:
	<html></html>
	<head></head>
	有开始标签，有结尾标签，结尾标签带有 </> 标记

单边标签:
	<meta charset="utf-8"/>
	一个标签结束，没有结尾标签，在当前标签中直接利用 / 结尾

可以根据 HTML 规范在 HTML 标签中加入【属性】
	charset="utf-8"
		charset 属性名	
		"utf-8" 属性值，属性值内容可以使用 "", ''包含 或者直接使用

结构:
	<html> 
		<head></head>
		<body></body>
	</html>
	
	html 告知解析器当前文本为 HTML 规范文本
	head 可以存储标题<title> 页面配置，页面引用，包括页面 JS JQ 代码 
	body 对应页面内容，所见即所得！！！

HTML 标签不区分大小写，一般都是小写，方便~~~
4. HTML基本标签
4.1 结构标签
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>02-HTML基本标签结构</title>
</head>
<body>
<!-- ]
这个颜色像什么????
    注释      ctrl + /
    标签名 + tab 键 自动补齐
    多个标签一起生成 标签名*n + tab 键 自动生成
-->
<h1>欢迎来到 ~~~</h1>

</body>
</html>
4.2 排版标签
注释
	<!-- 注释内容 -->
换行
	<br/>
	Enter 键在 HTML 页面中不认为是换行，而且一个字符
段落:
	<p>文本内容</p>
	新闻页面，咨询页面，都会大量使用 p 标签
	属性:	
		align 对齐方式 (left, center, right)
水平分割线
	<hr/>
	属性:
		align 对齐方式  (left, center, right)
		width 水平线的长度，单位一般采用 px 像素 或者可以使用百分比
		size 水平线的粗细 像素单位
		color 水平线的颜色 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>03-HTML排版标签</title>
</head>
<body>
<p align="center">美国某政客，"战略性阳性"，合理避免中美冲突</p>
<p align="center">美国某政客，"战略性阳性"，合理避免中美冲突</p>
<p align="center">美国某政客，"战略性阳性"，合理避免中美冲突</p>
<p align="center">美国某政客，"战略性阳性"，合理避免中美冲突</p>
<hr width="50%" size="20px" color="yellowgreen" align="right">
<!-- Enter 回车在 HTML 页面中视觉效果不是一个换行 需要使用 br 完成-->
美国某政客，"战略性阳性"，合理避免中美冲突 <br>
美国某政客，"战略性阳性"，合理避免中美冲突 <br>
美国某政客，"战略性阳性"，合理避免中美冲突 <br>
美国某政客，"战略性阳性"，合理避免中美冲突 <br>

</body>
</html>
4.3 块标签和行内标签
块标签
	div
	单独成行，具备宽高属性

行内标签
	span
	所有内容都在一行，不具备宽高属性

目前页面开发基本模块
	CSS+DIV

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>04-HTML块标签和行内标签</title>
</head>
<body>
<!-- 使用CSS修饰 div 和 span 标签，演示部分属性 -->

<!-- tips: div 标签是一个块标签，具备宽高属性 -->
<div style="width: 200px; height: 200px; background-color: red">Java</div>
<div style="width: 200px; height: 200px; background-color: blue">Java</div>
<div style="width: 200px; height: 200px; background-color: green">Java</div>
<hr>
<!-- tips: span 表示一个行内标签，不具备宽高属性 -->
<span style="width: 200px; height: 200px; background-color: red">BigData</span>
<span style="width: 200px; height: 200px; background-color: blue">BigData</span>
<span style="width: 200px; height: 200px; background-color: green">BigData</span>
</body>
</html>
4.4 文本标签【已过时】
font 标签已过时，重点是在前端页面，文本设置所关注的属性
属性:
	size 字体大小 最大为 7 最小为 1
	color 字体颜色
	face  字体样式 例如 黑体，微软雅黑，阿里普惠...

文本/字体
	size 尺寸
	color 颜色
	face 样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>05-HTML字体文本标签</title>
</head>
<body>
<!--
size 1 ~ 7
color
    1. 可以使用颜色对应的英文单词
    2. RGB模式 Red Green Blue
-->
<font size="1" color="red" face="黑体">**有点东西~~~~</font><br>
<font size="2" color="green" face="幼圆">**有点东西~~~~</font><br>
<font size="3" color="black" face="宋体">**有点东西~~~~</font><br>
<font size="4" color="blue" face="隶书">**有点东西~~~~</font><br>
<font size="5" color="#9acd32" face="楷体">**有点东西~~~~</font><br>
<font size="6" color="#adff2f" face="微软雅黑">**有点东西~~~~</font><br>
<font size="7" color="#ff69b4" face="楷体">**有点东西~~~~</font><br>
</body>
</html>
4.5 文本格式标签
标签格式作用
b< b>< /b>加粗
strong< strong>< /strong>加粗
em< em>< /em>斜体
i< i>< /i>斜体
small< small>< /small>缩小
big< big>< /big>放大
sub< sub>< /sub>下标
sup< sup>< /sup>上标
del< del>< /del>删除
u< u>< /u>下划线
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>06-HTML文本格式标签</title>
</head>
<body>
<b>耿某淘宝购买口红，惨遭欺骗</b> <br>
<strong>耿某淘宝购买口红，惨遭欺骗</strong> <br>
耿某淘宝购买口红，惨遭欺骗 <br>

<hr>
<em>李某森控诉 mac 口红没有味道</em><br>
<i>李某森控诉 mac 口红没有味道</i><br>
李某森控诉 mac 口红没有味道 <br>
<hr>

<small>王·SingleDog·某·FPSP·平表示羡慕嫉妒恨</small><br>
<big>王·SingleDog·某·FPSP·平表示羡慕嫉妒恨</big><br>
王·SingleDog·某·FPSP·平表示羡慕嫉妒恨 <br>
<hr>

<b><big>王某平</big></b><sub>单身狗</sub> <br>
<b><big>王某平</big></b><sup>没朋友</sup> <br>
<hr>

<del>王*羡慕王某平使用 b 标签</del><br>
<u>王*羡慕王某平使用 b 标签</u>
</body>
</html>
4.6 标题标签
h1 ~ h6
	h1 最大
	h6 最小
基本特征:
	文本加粗，单独成行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>07-HTML标题标签</title>
</head>
<body>
<!--
h1 ~ h6 用于标题
    Markdown 文档中也是利用类似的内容
【注意】
    h1 标签在单个 HTML 页面中，建议有且只有一个。
    SEO 优化问题
    h1 标签用于描述整个页面的核心内容。有且只有一个，方便搜索引擎进行数据检索
    meta 标签中有两个属性页常用于 SEO 优化
        description 网站描述
        keywords 关键字
-->
<h1>春暖花开，等你归来</h1>
<h2>春暖花开，等你归来</h2>
<h3>春暖花开，等你归来</h3>
<h4>春暖花开，等你归来</h4>
<h5>春暖花开，等你归来</h5>
<h6>春暖花开，等你归来</h6>
</body>
</html>
4.7 列表标签
无序列表
	<ul></ul>
有序列表
	<ol></ol>

列表元素全部是 
	<li></li>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>08-HTML列表标签</title>
</head>
<body>
<!--
无序列表
可以修改列表属性
    type 属性 限制标记样式
        circle 空心圆
        square 方块
        none 无标记
        disc 实心圆[缺省属性]
-->
<ul type="disc">
    <li>绿茶</li>
    <li>红茶</li>
    <li>普洱</li>
    <li>白茶</li>
    <li>乌龙</li>
</ul>
<hr>
<!--
有序列表
    type 属性 限制标记样式
        A 大写英文字母
        a 小写英文字母
        I 大写罗马数字
        i 小写罗马数字
        1 [缺省属性]
    start 属性 限制标记起始
        标记 从哪里开始
-->
<ol type="A" start="1000">
    <li>茅台</li>
    <li>五粮液</li>
    <li>汾酒</li>
    <li>西凤</li>
    <li>剑南春</li>
</ol>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>09-HTML列表嵌套</title>
</head>
<body>
<ul type="none">
    <li>茶
        <ul type="none">
            <li>绿茶</li>
            <li>红茶</li>
            <li>白茶</li>
        </ul>
    </li>
    <li>咖啡
        <ul type="none">
            <li>拿铁</li>
            <li>美式</li>
            <li>摩卡</li>
        </ul>
    </li>
    <li>酒
        <ul type="none">
            <li>茅台</li>
            <li>怼酒</li>
            <li>西凤</li>
        </ul>
    </li>
</ul>
</body>
</html>
4.8 图形标签
img 标签
	可以引入图片
属性:
	src 图片地址，可以是本机服务器地址，也可以是网络地址
	width 宽度，很少用
	height 高度，很少用
	border 边框
	align 对齐方式
	alt 提示信息

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>10-HTML图片标签</title>
</head>
<body>
<img src="./img/71821afd36a8a24c91c6e119fdde5841.png" alt="路见不平一声吼，大哥没有男朋友"> <br>
<hr>
<img src="https://www.baidu.com/img/PCfb_5bf082d29588c07f842ccde3f97243ea.png"
     alt="迪丽热巴"
width="50%"
height="50%"
border="10px"> <br>
<hr>
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg1.doubanio.com%2Fview%2Frichtext%2Flarge%2Fpublic%2Fp248982557.jpg&refer=http%3A%2F%2Fimg1.doubanio.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1651993398&t=84f0be289161e998c483342c7c30d059"
     alt="迪丽热巴"
> <br>
</body>
</html>
4.9 链接标签
a 标签
	可以在当前页面跳转到其他页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>11-HTML链接标签</title>
</head>
<body>
<!--
href
    决定当前链接目标网站，可以是网络URL 也可以本机路径
target:
    _blank 新窗口打开
    _self  本窗口打开
 -->
<a href="https://www.jiayuan.com" target="_blank">王某平官网</a> <br>
<a href="https://www.zhenai.com" target="_self">王某平官网</a> <br>
<hr>
<a href="10-HTML图片标签.html">王某平想要得不到</a> <br>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>12-HTML锚点实现</title>
</head>
<body>
<a name="top"></a> <br>
<a href="#middle" style="color: red; font-size: 32px">页面中部</a><br>
<a href="#bottom" style="color: red; font-size: 32px">页面底部</a><br>
<p>路见不平一声吼，北平没有男朋友，两只黄鹂鸣翠柳，北平是个单身狗 -- 无题 作者 匿名君</p>
<p>路见不平一声吼，北平没有男朋友，两只黄鹂鸣翠柳，北平是个单身狗 -- 无题 作者 匿名君</p>

<a name="middle"></a> <br>
<a href="#top" style="color: green; font-size: 32px">页面顶部</a><br>
<a href="#bottom" style="color: green; font-size: 32px">页面底部</a><br>
<p>路见不平一声吼，北平没有男朋友，两只黄鹂鸣翠柳，北平是个单身狗 -- 无题 作者 匿名君</p>
<p>路见不平一声吼，北平没有男朋友，两只黄鹂鸣翠柳，北平是个单身狗 -- 无题 作者 匿名君</p>

<a name="bottom"></a> <br>
<a href="#top" style="color: blue; font-size: 32px">页面顶部</a><br>
<a href="#middle" style="color: blue; font-size: 32px">页面中部</a><br>
</body>
</html>
4.10 表格标签
<table>
	表格标签
tr
	行标签
td 	
	列标签
th
	表头标签/列标签
5. form 表单【重点】
5.1 form 表格基本样式和提交方式分析
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>15-HTML form表单基本样式和数据提交方式</title>
</head>
<body>
<!--
form 表单，用于提交数据到后台的一种方式
属性：
    action 提交数据的目标地址，资源路径
    method 提交数据的方式
        GET
            在 URL ? 之后，有对应的请求数据内容 数据模式为 Key=Value 模式，数据按照 & 区分
            username=James&password=123456

            1. 明文传递，在URL中传递对应参数
            2. 不安全
            3. 效率高
            4. GET 请求有数据量限制，大约可以提交数据的极限是 2KB。一般用于搜索操作！！！

        POST
            通过 【请求实体】传递数据，数据形式也是对应  Key=Value 模式，数据不存在与 URL 中

            1. 通过【请求实体】传递数据，数据有一定的安全性和私密性
            2. 安全性还OK，可以通过一些插件进行加密操作。
            3. 效率较低
            4. POST 请求数据量理论没有限制，可以用于数据上传，可以解决修改，更新，删除，数据上传等操作。

-->
<h5>GET请求方式</h5>
<form action="16-测试文件.html" method="get">
    <!--
    input 输入框
        type 决定当前输入框的类型
            text      文本类型，可视化文本类型
            password  密文类型
            submit    提交按钮，触发按钮
    -->
    <span>用户:</span><input type="text" name="username"> <br>
    <span>密码:</span><input type="password" name="password"> <br>
    <input type="submit" value="提交">
</form>

<hr>
<h5>POST请求方式</h5>
<form action="16-测试文件.html" method="post">
    <span>用户:</span><input type="text" name="username"> <br>
    <span>密码:</span><input type="password" name="password"> <br>
    <input type="submit" value="提交">
</form>
</body>
</html>
5.2 表单提交数据类型
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>16-HTML表单提交数据形式</title>
</head>
<body>
<!--
input type 属性类型分析
    text
    password
    radio 单选 要求: name 属性必须一致 如果需要默认选中使用标记 checked
    checkbox 多选 要求: name 属性必须一致 如果需要默认选中使用标记 checked
    date 日期
    file 文件

select 下拉菜单
    option 是菜单项 默认选择 selected

textarea 文本框

在 form 表单中需要提交的数据内容必须有 name 属性，如果没有无法提交
-->
<form action="16-测试文件.html" method="get">
    <span>用户:</span> <input type="text" name="username"> <br>
    <span>密码:</span> <input type="password" name="password"> <br>
    <span>性别:</span> <input type="radio" name="gender" value="0"> 男
                        <input type="radio" name="gender" value="1" checked> 女 <br>
    <span>爱好:</span> <input type="checkbox" name="hobby" value="0" checked> 篮球
                        <input type="checkbox" name="hobby" value="1"> 足球
                        <input type="checkbox" name="hobby" value="2"> 排球
                        <input type="checkbox" name="hobby" value="3"> 台球 <br>
    <span>生日:</span> <input type="date" name="birth"> <br>
    <span>头像:</span> <input type="file" name="icon"> <br>
    <span>城市:</span> <select name="city">
                            <option value="0">安阳</option>
                            <option value="1">信阳</option>
                            <option value="2" selected>荥阳</option>
                            <option value="3">洛阳</option>
                            <option value="4">南阳</option>
                        </select> <br>
    <span>简介:</span> <textarea name="info"></textarea> <br>
    <input type="submit" value="提交">
</form>
</body>
</html>
Coutures
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html教程源码
01-05
这个“html教程源码”显然是一份关于学习和理解HTML的资源集合。在这个压缩包中，可能包含了一系列的HTML示例代码、讲解文档或者教学视频，旨在帮助初学者或开发者深入掌握HTML的基本结构、元素和属性。 HTML教程...
HTML学习
最新发布
weixin_66989547的博客
06-07 1164
HTML（Hyper Text Markup Language）是一种用于创建网页的标记语言。它是一种开放标准，由万维网联盟（W3C）制定和维护。HTML的目的是为网页开发人员提供一种简单、灵活的语言，用于创建各种类型的网页内容，包括文本、图像、链接、表格、表单等。HTML的历史可以追溯到1990年代初，当时互联网还处于起步阶段。最早的HTML版本是HTML 1.0，它只包含少数几个标签，如＜P＞、＜H1＞、＜A＞等。随着互联网的不断发展和普及，HTML也不断更新和发展。
HTML入门教程
乐于探索,乐于奉献,追求极致,向往生活
09-02 739
初学前端内容，首先要学的当然是H5喽！目前HTML版本一直在演化，迭代；在了解HTML之前我们应该了解下基于Internet内容；Internet-（网）：由若干台电脑、手机、平板 通过 网线(WIFI) 连接起来的结构。 基于Internet上的程序         1、C / S 结构：Client / Server          特点：必须通过指定的客户端软件才能访问服务器端的一种...
html教程
qq_38266792的博客
05-31 1265
HTML（HyperText Markup Languag）1.代码格式：  &lt;!doctype html&gt;                 // html的声明  &lt;html lang="en"&gt;                // html的编码语言  &lt;head&gt;                        // html的网页头部   &lt;meta...
清华大学html教程
07-23
清华大学的HTML教程以其权威性和系统性，深受广大编程初学者的欢迎。这个教程不仅覆盖了HTML的基本语法，还深入探讨了其在实际网页设计中的应用。 HTML教程通常包括以下几个核心知识点： 1. **HTML基本结构**：...
三本Html教程合集下载.zip
08-02
这三本HTML教程合集为初学者和进阶者提供了丰富的学习资源，旨在帮助读者掌握网页制作的基础和高级技巧。 《HTML从入门到精通》是针对初学者设计的一本教程，它详细介绍了HTML的基本结构和语法，包括如何创建文档...
HTML教程(最全的图文并茂教程).ppt
05-07
HTML教程(最全的图文并茂教程)
HTML教程全集
10-15
HTML教程，资源来源于w3school网站，希望能对各位有所帮助
html教程全
07-30
html经典教程，绝对推荐！（HTML（Hyper Text Markup Language 超文本标识语言） 是一种用来制作超文本文档的简单标记语言。 用HTML编写的超文本文件称为HTML文件，也称Web文件。）
HTML教程资源
09-21
一份关于HTML学习的资源文档，适合初学者使用。是一些入门的基础知识。
最实用最详细HTML教程.
04-17
详细HTML教程
html5完整教程
01-09
超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。 您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。 在本教程中，您将学习如何使用 HTML 来创建站点。 HTML 很容易学习！相信您能很快学会它！
HTML 教程
twosecond
05-07 424
HTML 教程http://www.w3school.com.cn/html/index.asp
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值