HTML5笔记

于 2020-09-06 23:39:10 发布
阅读量208 收藏 1
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43120504/article/details/108439042
版权

HTML5

1.First Html file

<!-- 向浏览器声明文件类型，默认Html -->
<!DOCTYPE html>
<!---->
<html lang="en">
<!-- 网页头 -->
<head>
 <!--  meta描述性标签，一般用于SEO  -->
 <meta charset="UTF-8">
 <meta name="keywords" content="htmlStudy">
 <meta name="description" content="Study Html">
 <!--  网页标题  -->
 <title>FirstHtml</title>
</head>
<!-- 网页主体 -->
<body>
 Hello World
</body>
</html>

2.标签

2.1.基本标签

<!--标题标签-->
<h1>一级标签</h1>
<h2>二级标签</h2>

<!--段落标签: 行距较大-->
<p>this is</p>
<p>mashiro</p>

<!--换行标签： 行距较小-->
this is<br/>
mashiro<br/>

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

<!--字体样式标签-->
<h1>字体样式标签</h1>
粗体： <strong>This is mashiro </strong> <br/>
斜体： <em>This is mashiro </em>

<!-- 特殊符号 -->
空格：&nbsp; <br/>
大于：&gt; <br/>
小于：&lt; <br/>
版权：&copy;   <br/>

2.2.图像标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签</title>
</head>
<body>
<!--
src:图片地址（必填）
alt：图片名字（必填）
title： 悬停文字
width & height： 长宽
-->
<img src="../resources/image/timg.jpg" alt="Shina_Mashiro" title="Mashiro"  width="1280" height="720">

</body>
</html>

2.3.超链接标签（*）

h1>页面间标签</h1>
<!--href：跳转网站的地址 -->
<a href="http://www.baidu.com/">跳转至baidu</a>
<br/>
<a href="http://www.baidu.com/">
    <img src="../resources/image/timg.jpg" alt="mashiro" title="Mashiro">
</a>
<br/>
<!-- target: 设置新页面的打开方式 
             _blank： 在新页面打开
             _self： 在当前页面打开
-->
<a href="http://www.baidu.com/" target="_blank">跳转至baidu</a>
<a href="http://www.baidu.com/" target="_parent">跳转至baidu</a>
<a href="http://www.baidu.com/" target="_self">跳转至baidu</a>
<a href="http://www.baidu.com/" target="_top">跳转至baidu</a>
<hr>

<h1>锚标签</h1>
<!--锚标记-->
<a name="Top">top</a>
<a href="#Top">跳转到top</a>
<a href="theFitstHtmlFiie.html#Top">挑战到theFitstHtmlFiie.html的Top处</a>
<hr>

<h1>功能标签</h1>
<!--
邮件链接：mailto
QQ链接： QQ推广工具
-->
<a href="mailto:2571693608@qq.com">联系QQ邮箱</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::53" alt="点击此处联系我" title="点击此处联系我"/></a>

2.4.块元素 & 行元素

  • 块元素： 该标签独占一行
  • 行元素： 左右行内元素都在同一行

2.5.列表标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表</title>
</head>
<body>
<!--1.有序列表-->
<ol>
    <li>Java</li>
    <li>Python</li>
    <li>Linux</li>
    <li>C/C++</li>
</ol>
<hr/>
<!--2.无序列表-->
<ul>
    <li>Java</li>
    <li>Python</li>
    <li>Linux</li>
    <li>C/C++</li>
</ul>
<hr/>
<!--3.自定义列表
        dt:标题
        dd：内容
-->
<dl>
    <dt>class</dt>
    <dd>Java</dd>
    <dd>Python</dd>
    <dd>Linux</dd>
    <dd>C/C++</dd>

    <dt>name</dt>
    <dd>mashiro</dd>
    <dd>nagisa</dd>
</dl>
<hr/>


</body>
</html>

2.6.表格标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格标签</title>
</head>
<body>
<!--
border:间隔宽度
tr：行
td：列
colspan：跨行
rowspan：跨列
-->
<table border="1px">
    <tr>
        <td colspan="4">学生成绩</td>
    </tr>
    <tr>
        <td rowspan="2">Mashiro</td>
        <td>Chinese</td>
        <td>100</td>
    </tr>
    <tr>
        <td>Math</td>
        <td>100</td>
    </tr>

    <tr>
        <td rowspan="2">Nagisa</td>
        <td>Chinese</td>
        <td>100</td>
    </tr>
    <tr>
        <td>Math</td>
        <td>100</td>
    </tr>
</table>

</body>
</html>

2.7.媒体元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>媒体元素</title>
</head>
<body>
<!--视频-->
<video src="../resources/Video/xxx" controls autoplay></video>
<!--音频-->
<audio src="../resources/Audio/xxx" controls autoplay></audio>

</body>
</html>

2.8.页面结构分析

  • header：标记头部区域的内容（用于页面或者页面的一块区域）
  • footer：标记脚部区域的内容（用于整个页面或者页面的一块区域）
  • section：Web页面中独立的区域
  • article：独立的文章内容
  • aside：相关内容或应用（侧边栏）
  • nav：导航类辅助内容
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面结构</title>
</head>
<body>

<header>
    <h2>页面头部</h2>
</header>

<section>
    <h2>页面内部</h2>
</section>

<footer>
    <h2>页面脚部</h2>
</footer>

</body>
</html>

2.9.Iframe内联框架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Iframe内联框架</title>
</head>
<body>
<!--
src：页面地址
name:页面名

target="Hello"：跳转在hello页面
-->
<iframe src="https://www.baidu.com" name="Hello" frameborder="0" width="1000px" height="800px"></iframe>
<a href="https://www.baidu.com" target="Hello">点击跳转</a>

</body>
</html>

3.表单标签

3.1.表单标签

<form action="theFitstHtmlFiie.html" method="post">
    <p>UserName: <input type="text" name="UserName"></p>
    <p>password: <input type="password" name="password"></p>


</form>

3.2.单选框

<!--单选框
    input type="radio"
    value： 指定选框的值
    name： 指定组（组名称要相同）-->
    <p>sex：
        <input type="radio" value="odoko" name="sex" checked>男
        <input type="radio" value="onna" name="sex">女
    </p>

3.3.多选框

<!--多选框
    input type="checkbox"
    value： 指定选框的值
    name： 指定组（组名称要相同)
    checked: 默认选择 -->
    <p>hobbies:
        <input type="checkbox" value="Java" name="hobby" checked>Java
        <input type="checkbox" value="Python" name="hobby">Python
        <input type="checkbox" value="C/C++" name="hobby">C/C++
        <input type="checkbox" value="Linux" name="hobby">Linux
    </p>

3.4.按钮

    <!-- 按钮
     button: 普通按钮
     image：图片按钮
     submit：提交按钮
     reset：重置按钮
     -->
    <p>buttons:
        <input type="button" name="btn1" value="hit">
        <input type="image" src="../resources/image/timg.jpg">
        <input type="submit"/>
        <input type="reset" value="clear"/>
    </p>

3.5.下拉框

 <!-- 下拉框
    selected: 默认选择
    -->
    <p>国家：
        <select name="country">
            <option value="china">中国</option>
            <option value="usa">美国</option>
            <option value="Japan" selected>日本</option>
            <option value="India">印度</option>
        </select>
    </p>

3.6.文本域

 <!--文本域
    cols & rows:文本框大小
    -->
    <p>反馈:
        <textarea name="textarea" cols="30" rows="10"></textarea>
    </p>

3.7.验证标签

    <!-- 邮箱验证    -->
    <p>邮箱：
        <input type="email" name="email">
    </p>
    <!--url验证-->
    <p>URL：
        <input type="url" name="url">
    </p>
    <!--数字验证
    step: 步长
    -->
    <p>Number：
        <input type="number" name="num" max="100" min="0" step="10">
    </p>

3.8.滑块

   <p>音量：0
        <input type="range" min="0" max="100" step="2">100
    </p>

3.9.搜索框

    <p>搜索：
        <input type="search" name="search">
    </p>

表单应用：

  • 1.只读readonly
 <p>UserName: <input type="text" name="UserName" value="admin" readonly></p>
  • 2.禁用disabled
<input type="radio" value="odoko" name="sex" disabled>男
  • 3.隐藏域hidden
   <p>password: <input type="password" name="password" hidden></p>
  • 4.增强鼠标可用性
    <p>
        <label for="mashiro">你点我试试</label>
    </p>

4.表单初级验证

4.1.提示信息 placeholder

   <p>UserName: <input type="text" name="UserName" placeholder="请输入用户名"></p>

4.2.非空判断 required

    <p>UserName: <input type="text" name="UserName" placeholder="请输入用户名" required></p>

4.3.正则表达式 pattern

    <p>自定义邮箱：
        <input type="email" name="diyEmail" pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$">
    </p>

5.链接

BV1x4411V75C

Shina_Mashiro
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
我的 HTML5 笔记
weixin_34293911的博客
03-23 102
1. 音频标签 css部分.progress{ width: 300px; height: 10px; background-color: black; border-radius: 5px; } .innerProgress{ width: 0;...
html5笔记
qq_36836332的博客
08-11 139
  盒子模型   前言 图片、表单元素一律看作是文本，它们并不是盒子。这个很好理解，比如说，一张图片里并不能放东西，它自己就是自己的内容   盒子的区域  一个盒子中主要的属性就5个：width、height、padding、border、margin。如下： width和height：内容的宽度、高度（不是盒子的宽度、高度）。 padding：内边距。 borde...
html5笔记.txt
10-25
自我整合的web之html5的学习历程笔记，常用api的各种介绍，实用实战
HTML5详细笔记
11-23
详细的HTML5笔记，HTML5笔记，HTML5笔记，HTML5笔记。
千锋html5线下培训html5笔记1~14天内容
11-25
千锋html5线下培训html5笔记1~14天内容,主要讲了html基础，css基础，css3基础，html5基础，移动端基础，每集我都做了笔记，比较清晰；
html5笔记每日一更.xmind
07-14
HTML笔记每日一更
HTML5 笔记
fancky58的博客
01-04 444
HTML 5 视频 Web 上的视频 直到现在，仍然不存在一项旨在网页上显示视频的标准。 今天，大多数视频是通过插件（比如 Flash）来显示的。然而，并非所有浏览器都拥有同样的插 HTML5 规定了一种通过 video 元素来包含视频的标准方法。 视频格式 当前，video 元素支持三种视频格式： Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件
决策概率论，一文读懂群体决策概率与个体决策概率的关系
最新发布
09-04
有一本书叫做《乌合之众》把群体批得一无是处，然而另一本书《群体的智慧》又阐述群体是有智慧的，群体越大，智慧越高。 读了这篇决策概率论的文章，让你对于群体和个体不再迷茫。
html5笔记+css3笔记
12-25
HTML5笔记： HTML5是一种用于构建网页的标准标记语言，它具有很多新的特性和功能。其中包括语义化标签、多媒体支持、本地存储、拖放功能等。HTML5还支持响应式设计，能够使网页在不同的设备上都能够良好的显示和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值