HTML5学习

最新推荐文章于 2024-07-14 14:30:45 发布

weixin_43887322

最新推荐文章于 2024-07-14 14:30:45 发布

阅读量67

点赞数

文章标签： html5 学习 html

本文链接：https://blog.csdn.net/weixin_43887322/article/details/122993750

版权

HTML5学习

1.初始HTML

W3C标准包括：

结构化标准语言（html，xml）
表现标准语言（CSS）
行为标准（DOM,ECMAScript）

2.网页基本标签

2.1网页基本标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--标题标签-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4> 
<h5>五级标签</h5>
<h6>六级标签</h6>
<!--段落标签-->
<p>啦啦啦      啦啦啦 </p><!--p标签独占一段-->
<p>我是卖报的      小行家</p>
<!--换行标签，单标签-->
<br>
<!--水平线标签-->
<hr>
<!--粗体 斜体-->
<strong> 粗体 </strong>
<em> 斜体  </em>
<br>
<!--特殊符号，空格 大于号 小于号 版权符号-->
空格：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&gt;<br>
&lt;<br>
&copy;版权所有<br>
</body>
</html>

块元素：无论内容多少，该元素独占一行，如p、h1-h6
行内元素：内容撑开宽度，左右都是行内元素的可以排在一行，如a、strong、em

2.2图像标签

<!--src:图像地址,分相对地址和绝对地址(一般指磁盘下，不推荐)，../上一级目录
,alt:图像代替文字,title:鼠标悬停提示文字,width、height:宽和高
-->
<img src="../resources/1.jpg" alt="czx图像" title="悬停文字" width="300" height="300">

2.3超链接标签极其应用

<body>
<!--使用name作为标记-->
<a href="top">顶部</a><br>
<a href="https://www.baidu.com" target="_blank">啦啦啦</a>
<!--锚链接
1.需要一个锚标记
2.跳转到标记 #+链接-->
<a href="#top">回到顶部</a>
<!--功能性链接
邮件链接：mailto
QQ链接：-->
<a href="mailto:1220894232@qq.com">点击联系我</a>
<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::52" alt="写个推广" title="写个推广"/></a>
</body>

2.4 列表标签

列表是信息资源的一种展示，分为无序、有序和定义列表

<body>
<!--有序列表
应用：试卷，范围等-->
<ol>
    <li>java</li>
    <li>python</li>
    <li>html</li>
    <li>c++</li>
    <li>c#</li>
</ol><hr/>
<!--无序列表
应用：导航，侧边栏等-->
<ul>
    <li>java</li>
    <li>python</li>
    <li>html</li>
    <li>c++</li>
    <li>c#</li>
</ul>
<!--定义列表
dl:标签
dt：列表名称
dd：列表内容
应用：公司网站底部-->
<dl><dt>学科</dt>
    <dd>java</dd>
    <dd>python</dd>
    <dd>html</dd>
    <dd>c++</dd>
<dt>位置</dt>
<dd>厦门</dd>
<dd>福州</dd>
<dd>泉州</dd>
</dl>
</body>

2.5表格标签

<body>
<!--表格table
行 tr
列 td-->
<table border="1"  >
    <tr>
        <!--colspan跨列-->
        <td colspan="3" align="center">学生成绩</td>
        </tr>
    <tr><!--colspan跨行-->
        <td rowspan="2">zx</td>
        <td>语文</td>
        <td>100</td>
        </tr>
         <tr><td >数学</td>
        <td>100</td>

       </tr>
    <tr><!--colspan跨行-->
        <td rowspan="2">czx</td>
        <td>语文</td>
        <td>100</td>
    </tr>
    <tr><td >数学</td>
        <td>100</td>
    </tr>
</table>
</body>

2.6 音频和视频

<body>
<!--音频和视频
src:资源路径
controls：控制开关
autoplay：自动播放-->
<video src="../resources/video/片头.mp4" controls autoplay></video>
<audio src="../resources/audio/片头.mp4" controls autoplay></audio>
</body>

2.7 页面结构分析

<body>
<header><h2>网页头部</h2></header>
<section><h2>网页主体</h2></section>
<footer><h2>网页脚部</h2></footer>
</body>

2.8 iframe内联框架

<body>
<!--内联框架iframe
src:引用页面地址
name：框架标识名
width height:宽度和高度-->
<iframe src="" frameborder="0" name="hello" width="500px" height="500px"></iframe>
<a href="https://blog.kuangstudy.com" target="hello"> 跳转</a>
</body>

3.表单（重点）

3.1初识表单post和get提交

<body>
<h1>注册</h1>
<!--表单form
action:表单提交的位置，可以是网站，可以是一个请求处理地址
method: post  get提交方式
get方式提交：我们可以在url中看到提交的信息，不安全但是高效
post方式提交：较安全，传输大文件
-->
<form action="1.我的第一个html网页.html" method="get">
    <!--文本输入框：input type="text"-->
    <p>名字：<input type="text" name="username"></p>
    <p>密码：<input type="password" name="pwd"></p>
    <p><input type="submit"><input type="reset"></p>

</form>
</body>

3.2 文本框和单选框

<!--单选框标签
    input type="radio"
    value:单选框的值
    name：表示组-->
    <p>性别：
        <input type="radio" value="boy" name="sex">男
        <input type="radio" value="gril" name="sex">女</p>

3.3 按钮和多选框

<!--单选框标签
    input type="radio"
    value:单选框的值
    name：表示组-->
    <p>性别：
        <input type="radio" value="boy" name="sex">男
        <input type="radio" value="gril" name="sex">女</p>
    <!--多选框标签
    input type="radio"
    value:单选框的值
    name：表示组-->
    <p>性别：
        <input type="checkbox" value="sleep" name="hobby">睡觉
        <input type="checkbox" value="code" name="hobby">打代码
        <input type="checkbox" value="chat" name="hobby">聊天
        <input type="checkbox" value="game" name="hobby">游戏</p>
    <!--按钮
    input type="button" 普通按钮
    input type="image"  图像按钮
    input type="submit" 提交按钮
    input type="reset"  重置-->
    <p>按钮：
        <input type="button" name="btn1" value="点击边长">
        <input type="image" src="../resources/image/1.jpg" >
    </p>
    <p><input type="submit"><input type="reset" value="清空表单"></p>

3.4 列表框文本域和文件域

 <!--下拉框/列表框-->
    <p>国家：
        <select name="列表名称" >
            <option value="China" selected>中国</option>
            <option value="America">美国</option>
            <option value="bajisitan">巴基斯坦</option>
            <option value="chaoxian">朝鲜</option>

        </select></p>
    <!--文本域-->
    <p>反馈：
        <textarea name="textarea" cols="50" rows="10">文本内容</textarea></p>
    <p><input type="submit"><input type="reset" value="清空表单"></p>
    <!--文件域-->
    <p>反馈：
        <input type="file" name="files">
        <input type="button" value="上传" name="upload"></p>

3.5 搜索框滑块和简单验证

<!--邮箱验证-->
    <p>邮箱：<input type="email" name="email"></p>
    <!--url验证-->
    <p>URL：<input type="url" name="url"></p>
    <!--数字-->
    <p>URL：<input type="number" name="number" max="100" min="0" step="10"></p>
    <!--滑块-->
    <p>滑块：<input type="range" name="range" min="0" max="100" step="2"></p>
    <!--搜索框-->
    <p>搜索框：<input type="search" name="search" ></p>

3.6 表单的应用

<!--增强鼠标可用性-->
    <label for="mark">点个试试</label>
    <input type="text" id="mark"></p>
<!--隐藏域-->
hidden
<!--只读-->
readonly
<!--禁用-->
disabled

3.7 表单初级验证

常用:placeholder提示信息、required非空判断、pattern正则表达式

4.HTML总结

略

weixin_43887322

关注

0
点赞
踩
0

收藏

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

HTML5学习1.初始HTMLW3C标准包括：结构化标准语言（html，xml）表现标准语言（CSS）行为标准（DOM,ECMAScript）2.网页基本标签2.1网页基本标签<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body>&lt
复制链接

扫一扫