1.基本概念
HTML:Hyper Text Markup Language(超文本标记语言)
超文本包括:文字、图片、音频、视频、动画等
2.网页基本标签
- 标题标签
- 段落标签
- 换行标签
- 水平线标签
- 字体样式标签
- 注释和特殊符号
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基本标签</title>
</head>
<body>
<!-- 标题标签-->
<h1>断章</h1>
<h4>卞之琳</h4>
<!--段落标签-->
<!--快捷键:p+ tab-->
<p>你站在桥上看风景,</p>
<p>看风景人在楼上看你。</p>
<p>明月装饰了你的窗子,</p>
<p>你装饰了别人的梦</p>
<!--水平线标签-->
<hr/>
<h1>回答</h1>
<!--换行标签-->
卑鄙是卑鄙者的通行证,<br/>
高尚是高尚者的墓志铭,<br/>
<hr/>
<!--粗体,斜体-->
<h1>字体样式标签</h1>
粗体:<strong>i love you </strong>
斜体:<em>i love you </em>
<br/>
<!--特殊符号:开头:& 结尾:;-->
空 格<br/>
空 格<br/>
大于:><br/>
小于:<<br/>
版权符号:©suc<br/>
</body>
</html>
3.图像标签
常见图像格式:JPG、GIF、PNG、BMP
< img src="path" alt="text" title= "text" width="x" height="y"/>
- src:图像地址
- alt:图像的替代文字
- title:鼠标悬停提示文字
- width:图像宽度
- height:图像高度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图像标签</title>
</head>
<body>
<img src="../resources/image/01.jpg" alt="Taylor Swift" title="Taylor" width="220" height="293">
</body>
</html>
4.链接标签
<a href="path" target="目标窗口位置">链接文本或图像</a>
- href:链接路径(必填)
- target:链接在哪个窗口打开。
- _ blank :在新标签中打开
- _ self:在自己网页中打开
- 锚链接:页面间跳转
- 功能性链接:邮件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>链接标签</title>
</head>
<body>
<!--使用name作为标记-->
<a name="top">顶部</a>
<a href="2.基本标签.html" target="_blank">点击跳转到网页1</a><br/>
<a href="https://www.baidu.com" target="_self">百度</a><br/>
<a href="https://baike.baidu.com/item/%E6%B3%B0%E5%8B%92%C2%B7%E6%96%AF%E5%A8%81%E5%A4%AB%E7%89%B9/8472307?fromtitle=%E6%B3%B0%E5%8B%92%E6%96%AF%E5%A8%81%E5%A4%AB%E7%89%B9&fromid=23688107&fr=aladdin">
<img src="../resources/image/01.jpg" alt="Taylor Swift" title="Taylor" width="220" height="293">
</a><br/>
<!--锚链接-->
<a href="#top">回到顶部</a><br/>
<a name="down">down</a><br>
<!--功能性链接
邮件链接:mailto
QQ链接
-->
<a href="mailto:suc@mail.ustc.edu.cn">邮件</a><br/>
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=1938950036&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:1938950036:53" alt="点击我" title="点击我"/></a></body>
</html>
5.行内元素和块元素
块元素:无论内容多少,该元素独占一行
行元素:内容撑开宽度,左右都是行内元素的可以排在一行
6.列表
列表就是信息资源的一种展示形式,他可以使信息结构化和条理化,并以列表的样式显示出来,以便浏览者能更快捷地获得相应的信息。列表主要分为有序列表、无序列表、自定义列表。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表</title>
</head>
<body>
<!--有序列表-->
<ol>
<li>Python</li>
<li>Java</li>
<li>C/C++</li>
<li>GO</li>
</ol>
<hr>
<!--无序列表-->
<ul>
<li>Python</li>
<li>Java</li>
<li>C/C++</li>
<li>GO</li>
</ul>
<hr>
<!--自定义列表
dl:标签
dt:列表名称
dd:列表名称
-->
<dl>
<dt>语言</dt>
<dd>Python</dd>
<dd>Java</dd>
<dd>C++</dd>
<dt>城市</dt>
<dd>上海</dd>
<dd>苏州</dd>
<dd>杭州</dd>
</dl>
</body>
</html>
7.表格
优点:简单通用,结构稳定
基本结构:单元格、行、列、跨行、跨列
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<body>
<table border="1px">
<tr>
<!-- colspan:跨列 -->
<td colspan="3">1-1</td>
</tr>
<tr>
<!-- rowspan:跨行 -->
<td rowspan="2">2-1</td>
<td>2-2</td>
<td>2-3</td>
</tr>
<tr>
<td>3-2</td>
<td>3-3</td>
</tr>
</table>
</body>
</html>
8.视频和音频
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>媒体元素</title>
</head>
<body>
<!--音频与视频
src:路径
controls:控制条
autoplay:自动播放
-->
<video src="../resources/video/暴走大事件.mp4" controls height="300"></video>
<audio src="../resources/audio/一生所爱.mp3" controls></audio>
</body>
</html>
9.页面结构分析
元素名 | 描述 |
---|---|
header | 标题头部区域的内容(用于页面或页面中的一块区域) |
footer | 标记脚部区域的内容(用于整个页面或页面的一块区域) |
section | Web页面中的一块独立区域 |
article | 独立的文章内容 |
aside | 相关内容或应用(常用于侧边栏) |
nav | 导航类辅助内容 |
<!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>
10.iframe内联框架
<iframe src = "path" name= "mainFrame"></iframe>
- src:引用页面地址
- name:框架标识名
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内联框架</title>
</head>
<body>
<iframe src="https:www.baidu.com" name="百度" frameborder="0" height="800" width="1000"></iframe>
<a href="2.基本标签.html" target="百度">点击跳转</a>
</body>
</html>
11.表单语法
- action:表单提交的位置,可以是网站,也可以是一个请求处理地址
- method:post,get提交方式
- get:方式提交:我们可以在url中看到我们提交的信息,不安全,高效
- post:比较安全,传输大文件
表单的应用
隐藏域:hidden
只读:readonly
禁用:disabled
表单的初级验证
- placeholder : 提示信息
- required:非空判断
- pattern:正则表达式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录注册</title>
</head>
<body>
<h1>注册</h1>
<!--表单
action:表单提交的位置,可以是网站,也可以是一个请求处理地址
method:post,get提交方式
get:方式提交:我们可以在url中看到我们提交的信息,不安全,高效
post:比较安全,传输大文件
-->
<form action="1.我的第一个网页.html" method="get">
<!--文本输入框:input type="text" -->
<p>名字<input type="text" name="username" placeholder="请输入用户名" required></p>
<!--密码框-->
<p>密码<input type="password" name="pwd"></p>
<!-- 单选框标签
input type="radio"
value:单选框的值
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="sleep" name="hobby">睡觉
<input type="checkbox" value="code" name="hobby">代码
<input type="checkbox" value="chat" name="hobby">聊天
<input type="checkbox" value="game" name="hobby" checked>游戏
</p>
<!--按钮
input type="button":普通按钮
input type="image": 图像按钮
input type="submit": 提交
input type="reset": 重置
-->
<p>
<input type="button" name="btn1" value="确定">
</p>
<p>
<input type="image" src="../resources/image/02.jpg" width="200">
</p>
<!--下拉框-->
<p>国家:
<select name="列表名称" >
<option value="China">中国</option>
<option value="USA" selected>美国</option>
<option value="UK">英国</option>
<option value="Japan">日本</option>
</select>
</p>
<!--邮件验证-->
<p>邮箱:
<input type="email" name="email" required>
</p>
<!--URL验证-->
<p>URL:
<input type="url" name="url" required>
</p>
<!--数字-->
<p>数字:
<input type="number" name="num" max="100" min="0" step="10">
</p>
<!--滑块-->
<p>音量:
<input type="range" name="voice" max="100" min="0" step="2">
</p>
<!--搜索-->
<p>搜索:
<input type="search" name="search">
</p>
<!--增强鼠标可用性-->
<p>
<label for="mark">增强:</label>
<input type="text" id="mark">
</p>
<!--文本域-->
<p>反馈:
<textarea name="textarea" cols="25" rows="5">文本内容</textarea>
</p>
<!--文件域-->
<p>
<input type="file" name="files">
<input type="button" value="上传" name="upload">
</p>
<p>
<input type="submit">
<input type="reset" value="清空">
</p>
</form>
</body>
</html>