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

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

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

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

推荐学习网站：菜鸟教程 - 学的不仅是技术，更是梦想！ (runoob.com)

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

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

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

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

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

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

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

HTML：超文本标记语言         

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

              标记：可以理解为标签

网页的版本

• HTML4
• XHTML2.0
• HTML5

HTML5基本结构

    
    
        
        
        
        
    
    
    
        
        
网页的大标题
    

HTML DOM树   

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

   

 标签

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

超链接

a

链接到本站点 其他网页 链接到其他站点 虚拟超链接

             

插入图像

img

图像格式：JPG                   GIF      简单动画、背景透明                   PNG     无损压缩、透明、交错、动画 src属性： 路径+文件名

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

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

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

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

示例：（1）合并行

    

        

            
餐馆名:
            
一家好吃的餐厅
        
        

            
菜单:
            
鱼香肉丝
        
        

            
宫保鸡丁
        
        

            
木须肉
        
    

运行结果：

 

（2）合并列

    


        

            
一家很美味的餐厅
        
        

            
宫保鸡丁
            
鱼香肉丝
        
        

            
刀削面
            
牛肉炒面
        
    

运行结果：

 

表单

表单标签共有4个：、、<select>和<option>。其中<select>和<option>是配合使用的。</p> <blockquote> <p>         语法：<input type="表单类型"/></p> </blockquote> <table border="1" style="width:500px;"> <tbody> <tr> <td style="width:83px;">text</td> <td style="width:415px;">单行文本框</td> </tr> <tr> <td style="width:83px;">password</td> <td style="width:415px;">密码文本框</td> </tr> <tr> <td style="width:83px;"> <p>submit</p> </td> <td style="width:415px;">提交按钮</td> </tr> <tr> <td style="width:83px;">reset</td> <td style="width:415px;">重置按钮</td> </tr> <tr> <td style="width:83px;">radio</td> <td style="width:415px;">单选按钮</td> </tr> <tr> <td style="width:83px;">checkbox </td> <td style="width:415px;">复选框</td> </tr> </tbody> </table> <table border="1" style="width:500px;"> <caption> 下拉列表框 </caption> <tbody> <tr> <td>select</td> <td>定义了下拉选项列表</td> </tr> <tr> <td>option</td> <td> <p>定义了下拉列表中的选项</p> </td> </tr> </tbody> </table> <pre><code class="language-html"><form> 爱好： <select> <option>看书</option> <option select="selected">旅游</option> <option>运动</option> <option>购物</option> </select> </form></code></pre> <table border="1" style="width:500px;"> <tbody> <tr> <td style="width:92px;">Textarea</td> <td style="width:406px;">定义文本域</td> </tr> </tbody> </table> <pre><code class="language-html"><textarea rows="行数" cols="列数">文本

---

---

h5

什么是h5？

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

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

新增标签

• header --- 头部标签

• nav --- 导航标签

• article --- 内容标签

• section --- 块级标签

• aside --- 侧边栏标签

• footer --- 尾部标签

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

• 语义化标签主要针对搜索引擎

• 新标签可以使用一次或者多次

• 在 IE9 浏览器中，需要把语义化标签都转换为块级元素

• 语义化标签，在移动端支持比较友好，

拖放

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

拖放的步骤：

1. 设置元素为可拖放

2. 拖动什么 

        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

当前，

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

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

语法格式为：

	值	描述
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 + 
    "
经度: " + 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="";
}

新增input标签

 新增表单属性

 HTML5  Web存储

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

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

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

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

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

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

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

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

• 保存数据：localStorage.setItem(key,value);
• 读取数据：localStorage.getItem(key);
• 删除单个数据：localStorage.removeItem(key);
• 删除所有数据：localStorage.clear();
• 得到某个索引的key：localStorage.key(index);

提示: 键/值对通常以字符串存储，你可以按自己的需要转换该格式。