一些HTML基础笔记

最新推荐文章于 2024-09-22 10:46:41 发布
最新推荐文章于 2024-09-22 10:46:41 发布
阅读量365 收藏
点赞数 2
分类专栏： 前端笔记 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fan__lee/article/details/106563368
版权

文章目录

基本标签

  1. 注意： 超链接不能嵌套超链接 P标签不能嵌套p标签 标题标签h1h2不能互相嵌套
  2. 常用标签：
<h1></h1>....<h6></h6>  标题 依次减小     
<p>文本</p>   <i> 斜体</i> <b>粗体</b>  <br> 换行  <hr> 水平线 &nbsp; 空格 
<ul type="">   <li>无序列表</li>    </ul>   type后可以加disc(实心圆) cirle(空心圆)square(实心方块)
<ol type="">  <li>有序列表</li>    </ol>   type可以等于1 a A i I
<img src="" hight="" width ="" title="" alt=""> 多个图片时，图片会按照列排放，底部对齐，设置图片大小，图片是等比例缩小放大
title 是鼠标位于图片显示的文字  alt图片丢失时显示的文字
<a href="" target="_blank">超链接</a>target可以决定网页链接跳转新标签还是本网页
标签：del增加删除线 sup把文字变为上标 u增加下划线  center 文字居中显示  center也是块标签
表格：<table  border="1px" cellspcing = "0">  <tr align=""> 第一行</tr>  <tr> 第二行</tr> </table>  table里面加<col width = "150px"> <col width = "150px"> 是对列设置宽 第n个是第n列 col标签中没有hight属性

表

colgroup 和col标签不要混合使用
colgroup 和col标签不要混合使用
colgroup 元素可以设置不同列的样式，图片中第一个设置了前六列的样式，第二个设置了第七列的样式

表格：
<tr>  <td width="" align = ""> 第一列</td> <td> 第二列</td></tr>  
border设置表格边缘粗细 cellspcing 设置表格边框有无间隙 
width设置表格宽度 align设置所在标签内表格里内容排列方式
列设置宽度，行设置高度

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

单元格合并，删除多余单元格，然后设置一个单元格的占几格
行 用rowspan 列用 colspan，  给行设置居中和高度需在 tr 标签中设置
<th></th> = 加粗并居中的<td>  严格写法，table标签内应该加入 tbody标签

'简历表实例'
!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<table border="1px" cellspacing="0">
			<colgroup span="6" width="100px" >
			<colgroup span="6" width="200px" >
			<tr height="40px" align="middle">
				<td colspan="7">个人简历</td>
			</tr>
			<tr height="40px" align="middle">
				<td>姓名</td>
				<td></td>
				<td>性别</td>
				<td></td>
				<td>年龄</td>
				<td></td>
				<td rowspan="4"> 照片</td>
			</tr>
			<tr height="40px" align="middle">
				<td>学历</td>
				<td></td>
				<td>籍贯</td>
				<td colspan="3"></td>

			</tr>
			<tr height="40px" align="middle">
				<td>电话</td>
				<td></td>
				<td>政治面貌</td>
				<td colspan="3"></td>
			</tr>
			<tr height="40px" align="middle">
				<td>毕业学院</td>
				<td colspan="5"></td>
			</tr>
			<tr height="40px" align="middle">
				<td>求职意向</td>
				<td colspan="6"></td>
			</tr>
		</table>
	</bod

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表格</title>
	</head>
	<body>
		<table border="1px" cellspacing="0">
			<tr>
			'width取值为最大的'
				<col width = "150px">
				<col width = "150px">
				<col width = "150px">
				<col width = "150px">
				<td width="10px" align="middle"></td>
				<td width="10px" align="middle">初级</td>
				<td width="10px" align="middle">中级</td>
				<td width="10px" align="middle">高级</td>
			</tr>
			<tr>
				<td width="100px" align="middle">标准</td>
				<td width="100px" align="middle">说不出话</td>
				<td width="100px" align="middle">没话说</td>
				<td width="100px" align="middle">辞职</td>
			</tr>
			<tr>
				<td width="100px" align="middle">User1</td>
				<td width="100px" align="middle"></td>
				<td width="100px" align="middle"></td>
				<td width="100px" align="middle"></td>
			</tr>
			<tr>
				<td width="100px" align="middle">User2</td>
				<td width="100px" align="middle"></td>
				<td width="100px" align="middle"></td>
				<td width="100px" align="middle"></td>
			</tr>
		</table>
	</body>
</html>

注释：<!--abc-->
表单： <form action="表单提交的地址" method="get/post">
             <table>
             <tbody>    **input必须放入form标签内，才能提交**
                   <tr> <td>    <input type="submit/password/reset" name="提交给action" value="按钮的名字" >    </td> </tr>  
                   </tbody>
                   </table>
          <form> 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表格</title>
		<style>
			table{ margin:auto }
		</style>
	</head>
	<body>
		<h1>英雄技能介绍</h1>
		<table border="1px" >
			<colgroup span="3" width="119px">
			<colgroup span="1" width="350px">
			<colgroup span="1" width="70px"></colgroup>
			<tr style="text-align: center; background-color: gray; height: 30px;">
				<td>技能名 </td>
				<td>触发</td>
				<td>技能属性</td>
				<td>技能效果</td>
				<td>图标</td>
			</tr>
			<tr style="text-align: center; height:69px;">
				<td>坚韧</td>
				<td>被动</td>
				<td colspan="2" style="text-align:left;">
					<p>盖伦如果在9秒内不受到任何伤害，之后的每秒都会回复自 <br>
						己最大生命值的0.4%。小兵的伤害不会中断坚韧效果</p>
				</td>
				<td>
					<img src="./skill1.png" alt="被动">
				</td>
			</tr>
			<tr style="text-align: center; height: 120px;">
				<td>致命打击</td>
				<td>Q</td>
				<td>冷却时间：8</td>
				<td style="text-align: left;">
					盖伦移除身上的所有减速效果，并获得30%移动速度加成，持续1.5/2/2.5/3/3.5秒。
在接下来的4.5秒内，他的下次普通攻击会造成30/55/80/105/130(+1.4AD)物理伤害，并沉默目标1.5秒。
				</td>
				<td> 
					<img src="./skill2.png" alt="Q">
				</td>
			</tr>
			<tr style="text-align: center; height: 88px;">
				<td>勇气</td>
				<td>W</td>
				<td>
					<p>冷却：</br> 24/23/22/21/20</p>
				</td>
				<td>
					<p style="text-align: left;">
						<b>被动：</b>击杀一个单位会永久提供0.25护甲和魔法抗性加成，最大值：30 <br>
						<b>主动：</b>盖伦获得一个持续2/3/4/5/6秒的防御护盾，减少即将到来的30%伤害。
					</p>
				</td>
				<td>
					<img src="./skill3.png" alt="W">
				</td>
			</tr>
			<tr style="text-align: center; height: 200px;">
				<td>审判</td>
				<td>E</td>
				<td>冷却：9</td>
				<td>
					<p style="text-align: left;">
						盖伦快速地旋舞大剑，持续3秒，在持续期间对周围敌人总共造成物理伤害——14/18/22/26/30加上他总攻击力的34/35/36/37/38%，5次(英雄每升3级加1次)。<br>
  						E【审判】会在攻击单个敌人时造成33%额外伤害。<br>
						取消E【审判】会返还相当于剩余持续时长的冷却时间。<br>
						E【审判】可以暴击，并造成额外伤害。<br>
					</p>
				</td>
				<td>
					<img src="./skill4.png" alt="E">
				</td>
			</tr>
			<tr style="text-align: center; height: 200px;">
				<td>德玛西亚正义</td>
				<td>R</td>
				<td>冷却：</br> 120/100/80</td>
				<td>
					<p style="text-align: left;">
						<b>被动：</b>最近获得最多击杀数的敌人会成为大反派。盖伦的E【审判】和普攻会对大反派造成额外真实伤害，伤害值为大反派1%的最大生命值。<br>
						<b>主动：</b>盖伦召唤德玛西亚之力，试图斩杀一名敌方英雄，目标损失的生命越多，则此技能造成的伤害越高。造成175/350/525魔法伤害加上目标已损失生命值的28/33/40%。对大反派造成真实伤害。
					</p>
				</td>
				<td>
					<img src="./skill5.png" alt="R">
				</td>
			</tr>
			<tr style="height: 500px;">
				<td colspan="5">
					<iframe src="https://blog.csdn.net/fan__lee" frameborder="1px" width="100%" height="590px" ></iframe>
				</td>
			</tr>
		</table>
	</body>
</html>

文本框

input

在这里插入图片描述

'文本框：'
<input type="text" size="10">
<input type="text" value="有初始值的文本框">
<input type="text" placeholder="请输入账号">//有文字背景的输入框


下拉菜单：<select> <option>下拉菜单1</option><option>下拉菜单2</option> </select>
表单有向服务器请求和发送数据两种方式,get/post。
get: 通常表示获取数据   请求发送的数据都写在数据栏上用户可见
post: 通常表示提交数据   请求发送的数据都写在数据栏上用户不可见
get请求不能提交大量数据，但是post可以，因此不要混用

<form method="post" action="https://how2j.cn/study/login.jsp">
账号：<input type="text" name="name"> <br/>
密码：<input type="password" name="password" > <br/>
<input type="submit" value="登陆">
</form>

get和post的区别
get
是form默认的提交方式
如果通过一个超链访问某个地址，是get方式
如果在地址栏直接输入某个地址，是get方式
提交数据会在浏览器显示出来
不可以用于提交二进制数据，比如上传文件
post
必须在form上通过 method=“post” 显示指定
提交数据不会在浏览器显示出来
可以用于提交二进制数据，比如上传文件

在这里插入图片描述

下拉

<select >
 <option >苍老师</option>
 <option >高树玛利亚</option>
 <option >遥美</option>
</select>
'设置高度,一次显示两个'
<select  size="2">
 <option >苍老师</option>
 <option >高树玛利亚</option>
 <option >遥美</option>
</select>
'设置多选：'
<select size="3" multiple="multiple"></select>
'默认选中:'
<select size="3" multiple="multiple">
 <option >苍老师</option>
 <option selected="selected">高树玛利亚</option>
 <option selected="selected">遥美</option>
</select>

文本域

<textarea cols="30" rows="8">123456789012345678901234567890
1234567890
1234567890
1234567890
1234567890
1234567890
1234567890
1234567890</textarea>

按钮

<input type="button"> 即普通按钮
<input type="submit"> 即为提交按钮，用于提交form，把数据提交到服务端
<input type="reset"> 重置按钮 可以把输入框的改动复原

图像提交：

<form action="/study/login.jsp">
账号：<input type="text" name="name"> <br/>
密码：<input type="password" name="password" > <br/>
<input type="image" src="https://how2j.cn/example.gif">
</form>

‘button’

<button></button>即按钮标签
与<input type="button">不同的是，<button>标签功能更为丰富

按钮标签里的内容可以是文字也可以是图像

如果button的type=“submit” ，那么它就具备提交form的功能
fan__lee
关注
专栏目录
html中写时间用的标签是,HTML5标签：time元素的使用方法及作用
weixin_35759015的博客
06-03 5136
html元素中的 标签是html5新增的标签，用于定义日期或时间的，下面，就我们就一起详细了解一下标签的使用方法及作用。 标签的定义 标签定义日期或24小时制的时间； 标签能够以机器可读的方式对日期和时间进行编码，不仅可以让搜索引擎也能够生成更智能的搜索结果，还可以让其他应用程序读取日期或时间，做出更加智能的处理； 标签和其他普通标签一样，不会在浏览器中呈现任何特殊效果； 标签不被所有的主流浏览器...
2020html基础笔记
12-31
这份“2020html基础笔记”涵盖了HTML5的最新标准，旨在帮助初学者理解并掌握HTML的基本概念和语法。 1. HTML结构： HTML文档通常由<!DOCTYPE>声明、<html>元素、元素和元素组成。<!DOCTYPE>声明定义了文档类型，...
HTML_基础
anxyanxyan的博客
07-17 275
1.浏览器内核 浏览器内核又可以分成两部分：渲染引擎(layout engineer 或者 Rendering Engine)和 JS 引擎。 渲染引擎 它负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入 CSS 等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。 JS 引擎 则是解析 Javas...
动态时间html在线,HTML写一个网页动态时钟
weixin_33514475的博客
05-31 822
时钟特效function disptime(){var today=new Date();var hh=today.getHours();var mm=today.getMinutes();var ss = today.getSeconds();document.getElementById("myclock").innerHTML="现在是—"+hh+":"+mm+":"+ss+""}//set...
【前端学习笔记】HTML 基础
2401_84304834的博客
04-18 2214
HTML（HyperText Markup Language，超文本标记语言）是一种用于创建网页的标准标记语言。它允许用户通过结合文本、图像、链接、格式等元素来构建网页，并通过浏览器进行解析和显示。HTML文件通常以.html或.htm为扩展名，包含一系列的标签（tags），这些标签用于定义网页的结构、样式和内容。
html5——前端笔记
qq_48721706的博客
09-02 2474
html笔记
HTML CSS整理笔记
Lin16819的博客
12-12 3万+
常见字体单位： 1.em 移动端常用的字体尺寸单位，说白em就相当于“倍”，比如设置当前的div的字体大小为1.5em，则当前的div的字体大小为：当前div继承的字体大小*1.5。 但当div进行嵌套时，em始终按当前div继承的字体大小来缩放。 2.rem r是root的意思，即相对于根节点html的font-size进行缩放，当有嵌套关系时，嵌套关系的元素的字体大小始终按照根节点的字体大小...
HTML+CSS基础笔记
sq91fra的博客
01-13 1030
快速拾起HTML+CSS
Spring一些基础问题整理
热门推荐
张彦峰的博客
04-07 169万+
Spring相关高频面试题整理
HTML笔记（完结）
weixin_43872169的博客
07-24 1万+
HTML基础部分 基础元素（代码注释方法：ctrl+/ 文字注释方法：ctrl+shift+/） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body&...
python基础笔记html.rar
10-14
"python基础笔记html"这个压缩包文件显然是一个关于Python基础知识的学习资料，包含了HTML格式的笔记，可能涵盖了变量、数据类型、控制结构、函数、模块等核心概念。 1. **Python简介**：Python是由Guido van ...
Web前端HTML5 CSS3初学者零基础入门全套学习笔记.zip
05-09
Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门全套学习笔记 Web前端HTML5 CSS3初学者零基础入门...
python基础笔记html_python教程_PyCharm_
09-30
**Python基础笔记HTML** 在学习Python编程语言的过程中，掌握基础知识是非常关键的。Python以其简洁、易读的语法和广泛的应用范围吸引了众多初学者。本笔记将带你走进Python的世界，了解其基本概念和常用操作。 ...
HTML基础笔记.md
08-13
HTML基础笔记
HTML基础笔记——head标签
KllKllKll
07-15 4080
//一个简单的HTML结构 <!DOCTYPE html> //文档声明 <html> <head> <title>标题</title> </head> <body> <p>内容</p> </body> </html> head标签是网页的头部，用于定义一些特殊的内容，比如页面标题、定时刷新、外部.
html知识点框架
爱敲代码的卡拉米的博客
09-18 970
一、HTML基础
粒子向上持续瀑布动画效果（直接粘贴到记事本改html即可）
weixin_53132064的博客
09-22 162
瀑布向上粒子效果，欢迎参考
html 几行的空间分成3个区域
最新发布
TrueLink的博客
09-22 128
* 设置背景色以区分区域，实际使用时可以去除或修改 *//* 使得宽度和高度包括内边距和外边距 *//* 设置外边距，增加区域之间的间隔 *//* 设置内边距，增加区域内部的空间 *//* 使用Flexbox布局 *//* 你可以根据需要调整高度 *//* 子元素之间的间隔相等 *//* 容器宽度占满整个屏幕 *//* 设置每个区域的样式 *//* 设置整体容器样式 *//* 每个区域都等宽 *//* 文本居中显示 */
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值