HTML5 Study

最新推荐文章于 2024-07-24 14:22:29 发布

gk_boke

最新推荐文章于 2024-07-24 14:22:29 发布

阅读量215

点赞数

分类专栏：前端三件套文章标签： html

本文链接：https://blog.csdn.net/gk_boke/article/details/108062905

版权

前端三件套专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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

gk_boke

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5 Study

HTML5学习基本信息：HTML ：Hyper Text Markup Language 超文本标记语言优势：市场的需求跨平台html注释<!DOCTYPE html> 告诉浏览器用什么规范网页头部<head> <meta charset="UTF-8"> <title>Title</title></head>网页主题<!--body标签代
复制链接

扫一扫