认知网页

问：前端人员的工作跟什么打交道答：网页网页的构成：由文字，图片，超链接，多媒体(音频，视频，Flash)等组成！

浏览器的分类和内核

五大常见浏览器介绍：（内核做个了解）

IE （edge）（Trident）
火狐（firefox）（Gecko）
谷歌（chrome）（blink）
苹果（safari）（webkit）
欧朋（Opera）（blink 早期：presto ）

浏览器的内核相当于汽车的发动机，是最核心的存在,它负责将代码转换成用户眼中的界面

查看统计网站： http://tongji.baidu.com/data/browser

web标准

网页的结构（后缀名字为.html的文件）
网页的样式（后缀名字为.css的文件）

扫描二维码关注公众号，回复： 4991037 查看本文章
网页的行为（后缀名字为.js的文件）

各司其职：
网页的结构：负责网页的内容整理和分类
网页的样式：负责设置网页的板式，颜色，文字大小
网页的行为：负责网页的动态交互

认知HTML

概念：HTML（英文Hyper Text Markup Language的缩写）中文译为“超文本标签语言”，主要是通过HTML标签对网页中的文本、图片、声音等内容进行描述。

说白了HTML就是用尖括号包裹起来的英文单词，浏览器对这个尖括号包裹起来的英文单词有特殊的解释

如：<strong>加粗</strong>  <h1>大标题</h1>  等等

HTML骨架

HTML有固定的基本格式，就跟我们书信有基本的格式是一样的

    <html>
        <head>
            <title>页面的标题</title>
        </head>
        <body>
            这里写内容   
        </body>     
    </html>

HTML的其他介绍

标签的关系

嵌套关系

    <html><head></head></html>

并列关系

    <head></head><body></body>

HTML的标签分类

双标签：如<strong>标签的内容</strong>  语法：<开始标签> 标签内容 </结束标签>
单标签：<br/>单标签都是功能性的标签，例如换行等功能 里面不需要添加内容 语法：<标签名 />

认知标签

1. 标题标签 <hn>标题内容</hn>  设置一个标题 n的取值范围是1-6  1的权重最高，6最小
2. 段落标签 <p>段落内容</p> 
3. 水平线标签 <hr /> 单标签  作用是呈现一个水平线
4. 换行标签 <br />  单标签 作用是换行

字体格式化标签
5. 加粗字体 <strong>字体加粗</strong> <b>字体加粗</b>
6. 倾斜字体 <em>字体倾斜</em> <i>字体倾斜</i>
7. 字体贯穿线  <del>字体贯穿</del> <s>字体贯穿</s> 
8. 字体下划线 <ins>字体下划线</ins> <u>字体下划线</u>

标签语义化

一个需求可以用不同的标签来完成，那么这之间有什么区别呢？一个是标签语义强，起强调作用。一个是没有语义，没有强调作用语义好的网页更受SEO的喜欢，在搜索引擎里面的排名会更靠前

SEO优化 ===> 在输入关键字的时候，搜索引擎会罗列很多很多的网页出来，而用户基本习惯都是点前面的网页，不会去点后面的网页，所以如果网页在搜索引擎中的排名更加靠前，那么自然而然会带来更多的用户点击访问。

如何优化（了解）：

    1、花钱买关键字  见效快，花钱多
    2、让页面更加规范，语义更加明确（在合适的地方使用合适的标签）
    3、制作静态页面
    4、发外链

标签属性

在使用标签的时候，一个独立的标签比较单一不能完成一些需求这个时候就可以借助于标签的属性来完成

语法： <标签 属性名1=“属性值1” 属性名2=“属性值2”>  如：<hr color="red"/>

在这里我们只需要了解语法即可后面还会学习不同的标签不同的属性

图片标签

    <img src="图片的地址" alt="图片的替换文本" title="图片的标题" />

图片属性

src="图片地址"
alt="图片的替换文本"
title="图片标题"
width="400" height="400"（样式属性后期可以通过css去完成）

路径（地址）

地址分类

绝对地址：从盘符或者http://出发去找目标文件的过程就是绝对路径

<img src="http://www.baidu.com/logo.png">
<img src="c:">

相对地址：从当前文件出发去找目标文件的过程就称之为相对路径

如果当前文件和目标文件在同一个文件夹的话，路径直接写目标文件的名称即可
如果当前文件和目标文件不在同一个文件夹，那么需要先找到目标文件对应的文件夹

上一级目录 ../
下一级目录 文件夹名/

链接标签

    <a href="链接的地址" target="链接的打开方式" /> 只要被a标签包裹就可以跳转

跳转的分类

1. 站外跳转：http://www.baidu.com
2. 站内跳转：写本地文件路径
3. 锚点跳转（页面内部跳转）：
    在需要跳转的标签上添加 id="自定义id名"   如：<p id="myid"></p>
    让a标签的href属性等于之前自己自定义的id名 如：<a href="#自定义的id名字" />

target的取值

_self 默认值覆盖当前页面打开
_blank 新窗口打开

列表

列表的分类

无序列表

    <ul>
        <li>列表一</li>
        <li>列表一</li>
        <li>列表一</li>
        <li>列表一</li>
    </ul>
特点：列表之间没有顺序 在实际工作中用的较多

有序列表

    <ol>
        <li>列表一</li>
        <li>列表一</li>
        <li>列表一</li>
        <li>列表一</li>
    </ol>
特点：列表之间有顺序 在实际工作中用的较少

自定义列表

    <dl>
        <dt>列表标题</dt>
        <dd>列表标题的解释说明</dd>
        <dd>列表标题的解释说明</dd>
        <dd>列表标题的解释说明</dd>
        <dd>列表标题的解释说明</dd>
    </dl>
特点：可以针对一个列表标题充分解释 特定情况下使用

列表的注意

    1. <ul></ul>或者<ol></ol>中只能嵌套<li></li>，直接在<ul></ul><ol></ol>标签中输入其他标签或者文字的做法是不被允许的。
    2. <li>与</li>之间相当于一个容器，可以容纳所有元素。
    3. <dl></dl>中只能嵌套<dt></dt>和<dd></dd>，直接在<dl></dl>标签中输入其他标签或者文字的做法是不被允许的。
    4. <dd></dd>之间相当于一个容器，可以容纳所有元素。<dt></dt>一样

注释标签

浏览器不解析的标签作用是用来提示开发人员或者便于开发人员理解和阅读sublime快捷生成注释的方式选中需要注释的文本 ctrl+/

<!-- 注释文本 -->

创建表格

    <table>
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>   
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>   
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>       
    </table>

表格至少有三个基本的标签构成 table 代表一个表格 tr代表行 td代表单元格
tr必须嵌套在table标签中，td必须嵌套在tr或者th中
有几个单元格就代表有几列

表格属性

width  表格的宽度 （了解）
height 表格的高度 （了解）
border 表格的边框 （了解）
align  表格的对齐方式 （了解）
cellspacing 单元格与单元格的间距
cellpadding 单元格与单元格内容的间距

表格的表头标签

在合适的位置将td替换成th即可 th标签相对td来说更有语义性并且会将内部的文字加粗且居中

    <tr>
        <th>表头1</th>
        <th>表头2</th>
        <th>表头3</th>
    </tr>

表格的结构

    <thead>
        <tr>
            <th>姓名</th>
            <th>年纪</th>
            <th>性别</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>小明</td>
            <td>18</td>
            <td>男</td>
        </tr>
        <tr>
            <td>小强</td>
            <td>18</td>
            <td>女</td>
        </tr>
    </tbody>

表格的结构不是一定需要的，但是添加上表格的结构会使表格的语义更明确

合并单元格

跨行合并 rowspan 将rowspan写在上面的单元格上

跨列合并 colspan 将colspan写在左边的单元格上

需要合并几个，这个值就是几，一旦合并，多余的单元格需要删掉多余的单元格

表单

作用：收集用户信息发送给后台三大组成部分：

表单域（将内部包含的表单信息都收集起来发送给后台）
提示文本（提示用户当前表单的输入内容）
表单（真正用来收集用户信息）

表单的分类

    <input type="">
    type的取值：
    text 单行文本输入框
    password 密码框
    radio 单选框（在多个里面选择一个） 单选框要生效必须具备name属性 并且同一种类型的单选框的name取值必须一样
    checkbox 复选框（在多个里面选择某几个）
    button 普通按钮
    file 用户上传控件
    submit 提交按钮

其他表单的补充

textarea 多行文本输入框
select 下拉菜单

表单补充

radio和checkbox 默认选中项  checked
select框的默认选中项 selected
label标签的使用

表单域

<form action=""></form>

action 提交的后台地址
method 提交的方法

H5新增的标签及其表单属性

H5新增的标签

header,nav,section,footer,aside,article  

这些新增的标签不会带来任何视觉效果的改变，它的作用仅是增加了语义性

header 表示header里面包裹的东西是网站的头部区域

nav 表示nav里面包裹的东西是网站的导航

section 表示里面包裹的东西是网页的某一个模块

footet 表示footer标签里面包裹的东西是网页的页脚

aside 表示aside标签里面包裹的东西是网页的侧边栏

article 表示article标签里面包裹的东西是网页的文章页

详细请查阅文档

H5新增的表单新属性

placeholder 占位文本
autofocus 自动获取焦点
autocomplete 自动补全
required 自动验证表单

H5新增的表单

    <input type="range">    滑块
    <input type="date">     日期控件
    <input type="number">   唤醒数字键盘

    详细的请查阅文档

多媒体标签

视频

网页中插入视频有两种方法

没有兼容性的将视频文件上传到第三方网站获取其分享代码放到自己的页面中即可
- 优点：没有兼容性
- 缺点：有广告植入
使用H5新增的video方法

<video src="视频路径">
    
</video>

优点：没有广告
缺点：有兼容性，一般运用在手机端

video标签的常用属性

autoplay 自动播放
controls 播放控件
1. loop 循环播放

video的格式支持ogg,MP4,webm 不同的浏览器支持的格式不一样，所以出现了一种兼容写法:前提是准备三种格式的视频文件

<video autoplay>
    <source src="视频1.ogg">
    <source src="视频1.mp4">
    <source src="视频1.webm">
    <a href="#">你的浏览器不支持video，点击升级吧</a>
</video>

浏览器会从上到下依次去读，在这个过程中，只要读到自己识别的视频文件就直接播放这个视频文件，并且不会再往后继续读取实测：目前的主流浏览器对Mp4的支持都比较好！！

音频

音频的使用和视频的使用基本一致

<audio>
    <source src="音频1.ogg">
    <source src="音频1.mp3">
    <source src="音频1.wav">
    <a href="#">你的浏览器不支持audio，点击升级吧</a>
</audio>

audio标签的常用属性1.autoplay 自动播放2.controls 播放控件3.loop 循环播放

知识补充

字符集的设置

字符集的核心点就是如果设置了以什么字符集进行读取，那么在保存的时候也需要设置成对应的字符集

utf-8 收录了全世界所有国家的语言文字gbk 收录的是汉字

utf-8 > gbk 所以查询来说的话gbk的查询和存储都小于utf-8但是现在国际主流都是utf-8

前端之路（HTML基础篇）