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>
<!--特殊符号-->
空&nbsp;格：<br>
空&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格
大于号&gt;
<br>
小于号&lt;
<br>
版权符号&copy;
<!--特殊符号记忆方式

&     ；

-->

4.图像标签

常见的图像格式
1. JPG
2. GIF
3. PNG
4. BMP
5. ……
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内联框架

<!--&lt;!&ndash;<iframe allowfullscreen="true" border="0"&ndash;&gt;-->
<!--&lt;!&ndash;        frameborder="no" framespacing="0" scrolling="no" &ndash;&gt;-->
<!--&lt;!&ndash;        src="//player.bilibili.com/player.html?aid=925251644&bvid=BV1kT4y1G7KW&cid=179432384&page=1">&ndash;&gt;-->
<!--</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.文本框和单选框

表单元素格式
name：与java相关联，程序读取就读取name

<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>

本文地址：https://www.xunjs.com/htmlcss/view_12367.html

Tags：学会随笔 HTML

寻技术

一篇随笔学会HTML

HTML5

1.初识HTML

2.网页基本信息

3.网页基本标签

4.图像标签

5.超链接标签a

6.块元素和行内元素

7.列表标签

8.表格标签

9.媒体元素

10.页面结构分析

11.iframe内联框架

12.表单语法

13.文本框和单选框

14.按钮和多选框按钮

15.列表框文本域和文件域

16.搜索框滑块和简单验证

17.表单的应用

18.表单初级验证

HTML5

1.初识HTML

2.网页基本信息

3.网页基本标签

4.图像标签

5.超链接标签a

6.块元素和行内元素

7.列表标签

8.表格标签

9.媒体元素

10.页面结构分析

11.iframe内联框架

12.表单语法

13.文本框和单选框

14.按钮和多选框按钮

15.列表框文本域和文件域

16.搜索框滑块和简单验证

17.表单的应用

18.表单初级验证

相关推荐