HTML5
1.初识HTML
- Hyper Text Markup Language 超文本标记语言
- 超文本:文字、图片、音频、视频、动画
- 标记:利用标签的语言
- 2013-5-6-HTML5
- W3C(World Wide Web Consortium) 万维网联盟
- 结构化标准语言(HTML、XML)
- 表现标准语言(CSS)
- 行为标准(DOM、ECMAScrip)
2.网页基本信息
- 注释:<!— —>
- DOCTYPE 告诉浏览器我们使用什么规范
- Ctrl+/ 注释的快捷键
- meta 描述性标签,描述网站的一些信息,一般用来做SEO
<!--meta描述性标签,一般用来描述我们的网站,用来做SEO-->
<meta charset="UTF-8">
<meta content="hi" name="keywords">
<meta content="你好" name="description">
3.网页基本标签
- 标题标签h1、h2、h3
- 段落标签p
- 换行标签br
- 水平线标签hr
- 字体样式标签strong、em
- 注释和特殊符号
- pre标签:保留输入内容原始格式显示,不用输空格和换行
- body属性:
- bgcolor背景颜色
- background背景图片
<!--标题标签-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>
<!--段落标签-->
<p>两只老虎两只老虎爱跳舞</p>
<p>一直没有尾巴一直没有耳朵</p>
<p>真奇怪真奇怪</p>
<!--换行标签-->
两只老虎两只老虎爱跳舞 <br/> 一直没有尾巴一直没有耳朵
<!--水平线标签-->
<hr/>
<!--字体样式标签-->
<h1>字体样式标签</h1>
粗体: <strong>i love u</strong>
<br/>
斜体:<em>i love u</em>
<br>
<!--特殊符号-->
空 格:<br>
空 格
大于号>
<br>
小于号<
<br>
版权符号©
<!--特殊符号记忆方式
& ;
-->
4.图像标签
- 常见的图像格式
- JPG
- GIF
- PNG
- BMP
- ……
- img标签
<!--
src:图片地址
相对地址、绝对地址
../ 代表上一级目录
-->
<img alt="图片名字" src="../resources/image/1.JPG"title="悬停文字"width="300"height="300">
5.超链接标签a
- 分类
- 文本超链接
- 图像超链接
<a name="top">顶部</a>
<!--快捷键a标签+table
href必须填,表示跳转到哪个页面
target:表示窗口在哪里打开
_blank 在新页面中打开
——self在自己网页中打开
-->
<a href="1.我的第一个网页.html" target="_blank">点我跳转到页面1</a>
<br>
<br>
<a href="https://www.baidu.com" target="_self">点我跳转到百度</a>
<br>
<br>
<a href="1.我的第一个网页.html">
<img alt="图片名字" height="300" src="../resources/image/1.JPG" title="悬停文字" width="300">
</a>
<br>
<!--锚链接
1.先要标记名称
2.通过 # 跳转到标记
-->
<a href="#top">回到顶部</a>
<br>
<a name="down">底部</a>
<!--功能型链接
邮件链接:mailto:
QQ链接:在qq推广上自动生成代码,复制到代码里
-->
<a href="mailto:2951986411@qq.com">点击联系我</a>
<!--第三个页面直接跳转到第四个-->
<a href="4.超链接标签.html#down">页面4的底部</a>
6.块元素和行内元素
- 块元素
- 无论内容多少,独占一行
- p、h1-h6
- 行内元素
- 内容撑开宽度,左右都是行内元素的可以排在一行
- a、strong、em
7.列表标签
- 列表是信息资源的一种展示形式,可能使信息结构化和条理化,并以列表的样式显示出来,浏览者可以更快捷的获得相应信息
- 列表的分类
- 无序列表
- 有序列表
- 定义列表
<!--有序列表-->
<ol>
<li>java</li>
<li>c</li>
<li>c++</li>
<li>pythom</li>
<li>后端</li>
<li>前端</li>
</ol>
<hr>
<!--无序列表
应用范围:导航、侧边栏......
-->
<ul>
<li>java</li>
<li>c</li>
<li>c++</li>
<li>pythom</li>
<li>后端</li>
<li>前端</li>
</ul>
<hr>
<!--自定义列表
dl:标签
dt:列表title
dd:列表内容
-->
<dl>
<dt>语言</dt>
<dd>java</dd>
<dd>python</dd>
<dd>C</dd>
<dd>C++</dd>
<dt>位置</dt>
<dd>新疆</dd>
<dd>北京</dd>
<dd>南京</dd>
8.表格标签
- 作用:
- 简单通用
- 结构稳定
- 基本结构
- 单元格
- 行
- 列
- 跨行、合并单元格
- 跨列、合并单元格
<!--表格table
行 tr (row)
列 td (data)
-->
<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>
<td>2-4</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
<td>3-3</td>
</tr>
</table>
9.媒体元素
- 视频元素video、音频元素audio
<!--媒体元素:音频和视频
controls 控制开关、暂停、播放的按钮
autoplay 自动播放
-->
<video src="../resources/video/我该用什么把你留住——使用Clipchamp制作.mp4"controls autoplay></video>
<audio src="../resources/audio/福禄寿FloruitShow%20-%20我用什么把你留住.mp3 "controls autoplay></audio>
10.页面结构分析
<header><h2>网页头部</h2></header>
<section><h2>网页主体</h2></section>
<footer><h2>网页脚步</h2></footer>
11.iframe内联框架
<!--<!–<iframe allowfullscreen="true" border="0"–>-->
<!--<!– frameborder="no" framespacing="0" scrolling="no" –>-->
<!--<!– src="//player.bilibili.com/player.html?aid=925251644&bvid=BV1kT4y1G7KW&cid=179432384&page=1">–>-->
<!--</iframe>-->
<iframe src="https:\\www.bilibili.com"name="hello" frameborder="0"width="800px"height="400px"></iframe>
<iframe src=""name="hello" frameborder="0"width="800px"height="400px"></iframe>
<a href="1.我的第一个网页.html"target="hello">点击跳转</a>
12.表单语法
- 用户名、密码、输入框、按钮
- form标签 属性 method action 必填
- method规定如何发送表单数据,get、post
- action表示向何处发送表单数据
<h1>注册</h1>
<!--表单form
action:提交的位置可以是网站,也可以是一个请求处理地址
method:post\get提交方式
get方式提交可以在url中看到提交的信息,不安全但高效,不能传输大文件
post方式提交比较安全,可以传输大文件,但仍然可以被抓包发现
-->
<form action="1.我的第一个网页.html" method="post"></form>
<!--文本输入框 <input type="text"> -->
<p>名字:<input name="username" type="text"></p>
<!--密码框:<input type="password"name="pwd"-->
<p>密码:<input name="pwd" type="password"></p>
<p>
<input type="submit">
<input type="reset">
</p>
13.文本框和单选框
-
表单元素格式文章来源:https://www.toymoban.com/news/detail-502435.html
-
name:与java相关联,程序读取就读取name文章来源地址https://www.toymoban.com/news/detail-502435.html
<h1>注册</h1>
<!--表单form
action:提交的位置可以是网站,也可以是一个请求处理地址
method:post\get提交方式
get方式提交可以在url中看到提交的信息,不安全但高效,不能传输大文件
post方式提交比较安全,可以传输大文件,但仍然可以被抓包发现
value:默认初始值
maxlength:z最长写几个字符
size:文本框长度
-->
<form action="1.我的第一个网页.html" method="post"></form>
<!--文本输入框 <input type="text"> -->
<p>名字:<input maxlength="8" name="username" size="30" type="text" value="请输入用户名"></p>
<!--密码框:<input type="password"name="pwd"-->
<p>密码:<input name="pwd" type="password" ></p>
<!--单选框标签
type:radio
value:单选框的值
name:表示组,sex组只能选一个
-->
<p>性别:
<input type="radio" value="boy" name="sex">男
<input type="radio" value="girl"name="sex">女
</p>
<p>
<input type="submit">
<input type="reset">
</p>
14.按钮和多选框按钮
<!--多选框
type:checkbox
-->
<p>爱好
<input type="checkbox"value="sleep"name="hobby">睡觉
<input type="checkbox"value="code"name="hobby">敲代码
<input type="checkbox"value="play"name="hobby">玩
<input type="checkbox"value="eat"name="hobby">吃
</p>
<!--按钮
type:button
type:image----图片按钮
type:submit---提交按钮
type:reset---重置按钮
-->
<p>按钮
<input type="button"name="btn1"value="点击变长">
<input type="image"src="../resources/image/1.JPG">
</p>
15.列表框文本域和文件域
<!--下拉框、列表框
select
selected:默认选中
-->
<p>下拉框:
<select name="国家" >
<option value="china">中国</option>
<option value="usa">美国</option>
<option value="瑞士"selected>瑞士</option>
<option value="JP">日本</option>
</select>
</p>
<!--文本域
textarea
-->
<p>反馈
<br>
<textarea name="text1" cols="50" rows="10">文本内容</textarea>
</p>
<!--文件域
type:file
name:files
-->
<input type="file"name="files">
<input type="button"value="上传" name="upload">
16.搜索框滑块和简单验证
<!--邮件验证 type:email-->
<p>邮箱:
<input type="email"name="email">
</p>
<!--URL type:url-->
<p>URl:
<input type="url"name="url">
</p>
<!--数字 type:number-->
<p>数字:
<input type="number"name="num"max="100"min="0"step="10">
</p>
<!--滑块 type:range-->
<p>滑块
<input type="range"name="voice" min="0"max="100"step="2">
</p>
<!--搜索框 type:search-->
<p>搜索
<input type="search"name="search">
</p>
17.表单的应用
- 分类
- 隐藏域hidde
- 只读readonly标签
- 禁用disable标签
- 通过隐藏域传递默认值
<p>名字:<input maxlength="8" name="username" size="30" type="text" value="请输入用户名"readonly></p>
<!--密码框:<input type="password"name="pwd"-->
<p>密码:<input name="pwd" type="password"hidden value="123456"></p>
<p>性别:
<input name="sex" type="radio" value="boy"disabled>男
<input name="sex" type="radio" value="girl">女
</p>
<!--增强鼠标可用性
点击“你点我试试”,鼠标即锁定mark的位置
-->
<p>
<label for="mark">你点我试试</label>
<input id="mark" type="text">
</p>
18.表单初级验证
- 常用方式
- placeholder
- required
- pattern
//placeholder一直在输入框中显示起到提示信息作用
<p>名字:<input maxlength="8" name="username" size="30" type="text"placeholder="请输入用户名"></p>
//required 非空判断
<p>名字:<input maxlength="8" name="username" size="30" type="text"placeholder="请输入用户名"required></p>
//pattern 正则表达式
<!--pattern
可以通过脚本之家查找正则表达式
-->
<p>自定义邮箱:
<input type="text"name="diymail"pattern="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)* ">
</p>
到了这里,关于一篇随笔学会HTML的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!