HTML
HTML
Hyper Text Markup Language(超文本标记语言）
超文本包括：文字、图片、音频、视频、动画等。
HTML5，提供了一些新的元素和一些有趣的新特性，同时也建立了一些新的规则。这些元素、特性和规则的建立，提供了许多新的网页功能，如使用网页实现动态渲染图形、图表、图像和动画，以及不需要安装任何插件直接使用网页播放视频等。
W3C标准
W3C
World Wide Web Consortium(万维网联盟)
成立于1994年，Web技术领域最权威的国际中立性技术标准机构。
http://www.w3.org/
http://www.chinaw3c.org/
.org表示开源。
W3C标准包括
结构化标准语言(HTML、XML)
表现标准语言(CSS）
行为标准(DOM、ECMAScript）
用IDEA写网页
New Project>java>next>next>删掉src>new>directory>命名HTML>new>HTML file
设置浏览器
Setting>搜索web>Tools>Web Browsers>在path里添加本地浏览器.exe所在路径。
HTML基本结构
1.我的第一个网页
<!--注释快捷键ctrl+/-->
<!--DOCTYPE 告诉浏览器，当前使用的是什么协议，默认为html-->
<!DOCTYPE html>
<html lang="en">
<!--head标签表示网页头部-->
<head>
<!--meta 描述性标签，用来描述网站的一些信息-->
<meta charset="UTF-8">
<meta name="keywords" content="关键词">
<meta name="description" content="描述">
<!--title网页标题-->
<title>我的第一个网页</title>
</head>
<!--body标签代表网页主体-->
<body>
Hello,World!
<a href="4.链接标签.html#down">跳转到4.链接标签的底部</a>
</body>
<!--<body>、</body>等成对的标签，分别叫开放标签和闭合标签。
单独呈现的标签（空元素），如<hr/>，意为用/来关闭空元素，叫做自闭合标签。-->
</html>
2.基本标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基本标签</title>
</head>
<body>
<!--标题标签-->
<!--输入h1>按下tab键-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<!--段落标签-->
怎么触摸<p/>
开花沼泽<p/>
<p>嘿 等我找到你</p>
<p>试探你眼睛</p>
<!--水平线标签-->
<!--输入hr>点击tab键-->
<hr/>
<!--一般加上/作为自闭合符号-->
<!--换行标签-->
怎么触摸<br/>
开花沼泽<br/>
嘿 等我找到你<br/>
试探你眼睛<br/>
<!--还是同一段落，只是换行了-->
<!--字体样式标签-->
<!--粗体，斜体-->
粗体<strong>I love thee</strong>
斜体<em>I love thee</em>
<!--注释和特殊符号-->
<!--空格-->
空 格
<!--“>”符号-->
>
<!--"<“符号-->
<
<!--版权符号-->
©
<!--
特殊符号调用方式：
输入& ;
在&;中间输入首字母会出现提示，
如&g ;
-->
</body>
</html>
3.图像标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图像标签</title>
</head>
<body>
<!--输入img,按下tab键-->
<img src="../resources/image/1.png" alt="火狐图标" title="鼠标悬停在图片上时显示的文字" width="200" height="150">
<!--
new>Directory>命名resources,用来存放资源
右键resources>new>Directory>命名image,用来存放图片
src（必填）：图片地址
相对地址：从盘符开始写；
绝对地址：../表示当前位置的上级目录。
alt（必填）：当图片不能正常加载时，图片位置显示alt里输入的字符作为提示
title：鼠标悬停在图片上时显示title里输入的文字
width：自定义图片的宽度
height：自定义图片的高度
在>前输入空格会得到可以设置哪些项的提示
-->
</body>
</html>
4.链接标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>链接标签</title>
</head>
<body>
<!--锚标记：使用name作为标记-->
<a name="top">顶部</a>
<br/>
<!--页面间q链接-->
<!--输入a,按下tab键-->
<a href="1.我的第一个网页.html" target="_self">点击此处跳转到我的第一个网页</a>
<a href="http://www.baidu.com" target="_blank">点击此处跳转到百度</a>
<br/>
<a href="1.我的第一个网页.html">
<img src="../resources/image/1.png" alt="火狐图标" title="鼠标悬停在图片上时显示的文字">
</a>
<!--
href（必填）：表示要跳转到哪个页面
target：
_self（默认）：在当前标签页打开网页
_blank：在新标签页打开网页
-->
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<!--
锚链接
1.需要一个锚标记
2.跳转到锚标记
-->
<a href="#top">回到顶部</a>
<br/>
<!--锚标记,见1.我的第一个网页.html-->
<a name="down">底部</a>
<!--
功能性链接
邮件链接:mailto
-->
<a href="mailto:1463730887@qq.com">点击联系我</a>
<!--
行内元素和块元素
行内元素:
内容撑开宽度，左右都是行内元素的可以排在一行。
(a、strong、em...)
块元素:
无论内容多少，该元素独占一行。
(p、h1-h6...)
-->
</body>
</html>
5.列表标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表标签</title>
</head>
<body>
<!--有序列表
应用范围：试卷、问答
-->
<ol>
<!--输入li*5，按下tab键-->
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ol>
<!--无序列表
应用范围：导航、侧边栏
-->
<ul>
<!--输入li*5，按下tab键-->
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<!--自定义列表
dl：列表标签
dt：列表标题
dd：列表内容
应用范围：网站底部
-->
<dl>
<dt>标题</dt>
<dd>1</dd>
<dd>2</dd>
<dd>3</dd>
<dd>4</dd>
<dt>标题</dt>
<dd>1</dd>
<dd>2</dd>
<dd>3</dd>
<dd>4</dd>
</dl>
</body>
</html>
6.表格标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格标签</title>
</head>
<body>
<!--表格
为什么使用表格
简单通用、结构稳定
基本结构
单元格、行、列、跨行、跨列
-->
<!--表格标签：table
行：tr rows
列：td
跨列：colspan
跨行：rowspan
-->
<table border="1px">
<tr>
<td colspan="4">1-1</td>
<td>1-2</td>
<td>1-3</td>
<td>1-4</td>
</tr>
<tr>
<td rowspan="2">2-1</td>
<td>2-2</td>
<td>2-3</td>
<td>2-4</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
<td>3-3</td>
<td>3-4</td>
</tr>
</table>
</body>
</html>
7.媒体元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>媒体元素</title>
</head>
<body>
<!--
视频元素：video
src:视频路径
controls：出现进度条、下载按钮等控制信息
autoplay：打开网页自动播放视频
音频元素：audio
controls：出现进度条、下载按钮等控制信息
autoplay：打开网页自动播放音频
-->
<video src="../resources/video/某某.mp4" controls autoplay></video>
<audio src="../resources/audio/某某.mp3" controls autoplay></audio>
</body>
</html>
8.页面结构分析
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>页面结构分析</title>
</head>
<body>
<!--页面结构分析
header 网页头部区域的内容(用于页面或页面中的一块区域）
footer 网页脚部区域的内容（用于整个页面或页面的一块区域）
nav 导航类辅助内容
section 网页主体部分，Web页面中的一块独立区域
article 独立的文章内容
aside 相关内容或应用（常用于侧边栏）
-->
<header>
<h2>网页头部</h2>
</header>
<section>
<h2>网页主体</h2>
</section>
<footer>
<h2>网页脚部</h2>
</footer>
</body>
</html>
9.iframe内联框架
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>iframe内联框架</title>
</head>
<body>
<!--iframe内联框架
功能：实现网页里面嵌套另外一个网页,相当于在当前窗口开了一个独立的小窗口
src（必填）：嵌套页面地址
name：框架标识名
width：宽度
height：高度
-->
<!--用法一-->
<!--<iframe src="https://www.baidu.com" frameborder="0" width="1000px" height="800px"></iframe>-->
<!--用法二-->
<!--当一个新增窗口使用-->
<iframe src="" name="four" frameborder="0" width="1000px" height="800px"></iframe>
<a href="4.链接标签.html" target="four">点击跳转嵌套</a>
</body>
</html>
10.表单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单</title>
</head>
<body>
<!--表单 form
action:表示向何处发送表单数据，即表单提交的位置，可以是网站，也可以是一个请求处理地址。
method：提交表单数据的方式：get/post
get方式：可以在接收表单数据的网站的url里看到提交的信息，不安全，但高效不可以传输大文件；
post方式：不可以在url里看到提交的信息，安全，可以传输大文件。
-->
<!--input：输入框
type
text（默认）：文本输入框
password:密码框
submit：提交按钮
reset：重置按钮
checkbox：复选框
radio：单选框
image：图片框
search：搜索框
range：滑块
button：按钮
file：文件域
name
元素的标签名，所有的表单元素都需要一个name属性，有name属性元素才能提交。
value
给元素赋值。type为radio时必须指定一个值。
size
指定表单元素的初始宽度。
当type为text或 password时，表单元素的宽度以字符为单位。对于其他类型，宽度以像素为单位。
maxlength
type为text或 password时，输入的最大字符数。
当size<maxlength时，可以输入maxlength个数，文本框长度默认为maxlength而不是size。
当size>maxlength时，可以输入maxlength个数，文本框长度默认为size。
checked
type为radio或checkbox时，指定按钮是否是被选中。
selected
下拉框的指定选项是否默认被选中。
readonly
只读
disabled
禁用
hidden
隐藏
placeholder
输入框提示信息
required
必填
pattern
正则表达式 https://www.jb51.net/tools/regexsc.htm
-->
<h1>注册</h1>
<form action="1.我的第一个网页.html" method="get">
<p>名字：<input type="text" name="username1" value="123456" maxlength="11" size="15"></p>
<p>名字：<input type="text" name="username2" value="123456" readonly></p>
<p>名字：<input type="text" name="username2" placeholder="请输入名字"></p>
<p>名字：<input type="text" name="username2" required></p>
<p>密码：<input type="password" name="pwd"></p>
<p>性别：
<input type="radio" value="boy" name="sex" checked/>男
<input type="radio" value="girl" name="sex"/>女
<!--单选框三个必填项:type value name
value 单选框的值
name要有值且值相同，表示选项是同一组,才能达到单选效果。-->
</p>
<p>性别：
<input type="radio" value="boy" name="sex" disabled/>男
<input type="radio" value="girl" name="sex"/>女
</p>
<p>性别：
<input type="radio" value="boy"/>男
<input type="radio" value="girl"/>女
</p>
<p>爱好:
<input type="checkbox" value="sleep" name="hobby"/>睡觉
<input type="checkbox" value="eat" name="hobby" checked/>吃饭
<input type="checkbox" value="play" name="hobby"/>玩
</p>
<!--复选框三个必填项:type value name
value 复选框的值
name要有值且值相同，表示选项是同一组,才能达到复选效果。-->
<p>按钮:
<input type="button" name="btn1" value="单击变长">
<!--button的value的效果可以通过js实现-->
</p>
<p>点击图片提交图片
<input type="image" src="../resources/image/1.png">
</p>
<p>下拉框:
<select name="列表名称" id="">
<option value="one">选项1</option>
<option value="two" selected>选项2</option>
<option value="three">选项3</option>
<!--如果选择选项1,则提交的结果为列表名称=one
开放标签和闭合标签之间的字段是在表单页面显示的字段,真正提交的是value里的值-->
</select>
</p>
<p>文本域：
<textarea name="textarea" id="" cols="30" rows="10">文本内容</textarea>
</p>
<p>文件域：
<input type="file" name="files">
<input type="button" value="上传" name="upload">
</p>
<p>email：
<input type="email" name="email">
</p>
<p>URL：
<input type="url" name="url">
</p>
<p>数量：
<input type="number" name="num" max="100" min="10" step="10">
</p>
<p>滑块：
<input type="range" name="voice" min="0" max="100" step="2">
</p>
<p>
<label for="mark01">点击在id为mark处输入</label>
<label for="mark02">点击在id为mark处输入</label>
<input type="text" id="mark01"/>
</p>
<p>搜索框：
<input type="search" name="search" id="mark02">
</p>
<p>自定义邮箱：
<input type="text" name="diymail" pattern="/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/
/^[a-z\d]+(\.[a-z\d]+)*@([\da-z](-[\da-z])?)+(\.{1,2}[a-z]+)+$/或\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*">
</p>
<p>
<input type="submit" name="Submit" value="提交" >
<input type="reset" name="Reset" value="重置">
</p>
</form>
</body>
</html>
浙公网安备 33010602011771号