HTML语言(超文本标记语言)
所有的网页都是用这门语言写的
语法很松散,不区分大小写,不区分单引号双引号,但建议还是严格来写
基础标签
创建文本文档,后缀名改成html,用浏览器打开,就可以了,编写idea就挺好
里面的基础编写
<!--html5的标识-->
<!DOCTYPE html>
<!--
html:浏览器编译的主标签
head:开始子标签
title:标题
body:主体子标签
-->
<html lang="en">
<head>
<!-- 页面字符集-->
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--h1-6:多级标题-->
<h1>我是标题h1</h1>
<h2>我是标题h2</h2>
<h3>我是标题h3</h3>
<h4>我是标题h4</h4>
<h5>我是标题h5</h5>
<h6>我是标题h6</h6>
<!--hr:水平分隔符-->
<hr>
<!--
font:定义文本(文本尺寸,文本颜色等)
face:定义字体
size:定义文本大小
color:定义文本颜色(三种方式)
1.英文单词:red,blue...
2.rgb(值1,值2,值3):三原色,三个值在0-255之间
3.#值1值2值3:跟2差不多只不过是十六进制0-FF
-->
<font face="楷体" size="5" color="blue">传智教育</font>
<hr>
<!--
文字直接粘就行,没有什么引用文字的代码,但格式有代码
<p></p>包裹段落:段落标签,每段被<p>包裹的文字是一段
<br>写在行末:换行
<b></b>包裹文字:加粗
<i></i>包裹:斜体
<u></u>包裹:下划线
<center></center>包裹:包裹文字居中
-->
<p>
不管是HTML，还是其它任何的编程语言或者标记语言，
</p>
<p>
好的注释不仅方便其他同事快速阅读、理解你的代码，也方便隔了很久，再回头看自己的代码时，快速的修改代码。
</p>
<p>
但 HTML 中的注释是怎么写的呢？很简单 just do yourself
</p>
<hr>
<i>
回眸一笑百媚生,六宫粉黛无颜色<br>
</i>
回眸一笑百媚生,<br>六宫粉黛无颜色<br>
<u>回眸一笑百媚生,六宫粉黛无颜色<br></u>
<b>回眸一笑百媚生,六宫粉黛无颜色<br></b>
<center>
回眸一笑百媚生,六宫粉黛无颜色
</center>
</body>
</html>
图片,音频,视频标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
<img>标签是图片,包括src,width,height
<audio>标签是音频,比img多了个controls
<video>标签是视频,跟audio标签一样
src:路径
1.绝对路径:完整的路径,比如你想从网上搞来一张图片,就复制图片地址写在这里
2.相对路径:所谓相对路径,就是从与该html文件地址相同的最后一级目录开始
比如html路径是D:/html,图片路径是D:/img/picture,那么图片相对路径就是img/picture
width和height就分别是宽和高
controls表示播放
尺寸单位: 1.px:像素(默认单位)
2.百分比:%(表示占当前整个窗体的百分比,比如填50%就表示图片宽占整个网页宽的一半)
-->
<img src="picture.webp" width="360" height="540">
<img src="https://hao5.qhimg.com/t011515cb8bf44c72a2.jpg?857*1200" width="360" height="540">
<video src="video.mp4" controls width="720" height="540"></video>
<br>
<audio src="audio.mp3" controls></audio>
</body>
</html>
超链接标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<!--
<a></a>:超链接标签,有两个属性,包裹的内容是显示的内容,比如里面写上李兰迪照片,页面中就会出现李兰迪照片这几个字,点击就转到对应网址
href属性:超链接,填要转到的网站的网址(现在自己写的网址也可以)
target属性:打开方式
_self:在本页面打开
_blank:在空白页打开
-->
<body>
<a href="https://blog.csdn.net/weixin_29498577/article/details/113897184?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522172449215016800172599770%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request_id=172449215016800172599770&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~first_rank_ecpm_v1~rank_v31_ecpm-4-113897184-null-null.142^v100^pc_search_result_base6&utm_term=html%E4%B8%AD%E5%9B%BE%E7%89%87%E6%A0%87%E7%AD%BE%E9%95%BF%E5%AE%BD%E9%AB%98&spm=1018.2226.3001.4187" target="_self">csdn的文章</a>
<a href="https://cn.bing.com/images/search?q=%e6%9d%8e%e5%85%b0%e8%bf%aa%e5%9b%be%e7%89%87&qpvt=%e6%9d%8e%e5%85%b0%e8%bf%aa%e5%9b%be%e7%89%87&form=IGRE&first=1" target="_blank">李兰迪照片</a>
<a href="http://localhost:63343/htmlProgram/html/02-%E5%9B%BE%E7%89%87%E9%9F%B3%E8%A7%86%E9%A2%91%E6%A0%87%E7%AD%BE.html?_ijt=qpcf1pv8o4652nt7rrbid69bs7&_ij_reload=RELOAD_ON_SAVE" target="_blank">自己网站</a>
</body>
</html>
列表标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
列表标签
<ol></ol>标签:有序列表,生成列表的同时会生成排序前缀
<ul></ul>标签:无序列表,生成列表前有一列一样的符号
type:前缀样式
ol中:写的是第一个前缀,比如写a,生成的列表就是a,b,c,d
ul中:写的是符号样式,比如circle就会生成一列空心圆圈
-->
<ol type="a">
<li>咖啡</li>
<li>牛奶</li>
<li>芒果汁</li>
</ol>
<ul type="circle">
<li>咖啡</li>
<li>牛奶</li>
<li>芒果汁</li>
</ul>
</body>
</html>
表格标签和布局标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
<table></table>:表格标签
属性:
1.border:规定表格边框的宽度
2.cellspacing:定义单元格之间的空白(边框实际上是由两根线组成,两根线直接是空白)
3.width:规定表格宽度
<tr></tr>:定义行
属性:
align:定义表格行的内容对齐方式
<th></th>:定义表头单元格
<td></td>:定义单元格
属性:
1.rowspan:规定单元格可横跨的行数,也就是纵向合并单元格
2.colspan:规定单元格可横跨的列数,也就是横向合并单元格
-->
<table width="50%" border="1" cellspacing="0">
<tr height="50">
<th>序号</th>
<th>品牌logo</th>
<th>品牌名称</th>
<th>所属企业</th>
</tr>
<tr align="center">
<td>001</td>
<td>
<img src="https://img.ixintu.com/upload/jpg/20210525/a262ff76780ed094975cfebe367794b2_89393_800_800.jpg!con" width="60" height="50">
</td>
<td>优衣库</td>
<td>优衣库</td>
</tr>
<tr align="center">
<td>002</td>
<td>
<img src="https://ts1.cn.mm.bing.net/th/id/R-C.7d76e499ac043b0fb7a64e5158d775c4?rik=AIEzXhovmrm2wA&riu=http%3a%2f%2fi6.qhimg.com%2ft010dfb73ee6bb95114.jpg&ehk=2z%2f4RDShnTOvHTNSIq38uTKU%2fuMYMs20a9haUnl18OI%3d&risl=&pid=ImgRaw&r=0" width="60" height="50">
</td>
<td>三只松鼠</td>
<td>三只松鼠</td>
</tr>
<tr align="center">
<td>003</td>
<td>
<img src="https://ts1.cn.mm.bing.net/th/id/R-C.b130c87b75a17febd7f7ff8934238178?rik=sVqYsZWZ9sOmVA&riu=http%3a%2f%2fpic.baike.soso.com%2fp%2f20131221%2f20131221174024-912240027.jpg&ehk=TiyBsTIzWYVfwoi8BrKTPVZeble44GPuqAXOrQdC2Hk%3d&risl=&pid=ImgRaw&r=0" width="60" height="50">
</td>
<td>小米</td>
<td>小米科技有限公司</td>
</tr>
</table>
<hr>
<table width="50%" border="1" cellspacing="0">
<tr height="50">
<th>序号</th>
<th>品牌logo</th>
<th>品牌名称</th>
<th>所属企业</th>
</tr>
<tr align="center">
<td colspan="2">001</td>
<td>
<img src="https://img.ixintu.com/upload/jpg/20210525/a262ff76780ed094975cfebe367794b2_89393_800_800.jpg!con" width="60" height="50">
</td>
<td>优衣库</td>
<!-- <td>优衣库</td>-->
</tr>
<tr align="center">
<td>002</td>
<td>
<img src="https://ts1.cn.mm.bing.net/th/id/R-C.7d76e499ac043b0fb7a64e5158d775c4?rik=AIEzXhovmrm2wA&riu=http%3a%2f%2fi6.qhimg.com%2ft010dfb73ee6bb95114.jpg&ehk=2z%2f4RDShnTOvHTNSIq38uTKU%2fuMYMs20a9haUnl18OI%3d&risl=&pid=ImgRaw&r=0" width="60" height="50">
</td>
<td>三只松鼠</td>
<td rowspan="2">三只松鼠</td>
</tr>
<tr align="center">
<td>003</td>
<td>
<img src="https://ts1.cn.mm.bing.net/th/id/R-C.b130c87b75a17febd7f7ff8934238178?rik=sVqYsZWZ9sOmVA&riu=http%3a%2f%2fpic.baike.soso.com%2fp%2f20131221%2f20131221174024-912240027.jpg&ehk=TiyBsTIzWYVfwoi8BrKTPVZeble44GPuqAXOrQdC2Hk%3d&risl=&pid=ImgRaw&r=0" width="60" height="50">
</td>
<td>小米</td>
<!-- <td>小米科技有限公司</td>-->
</tr>
</table>
<!--
布局标签
<div></div>:占满一整行
<span></span>:行内标签
-->
<div>我是div</div>
<div>我是div</div>
<span>我是span</span>
<span>我是span</span>
</body>
</html>
表单标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<!--
<form></form>:表单标签
属性:
1.action:指定表单数据提交的url也就是提交到的网址,这里写#表示提交到当前url中
表单项数据要想被提交必须指定其name属性,name的值可以自己起名,到时候提交的内容就会传给这个name
2.method:指定表单的提交方式
1.get:默认值
请求参数会拼接在url后面,所有人都能看到,不太安全
url长度有限制,不能超过4kb
2.post:
请求会在http请求协议的请求体中,更安全
请求参数无限制,写多少都可以
<input>子标签:可以通过type属性改变元素展示样式
type属性:后面细讲
-->
<body>
<form action="#" method="post">
<input type="text" name="username">
<input type="submit">
</form>
</body>
</html>
表单项标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<br>
<h1>个人资料</h1>
<hr>
<!--
表单项标签
<input>:通过type属性控制输入形式
属性:
1.name:获得参数要传到name中去,name的值可以自己起名
2.id:唯一标识,在<label></label>标签中定义属性for和input标签中的id属性关联(值随便起名但要设置成一样的)
能达到在网页中点击用户名这几个字也能开始输入参数的效果
3.type:
1.text:默认值,定义单行的文本输入
2.password:定义密码字段,输入会被黑点遮住增强私密性,点小眼睛可以查看
3.radio:定义单选按钮,只能选择一个
4.checkbox:定义复选框,可以选择多个
5.file:定义文件上传按钮,用来上传文件
6.hidden:定义隐藏的输入字段
7.submit:定义提交按钮,按一下会把表单数据发送到服务器,按钮叫什么自己定义
8.reset:定义重置按钮,按一下会清除表单中的所有数据,按钮叫什么自己定义
9.button:定义可点击按钮,按钮叫什么自己定义
<select></select>标签:定义下拉列表
name属性:传入值要传给name的,别忘了定义name属性
<option></option>标签:定义列表项
value属性:可以不写,不写默认传被包裹的值,写了就会传value
<textarea>:文本域
-->
<form action="#" method="post">
上传头像:<input type="file" name="picture"><br><br><br>
<label for="nickname">昵称:</label>
<input type="text" name="nickname" id="nickname"><br><br><br>
<label for="username" >用户名:</label>
<input type="text" name="username" id="username"><br><br><br>
<label for="password">密码:</label>
<input type="password" name="password" id="password"><br><br><br>
<!--
单选框
写name是规定一个标识,有相同标识的算一组,只能选一个
加上一个value是因为男这个字是打印在网页里的而不是限制代码中的所以传参的时候并不会传进去,传的实际是value
-->
性别:<input type="radio" name="gender" value="1">男
<input type="radio" name="gender" value="2">女
<input type="radio" name="gender" value="3">沃尔玛购物袋<br><br><br>
<!--
复选框
-->
爱好:<input type="checkbox" name="hobby" value="1">喝酒
<input type="checkbox" name="hobby" value="2">旅游
<input type="checkbox" name="hobby" value="3">打牌
<input type="checkbox" name="hobby" value="4">拍照
<input type="checkbox" name="hobby" value="5">吃饭<br><br><br>
意向城市:
<select name="city">
<option value="Beijing">北京</option>
<option value="Shanghai">上海</option>
<option value="Shenzhen">深圳</option>
</select><br><br><br>
个人简介:
<textarea rows="1" cols="50" name="desc"></textarea><br><br><br>
<!-- 提交按钮 -->
<input type="submit" value="免费注册">
<!-- 重置按钮-->
<input type="reset">
</form>
</body>
</html>
转义字符
| HTML原代码 | 显示结果 | 描述 |
|---|---|---|
| < | < | |
| > | > | |
| & | & | 可用于显示其他特殊字符 |
| " | " | 引号 |
| ® | ® | 已注册 |
| © | © | 版权 |
| ™ | ™ | 商标 |
| | 不断行的空白 |
扫一扫
4377
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
