<!DOCTYPE html>:使用html5规范

html： html文档的根标签

head： 头标签。用于指定html文档的一些属性。引入外部的资源

title： 定义标题

body： 体标签（只有在body内写的才会显示出来）

<!-- -->:注释：

<meta>：描述网站信息

<!DOCTYPE html>
<html lang="en">
<head>
<!--    meta描述网站信息-->
<!--    meta一般用来做SEO-->
    <meta charset="UTF-8">
    <meta name="keywords" content="Java">
    <meta name="description" content="学习java">

<!--    标题-->
    <title>网站标题</title>
</head>
<body>
helloworld
</body>
</html>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.

标题标签：

<h1>xxx </h1>:一级标题

<h2>xxx</h2>:二级标题

<body>
<!--一级标题-->
<h1>一级标题</h1>
<!--二级标题-->
<h2>二级标题</h2>
<!--三级标题-->
<h3>三级标题</h3>
</body>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.

【狂神说html笔记】常用标签_表单

 段落标签：

<p></p>

<body>
<p>123 456</p>
<p>789 2</p>>
</body>
  • 1.
  • 2.
  • 3.
  • 4.

【狂神说html笔记】常用标签_webview_02

 换行标签：<br/>

<body>
123 456<br/>
789 2<br/>
</body>
  • 1.
  • 2.
  • 3.
  • 4.

【狂神说html笔记】常用标签_android_03

 水平线标签<hr/>

<body>
<br/>
<hr/>
</body>
  • 1.
  • 2.
  • 3.
  • 4.

【狂神说html笔记】常用标签_html_04

 字体样式标签：

粗体:<strong></strong>

斜体：<em></em>

<body>
<strong>粗体</strong>
<em>斜体</em>
</body>
  • 1.
  • 2.
  • 3.
  • 4.

【狂神说html笔记】常用标签_android_05

 特殊符号标签：&

&输入首字母会出现列出所有....

空格 &nbsp; 

<body>
空     格
</body>
  • 1.
  • 2.
  • 3.

如果不用&nbsp，那么无论中间空多少个空格，网页只会显示一个空格

大于号&gt

小于号&lt

版权符号：©&copy

图像标签：

<img src=""  alt=""  title="" >

src:路径地址（分为相对路径和绝对路径）（必填）

alt:图片名称（必填）

width:宽

heigths高

一般在同级目录下建一个资源包，把文件粘贴到其中，此时路径地址写相对地址

../表示上一级目录

<body>
<img src="../resources/1.jpg" alt="java">
</body>
  • 1.
  • 2.
  • 3.

链接标签：

页面间链接：

<a href="链接路径" target="" 链接文本或妥协 /a>

href :必填,表示跳转到哪个页面

target="_blank":在新标签页打开

target=“_self”：在自己网页中打开

<body>
<a href="https://www.baidu.com">点击进入百度</a>>
</body>
  • 1.
  • 2.
  • 3.

用图片作为超链接：

<body>
<a href="https://www.baidu.com"><img src="../resources/1.jpg" alt="java"></a>
</body>
  • 1.
  • 2.
  • 3.
锚链接：

1、需要一个锚标记

2、跳转到标记

使用name作为标记，通过#t跳到标记

<a name="名">

<a href=“#名”>跳转到名的位置</a>

<body>
<a name="top">
<a href="https://www.baidu.com">12345</a><br/>
<a href="https://www.baidu.com">12345</a><br/>
<a href="https://www.baidu.com">12345</a><br/>
<a href="https://www.baidu.com">12345</a><br/>
<a href="https://www.baidu.com">12345</a><br/>
<a href="https://www.baidu.com">12345</a><br/>
<a href="https://www.baidu.com">12345</a><br/>
<a href="https://www.baidu.com">12345</a><br/>
<a href="https://www.baidu.com">12345</a><br/>
<a href="https://www.baidu.com">12345</a><br/>
<a href="https://www.baidu.com">12345</a><br/>
<a href="https://www.baidu.com">12345</a><br/>
<a href="https://www.baidu.com">12345</a><br/>
<a href="https://www.baidu.com">12345</a><br/>
<a href="https://www.baidu.com">12345</a><br/>
<a href="https://www.baidu.com">12345</a><br/>
    <a href="#top">回到顶部</a>>
</body>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.

【狂神说html笔记】常用标签_java_06

 锚链接也可以到其他网页的标记位置

功能性链接：

邮件链接：

<a href="mailto"></a>

<body>
<a href="mailto:1607741781@qq.com">联系邮件</a>>
</body>
  • 1.
  • 2.
  • 3.

行内元素：内容撑开宽度，左右都是行内元素的可以排在一行

块元素：无论内容多少，该元素独占一行（p ,h1.....）

列表标签：

列表就是信息资源的一种展示形式。它可以使信息结构化和条理化，并以列表的样式显示出来，以便浏览者能更快捷地获得相应的信息

有序列表，无序列表，自定义列表

</head>
<body>
<!--有序列表-->
<ol>
    <li>java</li>
    <li>python</li>
    <li>c++</li>
</ol>
<!--无序列表-->
<ul>
    <li>java</li>
    <li>python</li>
    <li>c++</li>
</ul>
<!--自定义列表-->
<dl>
<!-- dl:标签   -->
    <!-- dt:列表名称   -->
    <dt>学科</dt>

    <dd>java</dd>
<!-- dd:列表名称-->
    <dd>python</dd>
    <dt>位置</dt>
    <dd>江苏</dd>
    <dd>上海</dd>
</dl>

</body>
  • 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.
  • 28.
  • 29.

【狂神说html笔记】常用标签_webview_07

 表格标签：

基本结构：单元格，行，列，跨行，跨列

<body>
<table border="1px">
<!--    border：边框长度-->
<!--    tr行-->
<!--    td列-->
    <tr>
         <td>1-1</td>
        <td>1-2</td>
        <td>1-3</td>
        <td>1-4</td>
    </tr>
    <tr>
        <td>2-1</td>
        <td>2-2</td>
        <td>2-3</td>
        <td>2-4</td>
    </tr>
</table>
</body>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.

【狂神说html笔记】常用标签_html_08

 跨行跨列：（合并单元格）
 

<body>
<table border="1px">
<!--    border：边框长度-->
<!--    tr行-->
<!--    td列-->
    <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-2</td>
        <td>3-3</td>
        <td>3-4</td>
    </tr>
</table>
</body>
  • 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.

【狂神说html笔记】常用标签_webview_09

 媒体元素：

视频元素：<video>

<body>
<!--vedio视频元素 controls控制部件autoplay自动播放-->
<video src="../resources/we.mp4" controls autoplay></video>
</body>
  • 1.
  • 2.
  • 3.
  • 4.

音频元素    <audio>

<body>
<!--audio音频元素 controls控制部件-->
<audio src="../resources/a.mp3" controls></audio>
</body>
  • 1.
  • 2.
  • 3.
  • 4.

页面结构分析：

元素名

描述

header

标题头部区域的内容（用于页面或页面的一块区域）

footer

标记脚部区域的内容（用于整个页面或页面的一块区域）

section

Web页面中的一块独立区域

artilcle

独立的文章内容

aside

相关内容或应用（常用于侧边栏）

nav

导航类辅助内容

<body>
<header><h2>网页头部</h2></header>
<section><h2>网页主体</h2></section>
<footer><h2>网页底部</h2>></footer>
</body>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.

iframe内联框架:

网站中内嵌一个网站

w-h:宽度高度

<body>
<iframe src="http://www.bilibili.com" frameborder="0"></iframe>
</body>
  • 1.
  • 2.
  • 3.

表单语法

<body>
<!--
action:表单提交的位置，可以是网站，也可以是请求处理地址
method:post ,get提交方式
-->
<form action="html5.html" method="get">
<!--
文本输入框 input type="text"
密码框 input type="password"
-->
    <h2>注册</h2>
    <p>名字:<input type="text" name="user"></p>
    <p>密码:<input type="password" name="pwd"></p>
    <p>
<!--        
提交框  input type="submit"
重置    input type="reset"
-->
        <input type="submit">
        <input type="reset">
    </p>

</form>
</body>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.

get方式提交：    可以在url中看到提交的方式，不安全，高效

post方式提交：  安全，可以传输大文件

表单元素格式：

属性

说明

type

指定元素类型。

text password checkbox radio (单选框)

submit reset file hidden image buuton

默认为text

name      

指定表单元素的名称（必填）

value

元素的初始值。type为raido必须指定一个值 

size

指定表单元素的初始宽度

当type为text或password时，表单元素的大小以字符为单位

对于其他类型，宽度以像素为单位

maxlength

type为text或password时，输入的最大字符数

checked

type为radio或checkbox时，指定按钮是否被选中

单选框：type   value  name（组）
性别
    <p><input type="radio" value="boy" name="sex"> 男</p>
    <p><input type="radio" value="girl" name="sex">女</p>
  • 1.
  • 2.
  • 3.

name相同在同一组，只能选一个

多选框checkbox 
爱好:
    <input type="checkbox" value="sleep" name="hobby">睡觉
    <input type="checkbox" value="code" name="hobby">唱歌
    <input type="checkbox" value="chat" name="hobby">聊天
  • 1.
  • 2.
  • 3.
  • 4.

默认值checked，表示默认在哪一项

<input type="checkbox" value="chat" name="hobby" checked>聊天
  • 1.
按钮button

name ，value为按钮上的值

<input type="file" >
  • 1.
<input type="button" name="btn1" value="登录"><br/>
    <input type="button" name="btn2" value="注册"><br/>
  • 1.
  • 2.

图片按钮：

<form action="https://www.bilibili.com" method="get">
   <input type="image" src="../resources/1.jpg">
  • 1.
  • 2.

点击图片提交表单

文件域：

input type="file"

<input type="file" name=" ">
  • 1.

 

【狂神说html笔记】常用标签_html_10

邮件验证
<input type="email" name="email">
  • 1.

数字验证：

最大值100 ，最小值0，步长为10 

<input type="number" max="100" min="0" step="10">
  • 1.
滑块：
<input type="range" name="voice" min="0" max="100" step="1">
  • 1.
搜索框：
<input type="search" name="search">
  • 1.

 

下拉框：

<p>
国家
<select name="列表名称">
    <option value="选项的值">中国</option>
    <option value="选项的值">美国</option>
    <option value="选项的值">瑞士</option>
    <option value="选项的值">印度</option>

</select>
</p>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.

默认值selected表示默认在哪一个

<option value="选项的值" selected>印度</option>
  • 1.
文本域textarea
<textarea name="textarea" cols="50" rows="10">


</textarea>
  • 1.
  • 2.
  • 3.
  • 4.

【狂神说html笔记】常用标签_表单_11

 表单的应用：

只读：readonly

禁用：disabled

隐藏：hidden 框没了，属性还在

表单初级验证：

placeholder:提示信息

用于输入框中

<p>
    用户
    <input type="text" name="usr" placeholder="请输入用户名">
</p>
  • 1.
  • 2.
  • 3.
  • 4.
required:元素不能为空
<form aciton="https://www.bilibili.com" method="get" >
    用户
    <input type="text" name="usr" placeholder="请输入用户名" required><br/>
    <input type="submit" name="submit">
  • 1.
  • 2.
  • 3.
  • 4.

【狂神说html笔记】常用标签_webview_12

 pattern 正则表达式

用百度搜 常用正则表达式

<input type="text" name="email" placeholder="请输入邮件地址" required  pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$"><br/>
  • 1.

【狂神说html笔记】常用标签_android_13

 

【狂神说html笔记】常用标签_表单_14

 

【狂神说html笔记】常用标签_webview_15