NecoMiMi > HTML5笔记

HTML5笔记

2022-04-08

学习笔记, html5

文档结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!doctype html><!--以html5解析如下代码-->
<html>
<head>
    <meta charset="utf-8";>
    <meta name=keywords" content=""><!--关键字-->
    <meta name="description" content=""><!--网站描述内容-->
    <title>网站</title>
    <!--设置一个小图标:-->
    <link rel="shortcut icon" href="https://i0.hdslb.com/bfs/tag/b13be00a840ad1c60770b0d352b84daadff67e7c.jpg" type="img/jpg">
    <style>
        /*书写样式的部分*/
    </style>
    <link rel="atylesheet" href="style.css";><!--用来引入外部样式文件-->
</head>
<body>
<p>//这是一个文本</p>
</body>
<script>
    //放脚本代码的地方
</script>
</html>

基本标签

生成文档结构快捷键 输入!后按tab或HTML:5后按tab

  • div：用于布局，将文本分层
  • hx：标题，从1级到6级
    1
    2
    <h1>一级标签<h1>
    <h2>二级标签<h2>
  • p：表示一个段落
    1
    <p>
  • br：表示换行，将一段文字换行
    1
    <br/>
  • hr：生成一条分割线 设置后的标签，分别为宽度、位置】颜色、高度
    1
    2
    <hr/>
    <hr width="80%" align="center" color="red" height="2px">
  • 粗体斜体
    1
    2
    粗体：<strong>i love you</strong>
    斜体：<em>i love you</em>
  • 空格
    1
    &nbsp
  • 特殊符号：&+各种代码

图片标签

==快速生成img标签（输入img+tab键）==

1
<img src="../resourse/image/cover_1.jpg" alt="星光咖啡厅与死亡之蝶" title="悬停标签" >

==每个属性后面接着引号按空格会自动跳出可以设置的属性菜单==

链接标签

==快速生成a链接（a+tab）==

href表示跳转到的页面
target: 表示窗口在哪打开
_blank在一个新标签打开
_self 在自己的网页中打开

1
<a href="tab.html" target="_blank">tab</a>

锚链接
1.需要一个锚标签
2.跳转到标记
3.#

1
2
3
<a name="top">顶部</a>
下方代码用于跳到顶部的标记top
<a href="#top">回到顶部</a>

邮件链接：mailto：+邮箱

1
<a href="mailto:673269043@qq.com">点击联系邮箱</a>

行内元素和块元素

  • 块内元素
    无论内容多少，元素独占一行（比如p、h1-h6…）
  • 行内元素
    内容撑开宽度，左右都是行内元素可以再排一行（a、strong、em…）

列表标签

  • 有序列表（Ordered List）
1
2
3
4
<ol>
    <li>内容1</li>
    <li>内容2</li>
</ol>
  • 无序列表（Unordered List）
1
2
3
4
<ul>
    <li>内容1</li>
    <li>内容2</li>
</ul>

  • 自定义列表（definition lists）

    dl:标签
    dt:列表名称
    dd:列表内容

1
2
3
4
5
6
7
8
9
<dl>
    <dt>标题1</dt>
    <dd>内容1</dd>
    <dd>内容2</dd>

    <dt>标题2</dt>
    <dd>内容1</dd>
    <dd>内容2</dd>
</dl>

表格

表格（table）
行 tr （table rows）
列(表格中的单元格) td （table data cell）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<table border="1px">
    <tr>
    <!--跨列colspan-->
        <td colspan="4">1-1</td>
        <!--第一个元素跨四列-->

    </tr>
    <tr>
    <!--跨行 rowspan-->
        <td rowspan="2">2-1</td>
        <!--2-1向下跨两行-->
        <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>
    <tr>
        <td>4-1</td>
        <td>4-2</td>
        <td>4-3</td>
        <td>4-4</td>
    </tr>
</table>

视频和音频

scr:资源路径
controls:控制条
autoplay:自动播放

1
2
3
<video src="../resourse/video/video.mp4" controls autoplay></video>

<audio src="../resourse/audio/米津玄師%20-%20Lemon.mp3" controls></audio>

页面结构

1
2
3
4
5
6
7
8
9
10
11
<header>
    网页头部
</header>

<secter>
    网页主体
</secter>

<footer>
    网页脚部
</footer>

header：标题头部区域内容
footer：标记脚部区域的内容
section：web页面中的一块独立区域
article：独立文章内容
aside：相关内容或应用
nav：导航类辅助内容

内联框架

iframe：用于在页面嵌入网页等

嵌入跳转链接的方法

1
2
<iframe src="" name="hello" frameborder="0" width="1000px" height="800px"></iframe>
<a href="4.链接标签.html"target="hello">点击跳转</a>

==与跳转到顶部方法类似，为给iframe一个name属性定义一个标签，然后再用a标签跳转==

表单学习

form标签
action:表单提交的位置，可以是网站，也可以是一个请求处理
method:post,get提交方式

get方式提交，我们可以在url中看到我们提交的信息，不安全但高效
post比较安全，可传输大文件。

input type 用于设置表单的形式

1
2
3
4
5
6
7
8
9
10
11
12
13
<form action="3.图像标签.html"method="post">
     <!--文本输入框：input type="text"
    value="666"     默认初始值
    maxlength="8"   最长能写几个字符
    size="30"       文本框长度
    -->
    
    <p>名字：<input type="text"name="username"></p>
    <!--文本输入框：input type="password"-->
    <p>密码：<input type="password"name="pwd"></p>
    
    
</form>

  • 单选框标签
    input type=”radio”
    value:单选框的值
    name:表示组，若无组或组不一样则可以将两个都选上

    1
    2
    3
    4
    <p>性别：
        <input type="radio"value="boy"name="sex">男
        <input type="radio"value="girl"name="sex">女
    </p>

  • 多选框标签
    input type=”checkbox”
    checked 默认选择

1
2
3
4
5
6
7
<p>爱好：
    <input type="checkbox"value="sleep"name="hobby">睡觉
    <input type="checkbox"value="chat"name="hobby">聊天
    <input type="checkbox"value="game"name="hobby">游戏
    <input type="checkbox"value="code"name="hobby">敲代码
    <input type="checkbox"value="eat"name="hobby">吃饭
</p>
  • 按钮标签
    input type=”button” 按钮
    input type=”image” 图片按钮
    input type=”submit” 提交按钮
    input type=”reset” 重置
1
2
3
4
5
6
7
8
9
<p>按钮：
        <input type="button"name="btn1"value="点击变长">
        <input type="image"src="../resourse/image/cover_1.jpg">
    </p>
    
    <p>
        <input type="submit">
        <input type="reset">
    </p>
  • 文本域
    cols 行
    rows 列
1
2
3
<p>反馈：
    <textarea name="textarea" id="" cols="50" rows="10">文本内容</textarea>
</p>
  • 文件域
    input type=”file”
1
2
3
4
<p>
    <input type="file" name="files">
    <input type="button" value="上传" name="upload">
</p>
  • 邮件验证
1
2
3
<p>邮箱：
    <input type="email" name="email">
</p>

  • URL

    1
    2
    3
    <p>url：
        <input type="url" name="url">
    </p>

  • 数字

    1
    2
    3
    <p>商品数量：
        <input type="number" name="number" max="100" min="0" step="1">
    </p>

  • 滑块

1
2
3
<p>音量：
    <input type="range"name="voice" min="0"max="100"step="2">
</p>
  • 搜索框
1
2
3
<p>搜索：
    <input type="search"name="search">
</p>

==readonly只读
disable禁止
hidden隐藏==

  • 增强鼠标可用性
1
2
3
4
<p>
    <label for="mark">你点我试试</label>
    <input type="text"id="mark">
</p>

==
==提醒输入的东西 placeholder=”请输入用户名”
非空判断 required
正则表达 pattern=””==