我的前端学习之路-----HTML+css（一）-CSDN博客

本文链接：https://blog.csdn.net/qq_48556559/article/details/125707475

（本条为个人学习随手笔记，以基础知识为主）

我的推荐练习网站：https://www.freecodecamp.org/learn

（免费的前端练习网站，像是闯关，推荐指数★★★★★）

中国大学MOOC(慕课)_国家精品课程在线学习平台 (icourse163.org)

————客户端与服务器————

通常情况下，现在的软件由客户端与服务器两个部分组成

客户端：用户通过客户端使用软件

服务器：服务器负责远程处理业务逻辑

开发语言有：Java、PHP、c#、python、node.js等（前段学习Java与node.js比较重要）

(插播一条有趣小知识：蒂姆-伯纳斯——李爵士万维网的发明人，没有将网站申请为专利)

HTML：超文本标记语言

超文本：指通过超链接的形式将文本有机的组织在一起

标记：可以理解为标签

网页的版本

HTML4
XHTML2.0
HTML5

HTML5基本结构

<!-- 文档声明，声明当前网页的版本 -->
<!DOCTYPE html>
<!-- html的根标签（元素），网页中的所有内容都要写根元素的里边 -->
<html>
    <!-- head是网页的头部，head中的内容不会在网页中直接出现，主要用来帮助浏览器或搜索引擎来解析网页 -->
    <head>
        <!-- meta标签用来设置网页的元数据，这里meta用来设置网页的字符集，避免乱码问题 -->
        <meta charset="utf-8">
        <!-- title中的内容会显示在浏览器的标题栏，搜索引擎会主要根据title中的内容来判断网页的主要内容 -->
        <title>网页的标题</title>
    </head>
    <!-- body是htm1的子元素，表示网页的主体，网页中所有的可见内容都应该写在body里 -->
    <body>
        <!-- h1网页的一级标题 -->
        <h1>网页的大标题</h1>
    </body>
</html>

HTML DOM树

DOM：Docunment Object Model (文档对象模型)

标签

h1~h6	标题
br	段内换行
span	段内分组
p	段落
pre	预留格式
hr	水平线

超链接

链接到本站点其他网页

链接到其他站点

虚拟超链接

插入图像

img

图像格式：JPG

GIF 简单动画、背景透明

PNG 无损压缩、透明、交错、动画

src属性：路径+文件名

路径分绝对路径和相对路径

绝对路径：以根目录为基准

相对路径：以该文档所在位置为基准

div	区域
ul	无序列表	li	列表项
ol	有序列表	li	列表项
table	定义表格
th	定义表格的表头
tr	定义表格的行
td	定义表格单元

示例：（1）合并行

<td rowspan= "跨度的行数">

<body>
    <table border="1">
        <tr>
            <td>餐馆名:</td>
            <td>一家好吃的餐厅</td>
        </tr>
        <tr>
            <td rowspan="3">菜单:</td>
            <td>鱼香肉丝</td>
        </tr>
        <tr>
            <td>宫保鸡丁</td>
        </tr>
        <tr>
            <td>木须肉</td>
        </tr>
    </table>
</body>

运行结果：

（2）合并列

<td colspan="跨度的列数">

<body>
    <table border="1">

        <tr>
            <td colspan="2">一家很美味的餐厅</td>
        </tr>
        <tr>
            <td>宫保鸡丁</td>
            <td>鱼香肉丝</td>
        </tr>
        <tr>
            <td>刀削面</td>
            <td>牛肉炒面</td>
        </tr>
    </table>
</body>

运行结果：

表单

表单标签共有4个：<input>、<textarea>、<select>和<option>。其中<select>和<option>是配合使用的。

语法：<input type="表单类型"/>

text	单行文本框
password	密码文本框
submit	提交按钮
reset	重置按钮
radio	单选按钮
checkbox	复选框

下拉列表框
select	定义了下拉选项列表
option	定义了下拉列表中的选项

<form>
     爱好：
     <select>
        <option>看书</option>
        <option select="selected">旅游</option>
        <option>运动</option>
        <option>购物</option>
     </select>
</form>

Textarea

定义文本域

<textarea  rows="行数" cols="列数">文本</textarea>

h5

什么是h5？

H5本指第5代html标准规范，但因为html5规则对视频音频和触屏互动等事件的支持远超前代，因此H5逐渐演变成一种可以在移动端展示的动态页面。

现有的H5包括普通的幻灯片形式、需要简单点击的故事形式、用户能够参与的带有互交的功能形式、可以提交数据的表单形式、朋友圈流传的小游戏形式等。

新增标签

header --- 头部标签
nav --- 导航标签
article --- 内容标签
section --- 块级标签
aside --- 侧边栏标签
footer --- 尾部标签

语义化标签的使用注意事项

语义化标签主要针对搜索引擎
新标签可以使用一次或者多次
在 IE9 浏览器中，需要把语义化标签都转换为块级元素
语义化标签，在移动端支持比较友好，

拖放

拖放指抓取对象以后拖到另一个位置

拖放的步骤：

设置元素为可拖放
```
<img draggable="true">
```
拖动什么

dataTransfer.setData() 方法设置被拖数据的数据类型和值：

function drag(ev)
{
    ev.dataTransfer.setData("Text",ev.target.id);
}

Text 是一个 DOMString 表示要添加到 drag object 的拖动数据的类型。值是可拖动元素的 id ("drag1")。

3.放到何处

ondragover 事件规定在何处放置被拖动的数据。

默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。

这要通过调用 ondragover 事件的 event.preventDefault() 方法：

event.preventDefault()

4.进行放置

当放置被拖数据时，会发生drop事件

function drop(ev)
{
    ev.preventDefault();
    var data=ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
}

调用 preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）
通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。
被拖数据是被拖元素的 id ("drag1")
把被拖元素追加到放置元素（目标元素）中

多媒体标签

音频 -- audio
视频 -- video

当前， <video> 元素支持三种视频格式： MP4, WebM, 和 Ogg:

MP4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件
WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件
Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件

<audio>属性	值	描述
autoplay	autopaly	出现该属性，则音频在就绪后马上播放
controls	controls	出现该属性，则向用户显示音频控件（比如播放、暂停等）
loop	loop	出现该属性，则每当音频结束时重新开始播放
muted	muted	出现该属性，则音频输出为静音
preload	auto metadata none	规定当网页加载时，音频是否默认被加载以及如何被加载
src	url	规定音频文件的URL

<video>标签时HTML5 的新标签

语法格式为：

<video src="./media/video.mp4" controls="controls"></video>

<video>属性	值	描述
autoplay	autoplay	出现该属性，则视频在就绪后马上播放
controls	controls	出现该属性，则向用户显示控件，比如播放按钮
height	pixels	设置视频播放器的高度
loop	loop	出现该属性，则当媒介文件完成播放后再次开始播放
muted	muted	出现该属性，视频的音频输出为静音
poster	URL	规定视频正在下载时显示的图像，知道用户点击播放按钮
perload	auto metadata none	出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 "autoplay" 则忽略该属性
src	URL	要播放的视频的url
width	pixels	设置视频播放器的宽度

总结：

多媒体标签在不同浏览器下情况不同，存在兼容性问题
谷歌浏览器把音频和视频标签的自动播放都禁止了
谷歌浏览器中视频添加muted标签可以自己播放

HTML5 Geolocation(地理位置)

（内容来自菜鸟教材）

HTML5 Geolocation(地理位置) API 用于获得用户的地理位置

（该特性需要经过用户同意，否则用户位置信息是不可用的）

var x=document.getElementById("demo");
function getLocation()
{
    if (navigator.geolocation)
    {
        navigator.geolocation.getCurrentPosition(showPosition);
    }
    else
    {
        x.innerHTML="该浏览器不支持获取地理位置。";
    }
}
 
function showPosition(position)
{
    x.innerHTML="纬度: " + position.coords.latitude + 
    "<br>经度: " + position.coords.longitude;    
}

检查是否支持地理定位
如果支持，则运行 getCurrentPosition() 方法。如果不支持，则向用户显示一段消息。
如果 getCurrentPosition() 运行成功，则向参数showPosition中规定的函数返回一个 coordinates 对象
showPosition() 函数获得并显示经度和纬度

处理错误和拒绝

function showError(error)
{
    switch(error.code) 
    {
        case error.PERMISSION_DENIED:
            x.innerHTML="用户拒绝对获取地理位置的请求。"
            break;
        case error.POSITION_UNAVAILABLE:
            x.innerHTML="位置信息是不可用的。"
            break;
        case error.TIMEOUT:
            x.innerHTML="请求用户地理位置超时。"
            break;
        case error.UNKNOWN_ERROR:
            x.innerHTML="未知错误。"
            break;
    }
}

错误代码：

Permission denied - 用户不允许地理定位
Position unavailable - 无法获取当前位置
Timeout - 操作超时

在地图中显示结果

在地图中显示结果，需要访问可使用的经纬度的地图服务，比如谷歌地图或百度地图

下面例子使用返回的经纬度数据在谷歌地图中显示位置（使用静态图像）

function showPosition(position)
{
    var latlon=position.coords.latitude+","+position.coords.longitude;
 
    var img_url="http://maps.googleapis.com/maps/api/staticmap?center="
    +latlon+"&zoom=14&size=400x300&sensor=false";
    document.getElementById("mapholder").innerHTML="<img src='"+img_url+"'>";
}

新增input标签

新增表单属性

HTML5 Web存储

该存储方法是比cookie更好的本地存储方式

使用html5可以在本地存储用户的浏览数据

Web 存储需要更加的安全与快速. 这些数据不会被保存在服务器上，但是这些数据只用于用户请求网站数据上.它也可以存储大量的数据，而不影响网站的性能.

数据以键/值对存在, web网页的数据只允许该网页访问使用

客户端存储数据的两个对象为localStorage和sessionStorage

localStorage	用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除
sessionStorage	用于临时保存统一窗口（或标签页）的数据，在关闭窗口或标签页之后将会删除这些数据

使用web存储前，应检查浏览器是否支持localStorage和sessionStorage

不管是 localStorage，还是 sessionStorage，可使用的API都相同，常用的有如下几个（以localStorage为例）：