HTML学习
概述
<!DOCTYPE html>
<!-- 我是注释标签 -->
<!-- 标记：标准的HTML5文档 发布时间：2014年 -->
<!-- 标签：双标签（开始标签，结束标签），单标签 -->
<!-- HTML文档，整个文档的根标签 （树状结构）-->
<!--
head：一般用于说明页面的一些信息，不直接显示在页面上
meta charset="utf-8" 告知浏览器，现在文档使用的编码
title:页面的标题
body：一般页面的内容，直接显示在网页上
-->
<html>
<head>
<meta charset="utf-8">
<title>网页标题</title>
</head>
<body>
<h1>你好</h1>
</body>
</html>
1、段落标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 在网页上直接写空格或者分行回车之类的是不起效果的，需要使用html标签 -->
<p>段落一：阿大家圣诞节阿莱克斯多久啊考六级</p>
<p>段落二：阿经典款拉家带口辣椒圣诞快乐</p>
段落一：阿大家圣诞节阿莱克斯多久啊考六级
段落二：阿经典款拉家带口辣椒圣诞快乐
</body>
</html>
2、链接标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- url -->
<a href="http://www.baidu.com">百度</a>
<a href="http://www.jd.com">京东</a>
<a href="http://www.kidjaya.xyz">我的个人博客</a>
<!-- 本地 -->
<a href="index.html">index</a>
</body>
</html>
扩展1：a 标签内部跳转
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#place1{
height: 1000px;
background-color: aquamarine;
}
#place2{
height: 1000px;
background-color: aliceblue;
}
#place3{
height: 1000px;
background-color: bisque;
}
</style>
</head>
<body>
<!-- href：跳转至网络地址 -->
<a href="#place1">1</a>
<!-- 运用在单页应用 -->
<a href="#place2">2</a>
<a href="#place3">3</a>
<p id="place1">第一部分内容</p>
<p id="place2">第二部分内容</p>
<p id="place3">第三部分内容</p>
</body>
</html>
扩展2:qq推广链接
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=1725236585&site=qq&menu=yes">
<img border="0" src="http://wpa.qq.com/pa?p=2:1725236585:41" alt="你好，帅哥" title="你好，帅哥"/>
</a>
</body>
</html>
3、列表标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 有序标签 ordered lists ==> ol [告知浏览器默认样式] -->
<ol>
<!-- li ==> list item -->
<li>新闻标题1</li>
<li>新闻标题2</li>
<li>新闻标题3</li>
<li>新闻标题4</li>
<li>新闻标题5</li>
</ol>
<!-- 无序标签 unordered lists ==> ul -->
<!-- ul>li{预定的内容$}*5 快捷生成代码 -->
<ul>
<li>新闻标题1</li>
<li>新闻标题1</li>
<li>新闻标题1</li>
<li>新闻标题1</li>
<li>新闻标题1</li>
</ul>
<!-- definition list -->
<dl>
<dh>使用的技术</dh>
<!-- definition head -->
<dd>Java</dd>
<!-- definition data -->
<dd>Python</dd>
</dl>
<dl>
<dh>使用的技术</dh>
<dd>Java</dd>
<dd>Python</dd>
</dl>
</body>
</html>
4、表单
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--
表单标签
属性：
1.action:将表单的数据提交至哪里～～
2.提交的方法：get、post
input标签
属性：
1.type:定义输入标签的类型 text/password/submit...
2.name:提交数据的名称
3.value：提交输入框输入的值
4.placeholder：提示信息
-->
<!-- method:
post: 表单数据放置到请求的body里面，不直接显示，安全，但效率有一定的损耗 （提交数据大）
get:将表单的数据直接放置到链接地址上，可以直接看到，不安全，但是效率高（提交数据有限制）
-->
<form action="" method="get">
<input type="text" name="username" id="" value="" placeholder="请输入用户名">
<input type="password" name="password" id="" value="">
<input type="submit" value="登陆">
<p>
<input type="image" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1599192702924&di=53aaa72d0c796c4481c246135a94815a&imgtype=0&src=http%3A%2F%2Fpngimg.com%2Fuploads%2Fbuttons%2Fbuttons_PNG26.png" width="200px" height="100px">
</p>
</form>
<!-- 百度搜索 -->
<form action="https://www.baidu.com/s">
<input type="text" name="wd" placeholder="请输入要搜索的内容" id="" value="">
<input type="submit" value="search" />
</form>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登陆注册</title>
</head>
<body>
<!--表单form
action：表单提交的位置，可以是网站，也可以是一个请求处理地址
method：post，get 提交方式
maxlength:：最长能写几个字符
size：文本框长度
-->
<form action="1.Fist.html" method="get">
<!--文本输入框：<input type="text"/>-->
<p>名字：
<input type="text" name="username" value="admin" maxlength="10" size="30" placeholder="请输入用户名">
</p>
<!--密码框 <input type="password"/>-->
<p>密码
<input type="password" name="password" value="123456" hidden>
</p>
<!--单选框标签
input type="radio"
value：单选框的值
name：表示组
-->
<p>性别：
<input type="radio" value="boy" name="gender" checked disabled />男
<input type="radio" value="girl" name="gender" />女
</p>
<!--多选框
input type="checkbox"
-->
<p>
<input type="checkbox" value="sleep" name="hobby"/>睡觉
<input type="checkbox" value="running" name="hobby"/>运动
<input type="checkbox" value="coding" name="hobby"/>敲代码
</p>
<!--按钮
input type="button" 普通按钮
input type="image" 图片按钮
-->
<p>
<input type="button" name="btn1" value="点击变长"/>
<input type="image" src="./image/test.jpg" width="100px" height="100px">
</p>
<!--下拉框，列表框-->
<p>国家：
<select name="country">
<option value="china">中国</option>
<option value="America">美国</option>
<option value="Japan">日本</option>
</select>
</p>
<!--文本域
cols="30" rows="10"
-->
<p>反馈：
<textarea name="textarea" cols="30" rows="10">文本内容</textarea>
</p>
<!--文件域
input type="file" name="files"
-->
<p>
<input type="file" name="files">
<input type="button" value="上传" name="upload">
</p>
<!--邮件验证-->
<p>邮箱：
<input type="email" name="email">
</p>
<!--URL-->
<p>URL：
<input type="url" name="url">
</p>
<!--数字-->
<p>数字：
<input type="number" name="num" max="100" min="0" step="10" required>
</p>
<!--滑块-->
<p>音量：
<input type="range" name="voice" min="0" max="100" step="2"/>
</p>
<!--搜索框-->
<p>搜索框：
<input type="search" id="search" name="search">
</p>
<!--自定义邮箱-->
<p>自定义邮箱：
<input type="text" name="define_mail" pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$">
</p>
<!--增强鼠标可用性-->
<p>
<label for="search">点我试试</label>
<input type="text" id="mark">
</p>
<!--单选框标签
提交表单按钮 submit
重置表单按钮 reset
-->
<p>
<input type="submit">
<input type="reset">
</p>
</form>
</body>
</html>
初级验证
设置input属性的初级验证
- url
- number
设置关键字的提示
- placeholder
- requird
- pattern
4、表格标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<table border="1px" cellpadding="10px" cellspacing="0">
<tr>
<!--colspan 跨列
table header cell ：th 表头单元格
-->
<th colspan="4">1-1</th>
</tr>
<tr>
<!--rowspan 跨列
table data cell ：td 数据单元
-->
<td rowspan="2">2-1</td>
<td>2-2</td>
<td>2-3</td>
<td>2-4</td>
</tr>
<!--table row 表行-->
<tr>
<td>3-1</td>
<td>3-2</td>
<td>3-3</td>
</tr>
</table>
</body>
</html>
5、图片标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--
src：用来告知图片的网络地址
-->
<!-- 网络资源 -->
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1597749368905&di=7568cd30640c18754776b89885dc9c8a&imgtype=0&src=http%3A%2F%2Fpics3.baidu.com%2Ffeed%2F64380cd7912397dd5fbaf700a84c90b0d2a287cd.png%3Ftoken%3De7bde1ce4edabb3752084aa0375f0c68" alt="">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1597749461264&di=ece195c797b08c06add004feb9a43076&imgtype=0&src=http%3A%2F%2Fww1.sinaimg.cn%2Flarge%2F81e8c950gw1f2uypgtg9yg208c076npf.gif" alt="">
<!-- 本地资源 -->
<img src="./img/idol.jpeg" alt="规定图像的替代文本">
</body>
</html>
6、媒体标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>媒体元素</title>
</head>
<body>
<!--音频和视频
src：资源路径地址
controls：控制条
autoplay：自动播放
-->
<video src="http://vfx.mtime.cn/Video/2019/03/19/mp4/190319222227698228.mp4" controls autoplay></video>
<audio src="https://m10.music.126.net/20200603100627/49025242e91c8aa14b6c28a881129032/yyaac/obj/wonDkMOGw6XDiTHCmMOi/2600780306/8e93/bc84/233a/84939e1464374d08955975b86649fe7b.m4a" controls autoplay></audio>
</body>
</html>
7、iframe标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<iframe id="hello" src="https://www.w3school.com.cn/tags/tag_table.asp" name="hello" frameborder="0" width="1000px" height="800px"></iframe>
<a href="https://www.baidu.com" target="hello">跳转</a>
</body>
</html>
8、自定义标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
nav{
display: block;
font-size: 2em;
margin-block-start: 0.67em;
margin-block-end: 0.67em;
margin-inline-start: 0px;
margin-inline-end: 0px;
font-weight: bold;
}
</style>
</head>
<body>
<nav>hello,world</nav>
<h1>hello,world</h1>
</body>
</html>
9、页面结构分析
- 一种规范，让别人看得懂你写的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>页面结构分析</title>
</head>
<body>
<header>
<h2>网页头部</h2>
</header>
<section>
<h2>网页主体</h2>
</section>
<footer>
<h2>网页脚部</h2>
</footer>
</body>
</html>
扫一扫
2271
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
