logo logo
RogevnBlog
banner
NEWS LETTER

HTML精讲

Scroll down

HTML

HTML简介

HTML是什么

HTML是一种描述网页的语言（不是编程语言）是标记语言

全称Hyper Text Markup language 中文名：超文本标记语言

HTML语义化

  1. 根据不同的内容选择合适的标签

  2. 便于开发者阅读和编写优雅的代码

  3. 让浏览器更好的解析

HTML八条规则

  1. 标签名称必须小写

  2. 属性名必须是小写

  3. 标签严格嵌套

  4. 标签必须封闭

  5. 即使是空元素的标签也要封闭

  6. 属性值必须双引号引起来

  7. 属性值必须有完整的形式

  8. 区分内容标签和结构标签

开始和结束标签

1
<html>…</html>标记着文档的开始和结束

DOCTYPE声明

:声明为HTML5文件

META定义

定义编码格式

    定义文档类型

   

特殊字符实体

空格 &nbsp；
大于号 &gt；
小于号 &lt；
双引号 &quot；
版权符号© &copy；

HTML构成

头部

1
<head>...</head> 标志着头部
1
<title>...</title> 更改选项卡名
1
<link rel="Shortcut Icon" href="这里放图片的地址"> 更改选项卡小logo
1
2
<!--为所有链接的统一连接（包括 <a>、<img>、<link>、<form> 标签中的 URL）-->
<base href="链接地址" target="post"> 
1
<link rel="stylesheet" href="style.css"> 连入css样式
1
<meta http-equiv="refresh" content="3;url=链接地址 "> 页面跳转

主体部分

1
<body>...</body> 主题标签，网页的内容都在这显示

网页的组成：文字、超链接、图片、音频、视频

文字

1
2
3
4
5
6
7
8
<p>...</p> 段落标签，块级标签自动换行
<h1></h1>~<h6></h6> 标题标签，自带加粗，字号从h1开始逐渐变小
<hr/> 水平线，单标签
<strong>...</strong> 文字加粗
<em>...</em> 倾斜
<pre>...</pre> 原字符输出
<sub>...</sub> 下标
<sup>...</sup> 下标

超链接

常用的超链接分为页面间链接、锚链接、功能性链接

1
<a href="链接位置" target="目标窗口位置">需要链接的文本和图片</a>

target有两个属性值 self是在本窗口打开

blank是新建窗口打开

1
2
<a href="#abc"></a>
<p name="abc"></p>

超链接地址中把要跳转的标签的name名加#放入即可跳转

图片

1
<img src="图片位置" alt="鼠标上移显示文字" title="图片丢失的提示文字">

点击图片上的某个位置执行操作：

音频

1
2
3
4
5
<!--  控制器  自动播放  重复   静音播放-->
<audio controls autoplay loop muted >
   <source src="#.mp3">
	<source src="#.war">
</audio>

视频

1
2
3
4
<video controls autoplay loop muted >
	<source src="\#.mp4">
	<source src="\#.wav">
</video>

网页结构布局

列表

​ 列表分为有序列表（ol）、无序列表（ul）、自定义列表（dl）

  1. 有序列表

    1
    2
    3
    4
    <ol type="1">
    	<li></li>
    	<li></li>
    </ol>

​ 可以通过更改type=“”进行项目符号的更改属性值可以是阿拉伯数字（1,2,3）罗马数字（ⅠⅡⅢ）英文大小写字母（a,b,c A,B,C）等

  1. 有序列表

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <ul>
    	<li></li>
    	<li></li>
    </ul>

    <!--
    type有三个值：square正方形

    circle空心圆

    disc 实心圆
    -->

  2. 自定义列表

    1
    2
    3
    4
    5
    <!--常用于图文混排-->
    <dl>
    	<dt></dt>
    	 <dd></dd>
    </dl>

表格

1
2
3
4
5
<table>
     <tr> #行标签
         <td></td> #单元格标签
     </tr>
</table>

表格适合工工整整的布局方法，一般用于表单页面

跨行合并：rowspan=””

跨列合并：colspan=””

单元格与单元格之间的距离：cellspacing=‘’

单元格与内容之间的距离：cellpadding=‘’

内联框架

1
2
3
4
<a href="http://www.4399.com"  target="aaa">aaa</a>
<iframe src="#" frameborder="0" name="aaa" scrolling="no">

</iframe> #点击超链接在框架中显示

表单

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<form action="规定表单传输方式" action="表单提交地址">
	<!--文本框-->
    <input type="text" placeholder="这里写默认的文字（点击消失）" 
           value="这里写默认文字（不可消失）" maxlength="最多输入字符" size="最大宽度">

	<!--密码框-->
    <input type="password">
    
    <!--数值输入域-->
    <input type="number">
    
    <!--电子邮件-->
    <input type="email">
    
    <!--url地址-->
    <input type="url">

	<!--搜索框-->
    <input type="search"> 
	
	<!--电话-->
    <input type="tel"> 

	<!--年月日-->
    <input type="date"> 

	<!--周、年-->
    <input type="week"> 

    <!--时间-->
	<input type="time"> 

	<!--在同一个表单中，radio的name属性相同可形成单选-->
    <input type="radio" checked="checked" name="aaa">


	<!--复选框-->
    <input type="checkbox" checked="等于本身默认选中">


	<!--列表分组-->
    <select name="" id="" multiple="等于本身允许多个选择">
        <optgroup label="亚洲"> 

			<!--默认选中selected-->
            <option value="表单提交时被发送到服务器的值" selected="selected">中国 </option> 

            <option value="">韩国</option>

            <option value="">日本</option>

        </optgroup>

        <optgroup label="欧洲">

            <option value="表单提交时被发送到服务器的值">英国</option>

            <option value="">意大利</option>

            <option value="">法国</option>

        </optgroup>

    </select>

	<!--提交按钮-->
    <input type="submit" value="按钮上的文字">

	<!--重置按钮-->
    <input type="reset">

	<!--图片按钮-->
    <input type="image">
	
	<!--普通按钮配合js使用,默认可以提交-->
    <input type="button">

	<!--文件域-->
	<input type="file">

	<!-- 多行文本域 -->
	<textarea name="" id="" cols="30" rows="10">
		cols是行数rows是列数
	</textarea>
</form>

HTML5

新增页面标签

header section footer nav

头部 主体 脚部 导航条

获取地理位置

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>拖曳式列表排序</title>
  <!-- 简单加点样式 -->
  <style>
    span{border:1px solid rgb(0,0,0)}
  </style>
</head>

<body>
<!-- 获取位置信息元素-->
<h1 id="display"></h1>
<!-- 提示警告错误元素 -->
<span id="feedback"></span><br>
<!-- 触发控件 -->
<button onclick="getLocation()">获取位置信息</button>
<script>
  // 获取显示元素(h1) / 反馈元素(span)
  var span = document.getElementById('feedback')
  var h1 = document.getElementById('display')
  // 判断浏览器是否支持定位
  function getLocation() {
    if(navigator.geolocation){//true
      navigator.geolocation.getCurrentPosition(showPosition)
      span.innerHTML = "恭喜您，您的浏览器支持定位！"
        //给出等待反馈
      h1.innerHTML = "≡(▔﹏▔)≡正在努力获取中..."
    }else{//false
      span.innerHTML = "很遗憾，您的浏览器不支持定位！"      
    }
  }
  // 获取位置
  function showPosition(position){
    h1.innerHTML = "纬度："+position.coords.latitude+
        "经度："+position.coords.longitude+
        "高度："+position.coords.altitude
  }
</script>
</body>
</html>

HTML动画

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
平移

transform：translate（x轴，y轴）

旋转

transform：rotate(80deg)//顺时针旋转80度

rotateX(80deg) //沿X轴翻转

rotateY(80deg) //沿Y轴翻转

倾斜

transform:skew(30deg) //倾斜30度

放大

transform：scale(1.2) //放大1.2倍

过渡

transtion：background 2s linear 0s

过度属性 时长 方式 延迟

动画

animation：move 2s linear 2;

动作名称 时长 方式 次数

@keyframes move{

0%{left:0px}

50%{left:500px}

100%{left:1000px}

}

或

@keyframes move{

form{background-color:red;}

to{background-color:yellow;}

}

//需配合定位一起使用

新增表单元素

email类型

当的type属性设置为email，在提交表单时，会自动验证email域的值是否符合email的标准格式，再也不用自己用正则表达式去写email的格式验证了。

示例

1
Email：<input type="email" name="useremail" />
url类型

当的type属性设置为url，在提交表单时，会自动验证url域的值是否符合url的标准格式。

示例

1
<input type="url" name="link\_url" />
number类型

当的type属性设置为number时，会自动检验输入内容是否为数字类型，您还能够设定该输入框数字的限定。

示例

用于数字限定的属性：

Number：<**input** type=”number” name=”user_num” min=”1” max=”10” />

属性 描述
max 规定允许的最大值
min 规定允许的最小值
step 规定合法的数字间隔（如果 step=“3”，则合法的数是 -3,0,3,6 等）
value 规定默认值
disabled 规定输入字段是禁用的
maxlength 规定输入字段的最大字符长度
pattern 规定用于验证输入字段的模式
readonly 规定输入字段的值无法修改
required 规定输入字段的值是必须的
size 规定输入字段的可见字符
range类型

range 类型用于应该包含一定范围内数字值的输入域。range 类型显示为滑动条。您还能够设定对所接受的数字的限定。

示例

1
<input type="range" name="user\_range" min="1" max="10" />

其用于数字限定的属性同number类型前四个。

Date Pickers 日期选择器类型

用于选取日期和时间。

示例

Date：<**input** type=”date” name=”user_date” />

  • date 选取日、月、年

  • month 选取月、年

  • week 选取周和年

  • time 选取时间（小时和分钟）

  • datetime 选取时间、日、月、年（UTC时间，有时区）

  • datetime-local 选取时间、日、月、年（本地时间）

search类型

用于搜索字段，比如站点搜索或 Google 搜索（搜索字段的表现类似常规文本字段）。

示例

Search Google:<**input** type=”search” name=”googlesearch”>

color类型

当的type属性设置为color，会自动检验输入内容是否为颜色格式。

示例

1
Select your favorite color:<input type="color" name="favcolor">
tel类型

当的type属性设置为tel，会自动检验输入内容是否为电话号码格式。

示例

Telephone:<**input** type=”tel” name=”usrtel”>

存储机制

localStorage（本地存储）和sessionStorage（会话存储）是HTML5的WebStorage提供的两种API

设置存储
  1. localStorage

保存数据的方法：

1
2
3
sessionStorage.setItem("key","value");
//或者写成
sessionStorage.key="value";

读取数据的方法：

1
2
3
变量=sessionStorage.getItem("key");
//或者写成
变量=sessionStorage.key;
  1. localStorage

保存数据的方法：

1
2
3
localStorage.setItem("key","value");
//或者写成
localStorage.key="value";

读取数据的方法：

1
2
3
变量=localStorage.getItem("key");
//或者写成
变量=localStorage.key;
生命周期：

1、localStorage

localStorage的生命周期是永久的，关闭页面或浏览器之后localStorage中的数据也不会消失。除非主动删除数据，否则数据永远不会消失。

2、sessionStorage

sessionStorage的生命周期是仅在当前会话下有效。sessionStorage引入了一个“浏览器窗口”的概念，sessionStorage是在同源的窗口中始终存在的数据。只要这个浏览器窗口没有关闭，即使刷新页面或者进入同源另一个页面，数据依然存在。但是sessionStorage在关闭了浏览器窗口后就会被销毁。同时独立的打开同一个窗口同一个页面，sessionStorage也是不一样的。

存储大小：

localStorage和sessionStorage的存储数据大小一般都是：5MB

存储位置：

localStorage和sessionStorage都保存在客户端，不与服务器进行交互通信。

存储内容类型：

localStorage和sessionStorage只能存储字符串类型，对于复杂的对象可以使用ECMAScript提供的JSON对象的stringify和parse来处理

应用场景：

localStoragese：常用于长期登录（+判断用户是否已登录），适合长期保存在本地的数据。

sessionStorage：敏感账号一次性登录；

Other Articles
cover
Java
Java SE笔记
  • 23/09/18
  • 18:15
  • 17.1k
  • 67
cover
Java
Redis缓存数据库
  • 23/06/12
  • 20:17
  • 3.1k
  • 12
© 2023- 2023 长生风月
The blog has been lovely to run day