HTML
HTML： Hyper Text Markup Language （超文本标记语言）
1. 网页基本结构
<!--
注释快捷键 ctr+/
DOCTYPE:告诉浏览器使用什么规范
默认为html
-->
<!DOCTYPE html>
<html lang="en">
<!-- head标签代表网页头部-->
<head>
<!-- meta描述标签，用来描述网站的一些信息 -->
<!-- meta一般用来做SEO(搜索引擎优化) -->
<meta charset="UTF-8">
<meta name="keywords" content="青城,FirstWed">
<meta name="description" content="学习html">
<!-- 网页标题 -->
<title>我的第一个网页</title>
</head>
<!-- body标签代表网页主题-->
<body>
Hello World！
</body>
</html>
网页主体(body)的基本结构，即页面结构
2. 网页基本标签
- 标题标签
- 段落标签
- 换行标签
- 水平线标签
- 字体样式标签
- 注释和特殊符号
生成标签快捷键：标签名 + tab
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基本标签学习</title>
</head>
<body>
<!--标题标签-->
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<!--段落标签-->
<p>大江东去，浪淘尽，千古风流人物。</p>
<p>故垒西边，人道是，三国周郎赤壁。</p>
<p>乱石穿空，惊涛拍岸，卷起千堆雪。</p>
<p>江山如画，一时多少豪杰。</p>
<p>遥想公瑾当年，小乔初嫁了，雄姿英发。</p>
<p>羽扇纶巾，谈笑间，樯橹灰飞烟灭。</p>
<p>故国神游，多情应笑我，早生华发。</p>
<p>人生如梦，一尊还酹江月。</p>
<!--水平线标签-->
<hr/>
<!--换行标签-->
君不见，黄河之水天上来，奔流到海不复回。<br/>
君不见，高堂明镜悲白发，朝如青丝暮成雪。<br/>
人生得意须尽欢，莫使金樽空对月。<br/>
天生我材必有用，千金散尽还复来。<br/>
烹羊宰牛且为乐，会须一饮三百杯。<br/>
岑夫子，丹丘生，将进酒，杯莫停。<br/>
与君歌一曲，请君为我倾耳听。<br/>
钟鼓馔玉不足贵，但愿长醉不愿醒。<br/>
古来圣贤皆寂寞，惟有饮者留其名。<br/>
陈王昔时宴平乐，斗酒十千恣欢谑。<br/>
主人何为言少钱，径须沽取对君酌。<br/>
五花马，千金裘，呼儿将出换美酒，与尔同销万古愁。<br/>
<hr/>
<!--粗体 斜体-->
<strong>I Love You</strong>
<br/>
<em>But You Don't Love Me</em>
<br/>
<!--部分特殊符号-->
空格： 10个空格
<br/>
大于符号：>
<br/>
小于符号：<
<br/>
版权符号：©版权所有青城
<br/>
<!--
特殊符号 &开头 ;结尾
-->
</body>
</html>
运行结果：
3. 图像标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图像标签学习</title>
</head>
<body>
<!--img标签：
src(必填)：图片地址
相对路径(推荐使用)，绝对路径
../ 上一级目录
alt(必填)：图片加载失败返回文字
title：悬停文字
width、height：图片宽、高
-->
<img src="../resources/image/img.png" alt="好看的图片" title="好看的图片" width="1722" height="2562">
</body>
</html>
4. 链接标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>链接标签学习</title>
</head>
<body>
<!--设置锚标记-->
<a name="top"></a>
<!--a标签学习
href(必填)：表示要跳转到哪个页面
target：表示窗口在哪里打开
_blank 表示在新标签页打开链接
_self 表示在本标签页中打开（默认为_self）
-->
<a href="3.图像标签.html">点击我跳转</a>
<hr/>
<a href="https://www.baidu.com" target="_blank">百度一下</a>
<hr/>
<!--图片超链接-->
<a href="https://www.baidu.com">
<img src="../resources/image/img.png" alt="好看的图片" title="好看的图片" width="1722" height="2562">
</a>
<hr/>
<!--锚链接
1.需要一个锚标记
2.跳转到标记 # + 锚标记名
锚链接还可以跳转到别的网页链接中的标记位处
-->
<a href="#top">回到顶部</a>
<hr/>
<!--邮件链接-->
<a href="mailto:154438396@qq.com">点击前往邮箱</a>
<hr>
<!--QQ链接 其实就是图片超链接-->
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=&site=qq&menu=yes">
<img border="0" src="http://wpa.qq.com/pa?p=2::53" alt="快来和我成为好朋友吧！" title="快来和我成为好朋友吧！"/>
</a>
</body>
</html>
5. 列表
- 无序列表
- 有序列表
- 自定义列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表学习</title>
</head>
<body>
<!--有序列表-->
<ol>
<li>Java</li>
<li>Python</li>
<li>C/C++</li>
</ol>
<hr/>
<!--无序列表-->
<ul>
<li>Java</li>
<li>Python</li>
<li>C/C++</li>
</ul>
<hr/>
<!--自定义列表
dl：标签
dt：列表名称
dd：列表内容
-->
<dl>
<dt>计算机语言</dt>
<dd>Java</dd>
<dd>Python</dd>
<dd>C/C++</dd>
<dt>城市</dt>
<dd>西安</dd>
<dd>杭州</dd>
<dd>北京</dd>
</dl>
</body>
</html>
运行结果：
6. 表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格学习</title>
</head>
<body>
<!--表格
table
行：tr
列：td
边框：border
居中：align="center"
-->
<table border="1px" align="center">
<tr>
<!--colspan：跨列-->
<td colspan="3" align="center">1-1/2/3</td>
</tr>
<tr>
<!--rowspan：跨行-->
<td rowspan="2">2/3-1</td>
<td>2-2</td>
<td>2-3</td>
</tr>
<tr>
<td>3-2</td>
<td>3-3</td>
</tr>
</table>
</body>
</html>
运行结果：
7. 媒体元素__视频、音频
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>媒体元素学习</title>
</head>
<body>
<!--视频
src：资源路径
controls：控制台
autoplay：自动播放
-->
<video src="../resources/video/video.mp4" controls autoplay></video>
<!--音频-->
<audio src="../resources/audio/Wake.m4a"controls></audio>
</body>
</html>
8. iframe内联框架
内联框架即在网页中嵌套一个网页
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内联框架iframe学习</title>
</head>
<body>
<!--iframe内联框架
src：地址
w-h：宽-高
name：框架标识名
-->
<iframe src="https://www.bilibili.com" frameborder="0" width="1500px" height="1000px" name="hello"></iframe>
<!--添加一个跳转连接 可以在该框架中跳转到指定链接-->
<a href="3.图像标签.html" target="hello">点击跳转</a>
<!--<iframe src="//player.bilibili.com/player.html?aid=582575238&bvid=BV1w64y1u7MV&cid=174086231&page=1"-->
<!-- scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true">-->
<!--</iframe>-->
</body>
</html>
9. 表单、控件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单学习</title>
</head>
<body>
<!--表单form
表单在网页中主要负责数据采集功能，例如登录框、注册框等。
action：表单提交位置，可以是网站，也可以是一个请求处理地址
method：post、get 提交方式
get方式提交，可以在url中看到提交信息，高效但不安全
post方式提交，比较安全，可以传输大文件
一些常用的控件属性：
隐藏：hidden
只读：readonly
禁用：disabled
提示信息：placeholder（用于输入框或者文本域）
不能为空：required
正则表达式：pattern
-->
<form action="1.我的第一个网页.html" method="get">
<p><h1>注册界面</h1></p>
<!--文本输入框
input type="text"
value：默认初始值
maxlength：最多能写多少字符
size：文本框的长度
-->
<p>用户名：<input type="text" name="username"></p>
<!--密码输入框 input type="password" -->
<p>密 码：<input type="password" name="pwd"></p>
<!--单选框
input type="radio"
value：单选框的值
name：表示组
单选框的name属性必须一样，name一样的单选框中只可选择一项
-->
<p>性别：
<input type="radio" value="boy" name="sex">男
<input type="radio" value="girl" name="sex">女
</p>
<!--多选框
input type="checkbox"
-->
<p>爱好：
<input type="checkbox" value="sing" name="hobby">唱
<input type="checkbox" value="dance" name="hobby">跳
<input type="checkbox" value="rap" name="hobby">rap
<input type="checkbox" value="basketball" name="hobby">篮球
</p>
<!--下拉框-->
<p>国家：
<select name="country">
<option value="CN">中国</option>
<option value="US">美国</option>
<option value="EN">英国</option>
<option value="JP">日本</option>
</select>
</p>
<!--文本域-->
<p>申请理由：<textarea name="textarea" cols="30" rows="5">文本内容</textarea></p>
<!--文件选择 input type="file" -->
<p><input type="file" name="files"></p>
<!--
邮箱验证 input type="email"
url验证 input type="url"
数字验证 input type="number"
-->
<p>
邮箱：<input type="email" name="email">
url：<input type="url" name="url">
数字：<input type="number" name="num" step="1">
</p>
<!--滑块 input type="range"
min/max：最小/大值
step：步长
-->
<p><input type="range" name="range" min="0" max="100" step="10"></p>
<!--搜索框 input type="search"-->
<p>搜索：<input type="search" name="search"></p>
<!--按钮
普通按钮 input type="button"
提交按钮 input type="submit"
重置按钮 input type="reset" -->
<p>
<input type="button" value="你点我没用" name="btn">
<input type="submit" value="点我提交">
<input type="reset" value="点我重置">
</p>
</form>
</body>
</html>
运行结果：
扫一扫
479
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
