【日常学习】HTML介绍

最新推荐文章于 2022-12-19 14:48:35 发布
最新推荐文章于 2022-12-19 14:48:35 发布
阅读量215 收藏
点赞数
分类专栏： # java初学 文章标签： 后端 日常学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43410878/article/details/123819472
版权

文章目录

HTML

1. HTML
1.1 HTML概述
	超文本标记语言（英语：HyperText Markup Language，简称：HTML）
HTML5.0 W3C组织
	谷歌 火狐 Safari Edge IE 欧朋 
	360极速

HTML采用的方式是标签方式
1.2 Hello World HTML
<!doctype html>
<html>
	<head>
		<title>让你认识一个苟磊的前端有多菜</title>
		<meta charset="utf-8" />	
	</head>
	<body>
		Hello HTML!!!
		恕瑞玛，你们的皇帝又驾崩了...
	</body>
</html>

1. 这是html基本架构标签
	<html>
		<head></head>
		<body></body>
	</html>
	head标签内可以完成对应当前页面的补充操作
	body就是当前HTML页面

2. HTML标签有两种形式
	首尾标签 结尾标签存在一个结尾表示/
		<head></head> <title></title>
	单边标签(单身狗标签)
		<meta />
3. HTML标签不区分大小写，这里建议全小写，省事
4. body标签内容所见即所得
5. HTML标签是可以带有属性的
	<hr width="100px">
		属性名="属性值" 属性名='属性值' 属性名=属性值
1.3 HTML常用标签
1.3.1 排版标签
<p></p>
	段落标签！！！
<hr> 
	分割线
<br>
	换行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>03-排版标签</title>
</head>
<body>
<p>北京时间8月26日消息，据阿根廷TyC电视台报道，梅西已经通过传真告知巴萨他将离开，他将启用自己合同中每个赛季后允许其跳出合同的条款。</p>
<p>北京时间8月26日消息，据阿根廷TyC电视台报道，梅西已经通过传真告知巴萨他将离开，他将启用自己合同中每个赛季后允许其跳出合同的条款。</p>
<hr width="100px" align="center">
<hr>
<hr>
<p>北京时间8月26日消息，据阿根廷TyC电视台报道，梅西已经通过传真告知巴萨他将离开，他将启用自己合同中每个赛季后允许其跳出合同的条款。</p>
<p>北京时间8月26日消息，据阿根廷TyC电视台报道，梅西已经通过传真告知巴萨他将离开，他将启用自己合同中每个赛季后允许其跳出合同的条款。</p>
<p>北京时间8月26日消息，据阿根廷TyC电视台报道，梅西已经通过传真告知巴萨他将离开，他将启用自己合同中每个赛季后允许其跳出合同的条款。</p>
南美挑战者 <br>
AC米兰 <br>
尤文图斯 <br>
国际米兰 <br>
巴黎 <br>
</body>
</html>
1.3.2 块标签
<div></div>
	块标签
<span></span>
	行内标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>04-块标签和行内标签</title>
</head>
<body>
<!--
 文档流
    HTML页面需要从上之下加载
    div标签在没有任何的修饰情况下，需要单独成行
    span标签是行内标签，一般用于提示信息
 -->
<div>麦迪</div>
<div>弗朗西斯</div>
<div>艾弗森</div>
<div>加内特</div>
<div>科比</div>
<hr>
<span>詹姆斯</span><span>东及其</span><span>哈登</span>
</body>
</html>
1.3.3 基本文本标签【已淘汰】
font
	font标签已淘汰，文本目前情况下修饰都是采用CSS样式
    size 字体大小 1 ~ 7 1 最小 7 最大
    face 字体样式，可以选择当前计算机中支持字体演示 宋体，楷体...
    color 字体颜色
        颜色可以使用
            1. 颜色对应单词 green blue pink
            2. RGB模式
                R ==> Red G ==> Green B ==> Blue
                0 ~ 255
                #DA835B

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>05-文本标签</title>
</head>
<body>
<!--
font标签已淘汰，文本目前情况下修饰都是采用CSS样式
    size 字体大小 1 ~ 7 1 最小 7 最大
    face 字体样式，可以选择当前计算机中支持字体演示 宋体，楷体...
    color 字体颜色
        颜色可以使用
            1. 颜色对应单词 green blue pink
            2. RGB模式
                R ==> Red G ==> Green B ==> Blue
                0 ~ 255
                #DA835B
-->
<font size="7" face="楷体" color="#adff2f">还能用！！！</font> <br>
<font size="7" face="幼圆" color="#DA835B">还能用！！！</font> <br>
</body>
</html>
1.3.4 h1 ~ h6 标签
h1 ~ h6 使用建议
    1. h1 ~ h6 所有字体全部加粗，并且单独成行！！！
    2. h1 标签在页面中建议有且只有一个 SEO优化
        h1 是搜索引擎重点关注标签之一

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>06-标题标签</title>
</head>
<body>
<!--
 h1 ~ h6 使用建议
    1. h1 ~ h6 所有字体全部加粗，并且单独成行！！！
    2. h1 标签在页面中建议有且只有一个 SEO优化
        h1 是搜索引擎重点关注标签之一
 -->
<h1>无题</h1>
<h2>匿名</h2>
<h3>路见不平一声吼</h3>
<h4>大哥没有男朋友</h4>
<h5>两只黄鹂鸣翠柳</h5>
<h6>大哥做饭全靠吼</h6>
</body>
</html>
1.3.5 a链接标签
href:
	指定a标签连接的url
target:
	打开新页面的指定位置
name:
	用于锚点使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>08-锚点</title>
</head>
<body>
<a name="top"></a>
<font size="5" color="#adff2f">
    顶部 <br>

    <a href="#middle">中间</a> <br>
    <a href="#bottom">最后</a> <br>
</font>
<p>2010年南非世界杯中，梅西作为球队进攻核心，居然一球未进。在1/4决赛中，阿根廷更是以0：4的世界杯队史最大输球比分惨败给德国队，这场比赛也直接导致了马拉多纳的下课。
<a name="middle"></a>
<font size="5" color="red">
    中间 <br>
    <a href="#top">顶部</a> <br>
    <a href="#bottom">最后</a> <br> </font>
<p>2010年南非世界杯中，梅西作为球队进攻核心，居然一球未进。在1/4决赛中，阿根廷更是以0：4的世界杯队史最大输球比分惨败给德国队，这场比赛也直接导致了马拉多纳的下课。</p>
<a name="bottom"></a>
<font size="5" color="#ff1493">
    底部 <br>
    <a href="#top">顶部</a> <br>
    <a href="#middle">中间</a> <br>
</font>
</body>
</html>
1.3.6 img标签
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>09-img标签</title>
</head>
<body>
<img src="img/VMB@MT%60H@$%60ODFGZ@ON(D_3.gif"> <br>
<img src="img/6148eb0b325025f0cdf03d057063de9f.png" alt=""> <br>
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1598440996189&di=08419320e923a6d21688467ab7c1f5ac&imgtype=0&src=http%3A%2F%2Fimg.mp.itc.cn%2Fupload%2F20170602%2F9c4e68d58ece48e7b8650a6c9a5fe495_th.jpg" alt="">
<br>
<img src="http://img.mobiletrain.org/templates/mobiletrain/images/qf-2019-java/liuxiaolei.jpg" alt="航海中路彭于晏">
<img src="http://img.mobiletrain.org/templates/mobiletrain/images/qf-2019-java/xingpenghui.jpg" alt="老黑"> <br>
</body>
</html>
1.3.7 列表标签
无序列表
	ul
有序列表
	ol
列表元素
	li

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>10-列表</title>
</head>
<body>
<!--
ul：
    type
        none 无任何标示
        circle 空心圆
        square 方块
        disc 缺省属性 实心圆
-->
<ul type="disc">
    <font size="5"><li>烤羊肉串</li></font>
    <font size="5"><li>烤羊腿</li></font>
    <font size="5"><li>烤脆骨</li></font>
    <font size="5"><li>烤板筋</li></font>
    <font size="5"><li>烤面筋</li></font>
</ul>
<hr>
<!--
type:
    a A 1 i I
start:
    可以约束当前开始位置
-->
<ol type="I" start="5">
    <font size="5"><li>崂山白花蛇草水</li></font>
    <font size="5"><li>生命之水</li></font>
    <font size="5"><li>风油精</li></font>
    <font size="5"><li>红色尖叫</li></font>
    <font size="5"><li>魔爪</li></font>
</ol>
</body>
</html>
1.3.8 表格标签
table
	表格标签
tr
	行
td
	列
th
	头
rowspan 
	行合并
colspan
	列合并

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>11-表格标签</title>
</head>
<body>
<table border="1px" width="500px" align="center">
    <tr>
        <th>ID</th>
        <th>姓名</th>
        <th>性别</th>
        <th>年龄</th>
        <th>备注</th>
    </tr>
    <tr align="center">
        <td>1</td>
        <td>苟磊</td>
        <td>男</td>
        <td>16</td>
        <td>帅的一匹</td>
    </tr>
    <tr  align="center">
        <td>2</td>
        <td>昊苟</td>
        <td>未知</td>
        <td>-20</td>
        <td>这是啥？</td>
    </tr>
    <tr align="center">
        <td>3</td>
        <td>大哥</td>
        <td>女</td>
        <td>18</td>
        <td>大哥是个单身狗</td>
    </tr>
    <tr  align="center">
        <td>4</td>
        <td>老黑</td>
        <td>男</td>
        <td>78</td>
        <td>黑的雅痞</td>
    </tr>
</table>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>12-表格合并</title>
</head>
<body>
<table border="1px" width="500px" align="center">
    <tr>
        <th colspan="5">学生信息表</th>
    </tr>
    <tr>
        <th>学号</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>成绩</th>
        <th>备注</th>
    </tr>
    <tr>
        <td>1</td>
        <td>大哥</td>
        <td>18</td>
        <td>1000000000</td>
        <td rowspan="4"></td>
    </tr>
    <tr>
        <td>2</td>
        <td>老黑</td>
        <td>78</td>
        <td>-5</td>
    </tr>
    <tr>
        <td>3</td>
        <td>小黑黑</td>
        <td>1</td>
        <td>100</td>
    </tr>
    <tr>
        <td>4</td>
        <td>终极黑</td>
        <td>-1</td>
        <td>10000</td>
    </tr>
</table>
</body>
</html>
1.4 form表单【重点】
1.4.1 get和post
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>13-form测试</title>
</head>
<body>
<!--
 用于提交数据给后台的基本方式！！！
 action:
    当前form表单提交数据的目标位置
 method:
    提交方式
    GET
        http://localhost:63342/Code/13-form%E6%B5%8B%E8%AF%95.html?userName=苟磊&password=123456
        GET请求是通过该URL参数进行明文传递 在资源之后 ? 开始就是参数
        每一个参数使用键值对形式并且采用&分割
            ?userName=苟磊&password=123456
        1. 传输速度快
        2. 承载数据量较小 2KB左右
        3. 安全性为0
        4. GET常用于搜索功能
    POST
        在请求实体中将数据提交给目标资源
        通过HTTP协议的请求实体进行传输，在传输的过程中可以使用页面加密工具
        对于传输的数据进行加密操作。
        1. 传输速度慢
        2. 承载数据量无限制，可以用于文件的上传！！！
        3. 安全性较好，但是依赖于安全插件
        4. POST请求用于修改，更新，添加，涉密操作...
 -->
<form action="#" method="get">

    <span>用户名:</span><input type="text" name="userName"> <br>
    <span>密码耶:</span><input type="password" name="password"> <br>
    <input type="submit" value="提交"> <br>
</form>
<hr>
<form action="#" method="post">
    <span>用户名:</span><input type="text" name="userName"> <br>
    <span>密码耶:</span><input type="password" name="password"> <br>
    <input type="submit" value="提交"> <br>
</form>
</body>
</html>
1.4.2 input标签属性总结
属性用途
text缺省属性，提交数据为基本文档
password密文展示
submit提交按钮
radio单选操作，要求name属性必须一致，checked修饰为默认选择
checkbox多选操作，要求name属性一致，建议name属性加[]，checked修饰为默认选择
date日期
file文件
重置，可以搞一下用户心态
hidden隐藏数据传递，页面不可见，可以带走一些特定数据
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>12-input标签</title>
</head>
<body>
<form action="#" 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="1">男 <input type="radio" name="gender" value="0">女 <br>

    <span>爱好：</span>
    <input type="checkbox" name="hobby[]" value="1" checked> 王者荣耀
    <input type="checkbox" name="hobby[]" value="2" checked> 英雄联盟
    <input type="checkbox" name="hobby[]" value="3"> 看电影
    <input type="checkbox" name="hobby[]" value="4"> 喜欢美女 <br>

    <span>籍贯</span>
    <select name="homeland" >
        <option value="1" selected>南阳</option>
        <option value="2">洛阳</option>
        <option value="3">郑州</option>
        <option value="4">开封</option>
        <option value="5">周口</option>
    </select> <br>

    <span>生日：</span> <input type="date" name="birth"> <br>
    <span>头像：</span> <input type="file" name="icon"> <br>

    <input type="hidden" name="hidden" value="你看不见我">

    <input type="reset" value="重置">
    <input type="submit" value="提交"> <br>
</form>
</body>
</html>
1.4.3 select下来菜单
<select name="homeland">
        <option value="1">安阳</option>
        <option value="2">信阳</option>
        <option value="3">南阳</option>
        <option value="4">洛阳</option>
        <option value="5">濮阳</option>
        <option value="6" selected>荥阳</option>
        <option value="7">原阳</option>
        <option value="8">淮阳</option>
    </select>
1.4.4 textarea 已淘汰
<textarea name="description"></textarea>
<!--
目前在网页提交数据中，常见操作位富文本编辑器
-->
1.4.4 textarea 已淘汰
<textarea name="description"></textarea>
<!--
目前在网页提交数据中，常见操作位富文本编辑器
-->
九离⠂
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
《web开发： HTML 表格标签》
yexiangCSDN的专栏
01-14 298
一、HTML 标签大全二 1. 表格标签 表格是实际开发中非常常用的标签: 1.1 表格的主要作用 表格主要用于显示、展示数据，因为它可以让数据显示的非常的规整，可读性非常好。特别是后台展示数据 的时候，能够熟练运用表格就显得很重要。一个清爽简约的表格能够把繁杂的数据表现得很有条理。 Pink老师总结: 表格不是用来布局页面的,而是用来展示数据的. 1.2 表格的基本语法 <table> <tr> <td>单元格内的文字&l...
HTML表格标签
weixin_52629158的博客
10-23 2134
HTML表格标签
html表格标签
记忆的永恒的博客
02-22 114
1，表格标签 作用：显示数据 <table> </table>表格标签 <tr> </tr> 行标签 <td> </td>单元格标签
58. python高级------html(2)
qq_40455733的博客
04-18 223
文章目录57. python高级------html(2)python修炼第十九天2019年 4月18日 晴1.列表标签1.无序列表2.有序列表2.表格标签 57. python高级------html(2) python修炼第十九天 2019年 4月18日 晴 1.列表标签 1.无序列表 <!-- ul标签定义无序列表 --> <ul> <!--...
HTML设计模式日常学习笔记整理
09-28
本周学习的重点是HTML设计模式，特别是盒模型的理解和应用。 首先，让我们来梳理一下盒模型的概念。盒模型是CSS布局的基础，它规定了元素框处理元素内容、内边距、边框以及外边距的方式。盒模型包括以下六种类型： ...
用于存储日常学习练习HTML的文件.zip
最新发布
03-20
html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目...
基于微信小程序的日常学习打卡系统
09-22
基于微信小程序的日常学习打卡系统旨在帮助用户形成良好的学习习惯，通过定期打卡记录学习进度，提高学习效率。系统通常包含以下功能模块： 1. **用户注册与登录**：用户通过微信账号一键登录，实现快速注册与身份...
笔记本：我日常学习的笔记本
02-09
"笔记本：我日常学习的笔记本" 提供了一种利用技术手段优化个人学习过程的方法。这个项目，通过使用HTML（超文本标记语言）进行构建，旨在创建一个自定义化的、便捷的笔记本系统，以适应不同用户的学习需求。 HTML...
HTML 表格标签
Fulling的博客
11-23 362
文章目录1. 简单的表格2. 表头单元格：th 标签3. 表格结构标签4. 合并单元格方式 表格标签，用来展示数据 <table> 标签定义 HTML 表格。 1. 简单的表格 tr 元素定义表格行，td 元素定义表格单元。 html中表格之间默认有空隙，cellspacing 可以清除空隙 示例代码： <!-- cellspacing：html中表格之间默认有空隙，cellspacing可以清除空隙 --> <table cellspacing="0">
HTML的表格标签
L990614的博客
09-08 502
表格标签 表格的结构： 在HTML网页中，要想创建表格，就需要使用表格相关的标签。创建表格的基本语法格式如下： ```html <table> <tr> <td>内容</td> </tr> </table> <table></table>标签的作用是定义一个表格 <tr></tr>标签的作用是定义表格中的一行 <td></td>标签
html之表格标签
haha_hello的博客
02-08 460
一，表格标签<!-- 过去大部分的网站都是表格标签做的,一个时代的代表,现在基本不用了 表格标签: 1,格式:<table> <tr> <td>需要显示的内容</td> </tr> </table> table:代表整个表格 tr:代表整个表格中的一行数据->
HTML之表格标签
hmh520i的博客
12-19 2711
前端学习日记
HTML5入门到精通教程全解
2. **教程前言**：通常会介绍HTML5的历史、发展背景以及为什么选择学习HTML5，同时也可能会概述整个教程的学习路径和目标。 3. **HTML5标签**：HTML5引入了一些新的标签，如`<article>`、`<aside>`、`<header>`、`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值