Html笔记（小白篇）每日划水

Html（小白篇）

1.软件来发者模式

C/S 模式 client/server 客户端/服务器端模式 qq 微信 优酷 迅雷 开发客户端，客户要下载客户端，还要升级
B/S模式 broswer/sever 浏览器/服务器端模式 在浏览器输入 url 就可以访问远程的数据

web（万维网）：
基于超文本和HTTP的交互图形信息系统。
IP：
类似192.168.1.1
域名：
https://www.baidu.com
浏览器：
IE(Edege)
Firefox(火狐)
Safari(苹果)
Chrome(谷歌)推荐
欧朋

w3c组织(万维网联盟)

2. 软件开发相关职业

产品经理(PM)
项目经理(PM)
系统分析师
系统架构师
UI设计师
开发（前端、后端）
测试工程师
运营
运维

3. 需求分析

收集需求，寻找目标 --> 分析现状，识别问题 --> 产品总体方案设计 --> 产品细节设计

4. 功能架构

搜索用户需求
筛选
商品展示（立即购买、加入购物车）
购物车
生成订单
订单完成
登录/注册

5. HTML

5.1 理解

超文本标记语言。

5.2 历史

HTML 1
HTML 2
HTML 3
HTML 4(199年发布4.01版本)
HTML 5(2008年发布草案。2014年正式发布)

XHTML：可以认为是HTML的一种一个版本，完全符合XML的规范。

5.3 基本结构

DOCTYPE:文档声明部分。
html：网页的根标签，放在最外层，一个网页只会出现一次
lang=“en”:规定当前语言类型为英文。
lang=“zh”:规定当前语言类型为中文。
head：
网页头部，主要用于记录网站相关信息。
<meta charset="UTF-8">编码
<title>Document</title>网页标题
body：
网页主体内容，主要代码编辑区域，用于展示网页内容。

5.4 HTML 语法历史

• 所有的标签都应该包含在<>起止符之间；
• 大部分的标签都有开始标签和结束标签；
• 标签可以拥有属性，属性总是以 属性名=‘属性值’ 这样的键值对出现，多个属性通过空格隔开；
• 标签可以嵌套；
• 标签名大小写都可以，但是统一建议小写；
• HTML 文档的后缀名为 .html 或者 .htm;
• 注释 <!-- 注释内容 -->:不会渲染的，用于文档说明。快捷键：ctrl + /
• 写一个标签要换行。
• 父子标签要缩进。

5.5 常见标签

    >>h1~h6：
        标题标签，效果是加粗和字体大小的变化
    >>p：
        段落标签，主要用于文本展示。
    >>div：
        块级标签，没有意义的标签。一般用于布局。
    >>span:
        文本标签，没有意义的标签，一般用在需要突出显示文字的时候。
    >>b：
        文字加粗标签，一般不建议使用，加粗效果可以通过css来实现。
    >>strong：
        拥有文字加粗效果，还有语气加重含义
    >>i：
        文字斜体效果，不建议使用，可通过css实现。
    >>em：
        文字斜体，有语气加重。
    >>small：
        比一般的文字小点
    >>sub：
        下标。
    >>sup：
        上标。
    >>del：
        被删除的文本。

5.6 超链接

href：
默认进行链接跳转，设置跳转地址的时候必须加上http 或者 https。
* 超链接<a href="https://www.baidu.com">百度</a>
* 执行加上代码<a href="javascript:alert(123)">执行js代码</a>
* 打电话 <a href="tel：176****3532">打电话</a>
* 发短信 <a href="sms:176****3532">发短信</a>
* 发邮件 <a href="mailto:44*****40@qq.com?subject=邮件主题&body=邮件内容">发送邮件</a>
download:下载
title:鼠标悬停在该标签上时，会显示文字（绝大部分标签都有该属性）
target: 一般用于链接跳转，代表当前打开的链接在什么位置显示。
_blank:在新标签页打开；
_self:在当前标签页打开；
_top:在顶层窗口打开
_parent: 在窗口打开；

5.7 图片

<img>图片<img/>
src:
图片地址。
绝对地址：
https://www.baidu.com
相对地址：
兄弟关系：图片名.后缀名
文件与图片的父级是同级：图片所在文件夹名/图片名.后缀名
文件父级与图片同级：…/图片名.后缀名
… 代表返回上一级
alt：
图片无法显示时，显示的文字

5.8 音频

音频:
audio：支持的格式为 mp3，nav，Ogg；
controls控制工具属性
loop：循环；
muted：静音；
autoplay：自动播放，但目前绝大部分浏览器都禁用了
视频:
video：支持的格式为 mp4，web，Ogg；
controls控制工具属性
loop：循环；
muted：静音；
autoplay：自动播放，但目前绝大部分浏览器都禁用了;
width
height

5.9 其他

code:单行代码包裹标签
pre：预格式化文本，换行和空格都会被保留；
br：换行标签

5.10 实体符号

空格： 
大于符号：>
大于符号：<

5.11 列表标签

     有序列表
        <ol>
            <li><li/>
        <ol/>
    无序列表
        <ul>
            <li><li/>
        <ul/>
    常见类型：
        type：disc、circle
   	dl、dt、dd

6. 标签的分类

6.1 两大类型

内联标签：
* 不会独占一行；
* 排列方向从左向右依次排列，直到当前行；排列不下的时候会换行；
* 宽度由内容决定；
* 包含：span、a、img、strong、i、em、b；
块级标签：
* 会独占一行；
* 排列方式是从上往下依次排列；
* 当前标签的宽度是父标签宽度的100%；
* 包含：h1~h6、div、p、ul、ol、li；

6.2 两大类型

• 内联标签原则上只能嵌套内联标签；
• p 和 h1~h6 只能嵌套内联标签
• ul 和 ol 只能嵌套 li， li可以嵌套任意标签；