文章目录
HTML5(超文本标记语言)
Hyper Text Markup Language
- W3C(万维网联盟)国际性技术标准机构
- W3C标准包括:
- 结构化语言(HTML,XML)
- 表现标准语言(CSS)
- 行为标准(DOM、ECMAScript)
- HTML基本结构
网页基本信息
<!--注释样式-->
<!--DOCTYPE:告诉浏览器我们使用什么规范-->
<!DOCTYPE html>
<!--html:总的标签,所有信息都在这个标签内部-->
<html lang="en">
<!--head:代表网页头部-->
<head>
<!--meta:描述性标签,用来描述我们的网站的一些信息-->
<!--meta:一般用来做SEO-->
<meta charset="UTF-8">
<meta name="keywords" content="yaohui,persistenthuang">
<meta name="description" content="这是我的testHTML">
<!--title:网页标题-->
<title>我的第一个网页</title>
</head>
<!--body:代表网页主体部分-->
你好啊
<body>
</body>
</html>
基本标签:
- 标题标签:
- 段落标签:
- 换行标签:
- 水平线标签:
- 字体样式标签:
- 注释和特殊符号:
- 空格:
- >
- <
- ©版权所有
<!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>
<!--换行标签-->
第一行 <br/>
第二行 <br/>
第三杠 <br/>
第四行 <br/>
<!--水平线标签-->
<hr/>
<!--字体样式标签-->
<h1>字体样式标签</h1>
<strong>粗体字体</strong><br>
<em>斜体</em>
<hr/>
<!--特殊符号-->
空 格
><br>
<<br>
©版权所有<br>
</body>
</html>
图像标签(img)
- src:图片地址(必填)
- 相对地址,绝对地址
- …/表示上一级目录
- alt:图片名字(必填):加载不出来的时候会显示
- title:悬停文字
- width:宽度
- height:高度
<img src="../resoutces/images/1.jpg" alt="图片" title="悬停文字" width="200" height="200">
链接标签(a)
- 图像标签:
<!--点击文字跳转-->
<a href="https://www.baidu.com">点击我跳转百度</a>
<!--点击图像跳转-->
<a href="https://www.baidu.com" target="_blank">点击我跳转百度
<img src="../resoutces/images/1.jpg" alt="图片" title="悬停文字" width="" height="">
</a>
- 锚链接:实现页面间的跳转
<!--标记位置-->
<a name="top">顶部</a>
<!--锚链接跳转的标记位置-->
<a href="#top">回到顶部</a>
<!--跳转到相应页面的标记链接-->
<a href="https://www.baidu.com#top">回到顶部</a>
- 功能链接
<!--邮箱链接-->
<a href="mailto:persistenthuang@163.com">点击联系我</a>
<!--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>
行内元素和块标签
列表(ol,ul,dl)
<!--列表-->
<!--有序列表-->
<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>
<!--自定义列表-->
<!--dl:标签-->
<!--dt:列表名称-->
<!--dd:列表内容-->
<dl>
<dt>学科</dt>
<dd>java</dd>
<dd>python</dd>
<dt>位置</dt>
<dd>湖北</dd>
<dd>西安</dd>
</dl>
表格标签(table)
<!--表格标签:table
行 tr
列 td
-->
<!--border:表示边框宽度-->
<table border="1px" >
<tr>
<!--colspan:跨列-->
<td colspan="4">1.1</td>
</tr>
<tr>
<!--rowspan:跨行-->
<td rowspan="2">2.1</td>
<td>2.2</td>
<td>2.3</td>
</tr>
<tr>
<td>3.1</td>
<td>3.2</td>
</tr>
</table>
视频和音频(video audio)
<!--
视频:video
音频:audio
src:路径
controls:添加控制
autoplay:自动播放
-->
<video src="../resoutces/audio/1.mp4" controls>视频</video>
<audio src="../resoutces/audio/2.mp3" controls></audio>
网站页面结构
内联框架(iframe)
<!--内联框架:iframe
src:网站地址
-->
<iframe src="https://www.baidu.com" frameborder="0" width="1000px" height="800px"></iframe>
<hr>
<iframe src="" name="iframe1" frameborder="0" width="1000px" height="800px"></iframe>
<a href="https://www.baidu.com" target="iframe1">点击跳转到框架</a>
表单(from)
<!--表单语法:from
action:表单提交位置,可以是一个网站,也可以是一个请求处理地址
method:提交方式,
get:可以在url中看到提交信息,不安全
post:比较安全,传输大文件
-->
<from action="test01.html" method="get">
</from>
文本框(input text)
<!--文本输入框:
text
password
-->
<p>姓名<input type="text" name="username"></input></p>
<p>密码<input type="password" name="password"></p>
单选框标签(input radio)
<!--单选框标签:radio
value:单选框的值
name:表示组
-->
<p>
性别:
<input type="radio" value="boy" name="sex">男
<input type="radio" value="girl" name="sex">女
</p>
多选框标签(input checkbox)
<!--多选框标签:checkbox
value:单选框的值
name:表示组
-->
<p>爱好
<input type="checkbox" value="sleep" name="zu">睡觉
<input type="checkbox" value="code" name="zu">代码
<input type="checkbox" value="cheat" name="zu">聊天
</p>
按钮(input button)
<!--按钮:button
value:按钮显示名称
name:按钮值
button:普通按钮
image:图片按钮
submit:提交按钮
reset:重置按钮
-->
<p>
<input type="button" value="点击" name="btn1">
<input type="image" src="../resoutces/images/1.jpg">
<input type="submit" value="提交">
<input type="reset" value="重置">
</p>
下拉框(select option)
<!--下拉框:select
option:选项
selected:默认选中
-->
<p>国家:
<select name="列表名称" id="">
<option value="选项值" selected>中国</option>
<option value="选项值">英国</option>
<option value="选项值">印度</option>
<option value="选项值">瑞士</option>
</select>
</p>
文本域(textarea)
<!--文本域:textarea
cols\rows:行列
-->
<p>反馈:
<textarea name="textarea" cols="30" rows="10">文本内容</textarea>
</p>
文件域(input file)
<!--文件域:input file:
name:属性值
-->
<p>
<input type="file" name="files">
</p>
输入验证
<!--
邮件验证:email
URL验证:URL
数字验证:
max:最大值
min:最小值
step:步长
-->
<p>邮箱:
<input type="email" name="email">
<hr>
URL:
<input type="url" name="url">
<hr>
数字:
<input type="number" name="number" max="100" min="10" step="10">
</p>
滑块(input type)
<!--滑块:range
max:最大值
min:最小值
step:步长
-->
<p>音量:
<input type="range" name="range" max="100" min="10" step="2">
</p>
搜索框(input search)
<!--搜索框:search
-->
<p>搜索:
<input type="search" name="search">
</p>
label标签
- 增强鼠标可用性
- 点击可以指向其他组件
<!--label-->
<p>
<label for="12">点我搜索:</label>
<input type="text" id="12">
</p>
表单一些属性
- 隐藏域:hidden(隐藏了但是值还在)
- 只读:readonly
- 禁用:disabled
表单初级验证
- placeholder:提示用户输入信息
- required:输入不能为空
- pattern:正则表达式验证