HTML5 Study

HTML5 Study

基本信息:

HTML :Hyper Text Markup Language 超文本标记语言

优势:

  • 市场的需求
  • 跨平台

html注释

<!-- 这是注释! -->
<!DOCTYPE html> 告诉浏览器用什么规范

网页头部

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

网页主题

<!--body标签代表网页的主体-->
<body>
    Hello World!
</body>

第一个网页

<!DOCTYPE html>
<html lang="en">
<!--head标签代表网页头部-->
<head>
    <!--meta描述性标签,用来描述网站的一些信息-->
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<!--body标签代表网页的主体-->
<body>
    Hello World!
</body>
</html>

基本标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--标题标签-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<hr/>
<!--段落标签-->
<p>html5真好玩</p>
<p>Linux真好玩</p>
<hr/>
<!--换行标签-->
aaaaaaaaaaa<br>
bbbbbbbbbbb<br>

<!--水平线-->
<hr/>

<!--粗体-->
<strong>I love Java</strong>
<hr/>
<!--斜体-->
<em>I love Java</em>

<hr/>

<!--特殊符号-->&nbsp;格:
<br/>

大于号:&gt;
<hr/>
小于号:&lt;
<hr/>
<!--版权符号-->
&copy; 版权所有鹿晗

</body>
</html>

图像标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签学习</title>
</head>
<body>

<!-- img学习
    src:相对地址(使用),绝对地址
    ../ -- 上一级目录

    alt: 图片名字
    title:悬停文字
-->
<img src="../resource/image/a.JPG" alt="电音盛典" title="悬停文字">

</body>
</html>

链接标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签</title>
</head>
<body>

<!--使用name作为标记-->
<a name="top"></a>

<!--href :必填跳转到哪个页面
target: 表示窗口在那里打开
_blank:在新标签中打开
_self:当前页面打开 默认
-->
<a href="https://www.baidu.com/" target="_blank">点击我跳到百度</a>
<a href="https://www.baidu.com/" target="_self">点击我跳到百度</a>

<!--锚链接
1.需要一个锚标记
2.跳转到标记
-->
<a href="#top">回到顶部</a>
</body>
</html>

锚链接:可以进行页面间跳转和页面内跳转

功能性链接:

<!--功能性链接-->
<!--
邮件链接 mailto
-->
<a href="mailto:927937414@qq.com">点击联系我</a>

行内元素和块元素

快元素:无论内容多少,该元素独占一行(p,h1,h1…)

行内元素:内容撑开宽度,左右都是行内元素的可以排在一行(strong,em,a…)

列表标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表</title>
</head>
<body>

<!--有序列表-->
<ol>
    <li>Java</li>
    <li>Python</li>
    <li>Linux</li>
    <li>C/C++</li>
</ol>
<!--无序列表
应用:导航栏、侧边栏
-->
<ul>
    <li>Java</li>
    <li>Python</li>
    <li>Linux</li>
    <li>C/C++</li>
</ul>
<!--自定义列表
dl: 标签
dt:列表名称
dd: 列表内容
应用:网站底部
-->
<dl>
    <dt>学科</dt>
    <dd>Python</dd>
    <dd>Java</dd>
    <dd>Linux</dd>
    <dd>C/C++</dd>
</dl>

</body>
</html>

表格

<!--表格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>
        <td>2-4</td>
    </tr>
    <tr>
        <td>3-1</td>
        <td>3-2</td>
        <td>3-3</td>
    </tr>
</table>

视频和音频

<!--视频
src: 视频路径
controls 控制条
autoplay自动播放
-->
<video src="" controls autoplay></video>

<!--音频
src=: 资源路径
controls:控制条
autoplay:自动播放
-->
<audio src="" controls autoplay></audio>

页面结构分析

<header>网页头部</header>
<nav>导航栏</nav>
<section><h1>网页主体</h1></section>
<footer>网页脚部</footer>

iframe内联框架

<!--iframe内联框架
src:地址
w-h 宽高
-->
<iframe src="" name="hello" frameborder="0" height="400px" width="800px"></iframe>
<a href="第一个网页.html" target="hello">点击跳转</a>

表单post和get请求(重点)

<h1>注册</h1>

<!--
action:表单提交的位置,可以是网站,也可以是一个请求的地址
method: 提交方式get、post请求
get方式提交,可以在url看到提交的信息不安全,高效
post方式:比较安全,传输大文件,
-->
<form action="第一个网页.html" method="post">
    <p>名字:<input type="text" name="username"></p>
    <p>密码:<input type="password" name="pwd"></p>
    <p>
        <input type="submit">
        <input type="reset">
    </p>
</form>

文本框和单选框

<h1>注册</h1>

<!--
value:默认值
-->
<form action="第一个网页.html" method="post">
    <p>名字:<input type="text" name="username" value="ngk"></p>
    <p>密码:<input type="password" name="pwd" value="123456"></p>
    <!--单选框标签
    input type="radio"
    value:单选框的值
    name:表示一个组
    -->
    <p>性别
        <input type="radio" value="boy" name="sex"/><input type="radio" value="girl" name="sex"/></p>
    <p>
        <input type="submit">
        <input type="reset">
    </p>
</form>

按钮和多选框

<!--多选框
    input type="checkbox"
    value:单选框的值
    name:表示一个组
	checked 默认选中
-->
<p>爱好
    <input type="checkbox" value="sleep" name="bobby">睡觉
    <input type="checkbox" value="code" name="bobby" checked>代码
    <input type="checkbox" value="girl" name="bobby">女孩
    <input type="checkbox" value="game" name="bobby">游戏
</p>
<!--按钮
    input type="button" 普通按钮
    input type="image" 图像按钮
    input type="submit" 提交按钮
    input type="reset" 重置
-->
<p>按钮
    <input type="button" name="btn" value="提交">
    <input type="image" src="../resource/image/a.JPG">
</p>
<p>
    <input type="submit">
    <input type="reset" value="清空表单">
</p>

下拉框、列表框

<!--下拉框
    selected默认选中
-->
<p>国家
    <select name="列表名称">
        <option value="china" selected>中国</option>
        <option value="usa">美国</option>
        <option value="ind">印度</option>
    </select>
</p>
<!--文本域 cols="50" rows="10"-->
<p>反馈
    <textarea name="textarea" cols="50" rows="10">文本内容</textarea>
</p>
<!--文件域-->
<p>
    <input type="file" name="files">
    <input type="button" value="上传" name="upload">
</p>

搜索框滑块和简单验证

<!--文本域 cols="50" rows="10"-->
<p>反馈
    <textarea name="textarea" cols="50" rows="10">文本内容</textarea>
</p>
<!--文件域-->
<p>
    <input type="file" name="files">
    <input type="button" value="上传" name="upload">
</p>
<!--邮件验证-->
<p>邮箱
    <input type="url" name="email">
</p>
<!--URL验证-->
<p>URL
    <input type="email" name="email">
</p>
<!--数字验证-->
<p>商品数量
    <input type="number" name="num" max="100" min="0" step="1" value="1">
</p>
<!--滑块-->
<p>音量
    <input type="range" name="voice" min="0" max="100" step="2">
</p>
<!--搜索框-->
<p>搜索
    <input type="search" name="search">
</p>

表单的应用

disable 锁定

hidden 隐藏域

readonly 只读

表单的初级验证

提示信息:placeholder 输入框控件中使用

placeholder="username"

非空判断:required

正则表达式:patten

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值