html5 订阅
HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准,是构建以及呈现互联网内容的一种语言方式.被认为是互联网的核心技术之一。HTML产生于1990年,1997年HTML4成为互联网标准,并广泛应用于互联网应用的开发。HTML5是Web中核心语言HTML的规范,用户使用任何手段进行网页浏览时看到的内容原本都是HTML格式的,在浏览器中通过一些技术处理将其转换成为了可识别的信息。HTML5在从前HTML4.01的基础上进行了一定的改进,虽然技术人员在开发过程中可能不会将这些新技术投入应用,但是对于该种技术的新特性,网站开发技术人员是必须要有所了解的。 [1-2] 展开全文
HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准,是构建以及呈现互联网内容的一种语言方式.被认为是互联网的核心技术之一。HTML产生于1990年,1997年HTML4成为互联网标准,并广泛应用于互联网应用的开发。HTML5是Web中核心语言HTML的规范,用户使用任何手段进行网页浏览时看到的内容原本都是HTML格式的,在浏览器中通过一些技术处理将其转换成为了可识别的信息。HTML5在从前HTML4.01的基础上进行了一定的改进,虽然技术人员在开发过程中可能不会将这些新技术投入应用,但是对于该种技术的新特性,网站开发技术人员是必须要有所了解的。 [1-2]
信息
新元素
article、footer、header等
外文名
HTML5.0
作    用
构成网页文档
中文名
超文本5.0
支持浏览器
IE、火狐等
html5简介
HTML5 技术结合了 HTML4.01 的相关标准并革新,符合现代网络发展要求,在 2008 年正式发布。HTML5 由不同的技术构成,其在互联网中得到了非常广泛的应用,提供更多增强网络应用的标准机。与传统的技术相比,HTML5 的语法特征更加明显,并且结合了 SVG 的内容。这些内容在网页中使用可以更加便捷地处理多媒体内容,而且 HTML5中还结合了其他元素,对原有的功能进行调整和修改,进行标准化工作。HTML5 在 2012 年已形成了稳定的版本。 [3] 
收起全文
精华内容
参与话题
问答
  • HTML5简介和基本标签

    万次阅读 多人点赞 2018-09-13 20:52:56
    H5简介 ...-- HTML5:它是HTML标记语言的一个最新版本,其定义了很多新元素,比如新语义标签,智能表单,多媒体标签等,可以帮助开发者创建丰富的互联网应用 --> <!-- 通常情况下,我们的一个...

    H5简介

    <!--HTML:超文本标记语言 (英文:HyperText Markup Language )是一种用于创建网页的标准标记语言,但是它不属于编程语言的范畴-->
    <!-- HTML5:它是HTML标记语言的一个最新版本,其定义了很多新元素,比如新语义标签,智能表单,多媒体标签等,可以帮助开发者创建丰富的互联网应用 -->
    <!-- 通常情况下,我们的一个网页可以分为三个部分:HTML,CSS,JAVASCRIPT.如果把一个人比做一个人的话,HTML相当于人的骨架,CSS相当于人的皮肤,JAVASCRIPT相当于人的动作,这三者结合起来才能构成一个好看的网页 -->


    H5基本标签实例1

     

    <!DOCTYPE HTML>
    <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>Document</title>
    </head>
    <body>
        <!-- 图像标签:img标签:单标签 -->
        <!-- img标签属性:1.src:图像的路径2.alt:图片不能显示的时候替换的文本 -->
        <img src="../images/1.jpg" alt="">
        <img src="../images/1111.jpg" alt="没有找到此图片">
        <img src="../images/1.jpg" title="佩奇">
        <img src="../images/1.jpg" title="设置宽度和高度" width="50">
        <img src="../images/1.jpg" title="设置边框"border="50">
        <img src="../images/1.jpg" alt="">
        
        <!-- 超链接标签:a标签属性:1.href:指定要连接的地址。2.target:用于指定链接界面的打开方式,取值self和blangk. -->
        <h3>友情链接:</h3>
        <!-- 外部链接: -->
        <a href ="https://www.baidu.com" target="_self">百度官网</a>
        <a href ="https://www.sohu.com" target="_blank">搜狐官网</a>
        <!-- 内部链接: -->
        <a href ="html基本标签-2.html" >本地页面</a>
    </body>
    </html>

    结果:

    H5基本标签实例2

    <!DOCTYPE HTML>
    <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>html基本标签-3</title>
    </head>
    <body>
        <!-- 无序标签 :并列关系-->
        <!-- 注意事项:ul标签里面只能存放li标签,放其它的不推荐 -->
        <h3>你喜欢的英雄联盟人物:</h3>
        <ul>
            <li>压缩</li>
            <li>寡妇</li>
            <li>男刀</li>
            <li>男枪</li>
            <li>提莫</li>
            <li>雪人</li>
        </ul>
        
        <!-- 有序列表:即有排列顺序的,其各个列表项按照一定的顺序排列 -->
        <ol >
            <li>杰夫贝佐斯</li>
            <li>比尔盖茨</li>
            <li>沃伦巴菲特</li>
            <li>博纳的阿诺特</li>
        </ol>
        <!-- 自定义列表:通常用于对术语或者名词进行解释和描述, 自定义列表的列表项前面没有任何符号  type来改变类型例如“a” start来决定从第几个开始-->
        <dl>
            <dt>北京</dt>
            <dd>首都</dd>
            <dd>国家化城市</dd>
            <dd>一线城市</dd>
        </dl>
    </body>
    </html>

    结果:

    H5的基本结构实例

    <!DOCTYPE HTML>
    <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>
    </head>
    <body>
        <!-- 标题标签:为了使网页更加语义化,我们经常会在页面中用到标题标签,HTML中提供了6个等级的标题。 -->
        <h1>一级标题标签</h1>
        <h2>二级标题标签</h2>
        <h3>三级标题标签</h3>
        <h4>四级标题标签</h4>
        <h5>五级标题标签</h5>
        <h6>六级标题标签</h6>
        <!-- 段落标签(P):在网页中要把文字有条理的显示出来,就离不开段落标签,就如同我们写文章一样,整个网页就可以分为入干个段落 -->
        <p>段落标签</p>
        <p>段落标签1</p>
        <!-- 水平线标签:<hr/>在网页中经常会看到一些水平线将段落和段落之间隔开,是文章结构清晰,层次分明。hr:单标签 -->
        <hr/>
        <!-- 换行标签:<br/> -->
        <!-- div和span标签:没有语义,是网页布局的盒子。div+sapn组合,div独占一行,span并不会独占一行-->
        <div>这是一个div标签</div>
        <span>这是一个span标签</span>
        <span>这又是一个span标签</span>
        <!-- 文本格式化标签: -->
        <!-- <b></b>和<strong></strong>:文字以粗体的方式显示,通常使用strong -->
        <!-- <i></i>和<em></em>:文字以斜体的方式显示 ,通常使用i标签-->
        <!-- <s></s>和<del></del>:文字以删除线的方式显示 ,通常使用del-->
        <!-- <u></u>和<ins></ins>:文字以加下划线的方式显示,通常会使用u标签 -->
        好哇!<strong>哈日哦 </strong>WIO<b>俺吃饭</b>那陪我<br/>
        <i>我知道你</i>,<em>在我世界最重要</em><br/>
        <s>原件998</s>现价9.98<br/>
        <ins>omgod!</ins>
    </body>
    </html>

    结果:

    .

    <img src="图片地址"    alt="图片加载不出来现实的内容" title="鼠标放在上面显示的内容" width="" height=""/>    
    (1)当前文件与目标文件在同一个目录下,直接写图片的名字加后缀
    (2)当前文件与目标文件的文件夹在同一个目录下,文件夹/+图片名字后缀
    (3)当前文件所处文件夹与目标文件夹在同一个目录下,../文件夹/图片名字后缀

    表格
    <table width="" height="" border="1" bgcolor="green" cellspacing="5" cellpadding="8">
        <tr>
            <td></td>
        </tr>
    </table>
    表格宽度:width  表格高度:height  表格边框:border
    单元格与单元格之间的间距:cellspacing="20" 单元格与内容之间的空隙cellpadding="10"
    水平对齐方式:align="left/center/right";(如果此属性加到table相对于浏览器的对齐方式;如果加到tr或td上表示单元格内容相对于单元格的对齐方式)
    垂直对齐:valign="top/middle/bottom"
    rowspan="数字" 合并行
    colsspan="数字" 合并列

    展开全文
  • HTML5+CSS3

    万次阅读 多人点赞 2020-02-09 18:20:26
    HTML 1. 浏览器内核 五大浏览器四大内核 浏览器:IE(edge), 火狐, Safari, chrome, Opera 内核: Trident, Gecko, webkit, chromium/Blink, blink 注1: 提到Chrome浏览器,一般人会认为使用的Webkit内核(移动...

    HTML

    1. 浏览器内核

    • 五大浏览器四大内核
      • 浏览器:IE(edge), 火狐, Safari, chrome, Opera
      • 内核: Trident, Gecko, webkit, chromium/Blink, blink

    注1: 提到Chrome浏览器,一般人会认为使用的Webkit内核(移动设备多),这种说法不完全确。Chrome发布于2008年,使用的渲染内核是Chromium,它是fork自Webkit,但把Webkit梳理得更有条理可读性更高,效率提升明显。2013年,由于Webkit2和Chromium在沙箱设计上的冲突,谷歌联手Opera自研和发布了Blink引擎,逐步脱离了Webkit的影响。所以,可以这么认为:Chromium扩展自Webkit止于Webkit2,其后Chrome切换到了Blink引擎。另外,Chrome的JS引擎使用的V8引擎,应该算是最著名和优秀的开源JS引擎,大名鼎鼎的Node.js就是选用V8作为底层架构。_

    注2: Opera在2013年V12.16之前使用的是Opera Software公司开发的Presto引擎,之后连同谷歌研发和选择Blink作为Opera浏览器的排版内核_

    2. web 标准

    结构(html), 表现(css), 行为(JavaScript)

    3. 工具

    3.1 vscode

    • vscode 插件
      • vscode-icons 各种漂亮的图标
      • vscode-fileheader 头部注释 ctrl+alt+i
      • Visual Studio IntelliCode 智能提示
      • Regex Previewer 实时预览正则
      • Prettier - Code formatter 格式化代码ctrl+shift+p
      • Path Intellisense 智能路径
      • Path Autocomplete 自动感知目录
      • open in browser 启动浏览器
      • JavaScript (ES6) code snippets ES6智能提示
      • HTML Snippets 智能提示HTML标签及含义
      • HTML CSS Support 智能提示CSS类名及ID
      • Highlight Matching Tag 高亮显示HTML标签
      • Guides 代码参考线
      • GitLens — Git supercharged 代码参考线
      • ESLint JS语法纠错
      • CSScomb CSS书写顺序 Ctrl + Shift + P
      • Color Highlight 直观的看见css定义的颜色
      • Bracket Pair Colorizer 成对的彩色括号
      • Auto Rename Tag 自动修改成对HTML标签
      • Auto Close Tag 自动开/闭HTML/XML标签
      • Vetur Vetur —— 语法高亮、智能感知、Emmet等
        包含格式化功能, Alt+Shift+F (格式化全文),Ctrl+K Ctrl+F(格式化选中代码,两个Ctrl需要同时按着)

    3.2 sublime

    • sublime初始安装

      • 以管理员运行sublime,按Ctrl+esc调出sublime text的console

      粘贴 import urllib.request,os,hashlib; h = ‘6f4c264a24d933ce70df5dedcf1dcaee’ + ‘ebe013ee18cced0ef93d5f746d80ef60’; pf = ‘Package Control.sublime-package’; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( ‘http://packagecontrol.io/’ + pf.replace(’ ', ‘%20’)).read(); dh = hashlib.sha256(by).hexdigest(); print(‘Error validating download (got %s instead of %s), please try manual install’ % (dh, h)) if dh != h else open(os.path.join( ipp, pf), ‘wb’ ).write(by)

    • 命令面板简单操作

      • 重启再preferrnces中最下面由各package Control就是安装成功
      • ctrl + shift + p调出命令窗口, 输入install package
      • 删除插件remove,选择Package: Remove package选项回车
    • 激活

      • 点击Help–>Enter License
      ZYNGA INC.
      50 User License
      EA7E-811825
      927BA117 84C9300F 4A0CCBC4 34A56B44
      985E4562 59F2B63B CCCFF92F 0E646B83
      0FD6487D 1507AE29 9CC4F9F5 0A6F32E3
      0343D868 C18E2CD5 27641A71 25475648
      309705B3 E468DDC4 1B766A18 7952D28C
      E627DDBA 960A2153 69A2D98A C87C0607
      45DC6049 8C04EC29 D18DFA40 442C680B
      1342224D 44D90641 33A3B9F2 46AADB8F
      
      • 然后就会温馨提示升级注册码,点击取消
    • 插件

      • 插件emmet 快速编写html/css
      • HTML5 插件
      • SublimeCodeIntel代码提示
    • 快捷键与设置

      • 分屏 alt + shift + 1,2,3,4,5,8,9(单屏,2竖屏,3竖屏,4竖屏, 2横屏,3横屏, 分4屏)
      • 取消右边代码缩略图 view - hideMiniMap
      • ctrl + enter 下一行插入
      • ctrl + shift + enter上一行插入
      • shift + ctrl + [ 折叠代码块
      • shift + ctrl + ] 打开代码块
      • ctrl + k + 0 展开所有的代码块
      • ctrl + alt + ↑↓ 添加多行光标,同时编辑多行
      • ctrl + shift + L 选中代码同时编辑
      • ctrl + f 搜索
      • ctrl + g 输入 :xx(冒号与所在的行)
    • 自定义快捷键
      ctrl + shift + p 输入key,选择preferences: key Bindings,找到快捷键的代码,复制放到右边,该快捷键就行

      • ctrl + down 复制到下一行
      • alt + up 向上移动代码
      • alt + down 向下移动代码
      • ctrl + d 删除整行
    • 问题

      • There are no packages available for installation
        解决:打开Sublime Text,然后点击Preferences->Browse Packages…,进入Sublime Text的packages的目录,然后将文件channel_v3.json(网盘有)拷贝到目录文件User旁边,接着修改Package Control的用户配置,点击Preferences->Package Settings->Package Control->Settings – User,新增或者修改”channels”的配置信息,其路径为channel_v3.json文件的路径:
    "channels":
    [
       "C:\\Users\\AilsonJack\\AppData\\Roaming\\Sublime Text 3\\Packages\\channel_v3.json"
    ]
        重启就OK了
    

    4. HTML

    4.1 HTML基本结构

    <!DOCTYPE HTML><!--这句是声明,告诉浏览器请使用H5标准来解析这个网页-->
    
    <!--整个网页,相当于整个人一样,en:英文 zh-CN: 中文-->
    <HTML lang = "en">
        <!--网页的头,这里的信息是对整个网页的说明,就像一个简单的网页自我介绍-->
    	<head>
            <!--网页使用的字符集,相当于你是哪里人
                gb2312简体中文
                BIG5繁体中文
                GBK包含全部的中文,是GB2312的扩展,加入对繁体字的支持,兼容GB2312
                UTF-8基本包含全世界多有国家需要用到字符
                -->
            <meta charset = "UTF-8">
            <!--网页的标题,名字-->
    		<title>我是标题</title>
    	</head>
        <!--网页的身体,网页所有的精华所在,内容都是写在这-->
    	<body>
    		<center>文字内容居中</center>
    		<button>我是一个按钮</button>
    	</body>
    </HTML>
    
    • HTML是超文本标记语言(Hyper Text Markup Language)用来描述网页的一种语言
    • HTML不是编程语言,而是一种标记语言

    4.2 XHTML

    • XHTML是更严格更纯净的HTML代码
    • XHTML指可扩展超文本标记语言(Extensible HyperText Markup Language)
    • XHTML的目标是取代HTML
    • XHTML与HTML4.01几乎相同
    • XHTML是作为一种XML应用被重心定义的HTML
    • XHTML是一个w3c的标准
    • XHTML得到所有浏览器的支持

    4.3 HTML头部

    <head></head>标签包含所有的头部标签

    • head区域标签
      • <title>

        • 网站名(产品名) - 网站介绍

        • 小米商城 - 小米9 Pro、小米MIX Alpha、Redmi Note 8,小米电视官方网站

          京东(JD.COM)-正品低价、品质保障、配送及时、轻松购物!

        • 定义浏览器工具栏的标题

        • 在网页添加到收藏夹时,显示在收藏夹中的标题

        • 显示在搜索引擎结果页面标题

      • <style>

        • 定义HTML样式引用地址
        • @import指令: @import url(css1.css); 必须放在其他CSS的前面,链接的双引号可选
      • <meta>

        • 被用于页面的描述,关键词,文档的作者,最后修改的时间和其他元素
        • 为搜索引擎定义关键字 6-8个关键字
          • <meta name = “keywords” content = “HTML,CSS,XML,XHML,JavaScript/”>
        • 为网页定义描述内容,不超过120个汉字
          • <meta name = “description” content = “Free Web tutorials on HTML, CSS, XML”>
        • 定义网页的作者
          • <meta name = “author” content = “userName”>
      • <link> 链接外部样式表

        • rel(relation) = “icon” 规定文档与被链接文档之间的关系,这个是图片关系,可自定义,一般stylesheet
          • alternate stylesheet仅当拥护自己选择,文档才会使用候选样式表渲染
          • 候选样式表在浏览器–>查看–> 页面样式–>就会有选项,我没有找到
        • title = “Default”,一旦rel的stylesheet的link元素设置了title就是首选样式表,它要优于候选样式表,显示文档默认使用,如果有一组则会触发一个,不设置标题则为永久样式表
        • sizes = "xx * xx"规定链接的尺寸
        • href = “… .cn” : 链接地址或路径
        • type = “text/css”/“text/JavaScript”: 规定被链接的类型
        • charset = "utf-8"规定被链接文档的字符编码方式(HTML5不支持)
        • media,它的值是一个或多个多媒体描述符(media descriptor),指明媒体的类型和具有的功能,多个多媒体类型与逗号隔开
        • <link charset = “utf-8” rel = “stylesheet” type = “text/css” href = “…/CSS/页面CSS.css”>
      • <script>

        • async 规定异步执行脚本(仅适用于外部脚本)
        • defer 延迟脚本
        • <script type = “text/javascript”>
        • <script charset=“utf-8” src=“https://www.baidu.com/” async = “async”></script>
      • <base>

        • 为页面上所有链接规定默认地址或默认目标(target)
        • <base href = “www.baidu.com” target="_blank _self _parent _top">

    4.4 排版标签

    h$(1-6) ,p , hr, br ,div ,space

    4.4.1 标题标签

    h1 - h6文字逐渐变小,但是字体加粗了;一般用于标题,h1文字最大,一般用于主标题

    **注:**01标题demo.html里面有示例

    4.4.2 段落标签

    <p> 内容区域 </p> 文章分段,属于双标签

    4.4.3 水平线标签

    <hr /> 属于单标签

    4.4.4 换行标签

    <br /> 属于单标签

    **注意:**换行标签与段落标签的区别,换行标签,另起一行,上下行间隔小;段落标签,另起一段,上下换大一些

    4.4.5 div和span标签

    div和span诗没有语义的,div属于块元素;span属于行内元素(内联元素)

    4.5 HTML格式化

    <b></b> <strong></strong> 文字加粗(XHTML推荐strong)
    <i></i> <em></em> 文字倾斜(XHTML推荐em)
    <s></s> <del></del> 文字加删除线,不赞成使用s,使用del代替
    <u><\u> <ins><\ins> 为名字加下划线,不赞成使用u,使用样式ins代替

    注意: <b>只是单纯的加粗;<strong>除了加粗还有强调语句

    HTML 格式化标签 HTML 引用引文标签 HTML 计算机输出标签
    <b> 定义粗文本 <code> 定义计算机代码 <abbr> 定义缩写
    <big> 定义粗文本 <kdb> 定义键盘码 <acronym> 定义首字母缩写
    <em> 定义着重文字 <samp> 定义计算机代码样本 <address> 定义地址
    <i> 定义倾斜文字 <tt> 定义计算机代码 <bdo> 定义文字方向
    <small> 定义小号文字 <var> 定义变量 <blockquote> 定义长的引用
    <strong> 定义加重语句 <pre> 定义预格式文本 <q> 定义短的引用
    <sub> 定义下标字 <cite> 定义引用引证
    <sup> 定义上标字 <dfn> 定义一个定义项目
    <ins> 插入字
    <del> 定义删除字

    注:01标题demo.html里面有pre的示例与解释

    4.6 标签属性

    <标签名 属性1 = “属性值1” 属性2 = “属性值2”…>内容</标签名>

    <p width = "20px" height = "30px" border ="1">I</p>
    

    4.7 HTML图像

    语法: <image src = “url” />

    属性 属性值 描述
    src URL 图片路径
    alt 文本 图像不能显示时替换的文本
    title 文本 鼠标悬浮图片显示的信息
    width 像素(XHTML不支持百分比) 设置图片的宽度
    height 像素(XHTML不支持百分比) 是指图片的高度
    border 像素 设置图片边框

    4.8 HTML链接

    语法:<a href = “跳转目标” target = “目标窗口弹出的方式”>Link text</a>

    • 通过a标签在HTML中创建链接,有两种方式
      • 方式一: 通过href属性-创建指向另一个文档的链接
      • targer:窗口弹出方式
        • -blank: 新页面打开
        • -self: 在原窗口打开(默认)
        • -parent: 父级窗口打开,如果,没有父级窗口就和_self一样
        • -top: 将会清除所有包含子框架,并将文档整入整个浏览器中
      • 方式二: 通过name属性-创建文档内的书签(跳)

    4.8.1 链接与target

    • <a>
    • href属性: 创建指向另一个文档链接(#空链接)/路径,
    • name: 创建文档内标签

    <a href = “url” target = “_blank”>Link text</a>

    <a href = "https://www.baidu.com/">百度</a>
    

    4.8.2 name || id属性

    name(id)属性规定锚: 使用锚我们可以创建直接跳至该命名的锚的链接,这样就无须滚动了,比如商场向下滚动,会有个回到顶部的箭头

    <a name = “tips”>锚(显示页面上的文本)
    <a name = “#tips”>回到顶部

    <a id = "tips">123</a>
    <a href = "#tips" target = "_blank">456</a>
    <!--找到本页的锚,跳过去-->
    <a href="http://www.w3school.com.cn/html/html_links.asp/#tips">有用的提示</a>
    <!--先链接找到该网页,然后找到该网页的锚的位置,就是链接第三方网页的锚进行跳转-->
    

    注意: 请始终将正斜杠添加到子文件夹。假如这样书写链接:href=“http://www.w3school.com.cn/html”,就会向服务器产生两次 HTTP 请求。这是因为服务器会添加正斜杠到这个地址,然后创建一个新的请求,就像这样:href=“http://www.w3school.com.cn/html/”

    4.9 注释

    <!--Header-->
    内容区
    <!--End Header-->
    

    4.10 路径

    路径分为相对路径和绝对路径
    相对路径: 相对当前的文件的路径, …/上一级
    绝对路径:从盘符开始详细的指定文件

    4.11 HTML表格

    表格标签 标签含义
    <table> 定义表格
    <tr> 定义表格行
    <th> 定义表格表头,内容居中加粗
    <td> 定义表格单元
    <caption> 定义表格标题,在表格上面内容相对于居中
    <colgroup> 定义表格列的组
    <col> 用于表格的属性
    <thead> 定义表格的页眉
    <tbody> 定义表格的主体
    <tfoot> 定义表格的页脚,一般总结
    • <colgroup span = “6” width = “100px”>
    • <colgroup span = “1” width = “200px”>
      • <col width = “100px”>
      • <col width = “100px”>
      • <col width = “100px”>
      • <col width = “100px”>
      • <col width = “100px”>
      • <col width = “100px”>
      • <col width = “200px”>
    • 属性:
      • width = “100px”
      • border = “1px”
      • cellspacing = “0”
      • cellpadding = “0”
      • align = “left/center/right”
      • colspan = “7”
      • rowspan = “4”
      • border-collapse: collapse; 在table里面设置这个合并单元格

    <span style="color = “red;”>注: 02表格demo01/02/03有表格示例

    4.12 HTML列表

    4.12.1 无序列表

    标签: <ul> <li>
    属性:type=“dicel(实心圆) || circle(空心圆) || square(方块)”

    注意:ul嵌套最外层默认是实心圆,然后嵌套是空心圆,然后一直是实心方块,ol嵌套不受影响

    示例:03无序列表demo01.html

    4.12.2 有序列表

    标签 <ol> <li>
    属性reversed: 倒序
    属性strat = “value”: 从value开始
    属性type = “value”: 顺序类型

    示例:04有序列表demo01.html

    4.12.3 自定义列表

    标签 <dl> <dt> <dd>

    示例:05自定义列表demo01.html

    注意:去掉列表前面的符号,可以使用CSS属性(list-style : none)

    4.13 HTML表单

    <form method = “post(表单提交数据) || get(表单获取数据)”>
    action属性: 提交表单时执行的动作,通常会提交到web服务器的网页
    method属性: 规定在提交表单时所用的 HTTP 方法,(get,post)
    name属性: 如果要正确地被提交,每个输入字段必须设置一个 name 属性

    • get与post区别:
      • get请求通常表示获取数据
      • post请求通常表示提交数据
      • get请求发送的数据都写在地址栏上,用户可见
      • post请求发送的数据用户不可见
      • get请求不能提交大量数据,但是post可以,因此不要混用

    注: post请求在隐藏起来了,上方链接栏没有,需要F12(右击检查)–>netWork–>Name–>第一个www.baidu.com点击–>Headers–>最下面的Form Date就显示了提交的信息

    • <form>
      • <input> 输入,单标签
        • type 属性
          • "text"文本输入框
          • "password"密码输入框
          • “button” 按钮
          • “submit” 提交按钮
          • “reset” 重置按钮
          • "“file” 文件框
          • "radio"单选框
          • “checkbox” 复选框
          • “image” 图像形式的按钮组,必须有src
          • “email” 限制用户输入必须为Email类型(H5)
          • “url” 限制用户输入必须为url类型(H5)
          • "date"限制用户输入必须为time类型(H5)
          • "month"限制用户输入必须为月类型(H5)
          • "week"限制用户输入必须为周类型(H5)
          • "number"限制用户输入必须为数字类型(H5)
          • “tel” 限制用户输入必须为手机号码类型(H5)
          • “search” 搜索框(H5)
          • "color"生成颜色表单(H5)
        • name 属性(自定义名称),用于区分表单,后台使用
        • value 在按钮上显示文字或者输入框的内容
        • checked 默认选择,单选按钮和复选按钮有
        • size input默认在页面中显示的长度
        • maxlength允许控件输入最多的字符
        • required: required; 表单的属性不能为空,必填(H5)
        • enctype: multipart/form-data; 将表单数据编写成二进制形式,用户上传图片之类
        • placeholder: 提示文本(占位符); 表单的提示信息,存在默认值将不显示(H5)
        • autofocus: autofocus; 自动聚焦属性,页面加载完成自动聚焦到表单(H5)
        • autocomplete当用户在字段开始键入时,浏览器基于之前键入过的值,应该显示出在字段中填写的选项,需要在表单内同时加上name属性,同时提交成功(H5)
          • off
          • on(默认打开)
        • multiple: multiple可以多选文件提交(H5)
      • <label>: 点击文本就会触发表单,比input改进
        • for
        • id
      • <fieldset>: 包含一组相关的表单元素,并使用边框包起来
      • <textarea>: 文本域
        • cols: 宽度2
        • rows: 高度 1
        • resize:none; 不可拖动
      • <legend>: 定义一个<fieldset>标题
      • <select>: 定义下拉列表
        • <optgroup>: 定义下拉列表标题(不可选)

          • label: 禁用这一组不可选<optgroup label = “”>
        • <option>:定义下拉列表标题的子元素(可选)

          • selected: 打开默认显示这一个子元素,一般显示第一个

          • disabled: 不可选

    **实例:**06表单demo01

    4.14 HTML框架

    4.14.1 结构框架

    • <frameset>框架结构标签
      • <frame>框架标签
      • <noframes>不支持框架的浏览器

    可以拖动边框来改变大小。避免这种情况发生,可以在 <frame> 标签中加入:noresize=“noresize”。
    不能将 <body> 标签与 <frameset> 标签同时使用!不过,假如你添加包含一段文本的 <noframes>标签,就必须将这段文字嵌套于 <body> 标签内

    注意:07结构框架demo01

    4.14.2 内联框架

    • <iframe>用于在网页内显示网页
      • width: 宽度
      • height: 高度
      • frameborder =“0”;设置框架边框为0
      • name与target 内联跳转链接
        • iframe可用作链接目标
        • 链接的target属性必须引用iframe的name属性
      • 语法: <iframe src = “URL” frameborder=“0” width=“200” height=“200”></iframe>

    注意:08内联框架demo01,里面有一点注意事项,建议看一下

    5. CSS

    5.1 CSS概念

    CSS(Cascading Style Sheet):通常称为CSS样式表"层叠样式表"或"级联样式表",是一组格式设置规则,核心优势是可以为文档中某种类型的元素全部应用相同的规则

    5.2 CSS书写位置

    • 外部样式
      • <link rel=“stylesheet” type=“text/css” href=“mystyle.css” />
      • style type=“text/css”> @import url(mystyle.css);</style>
        • 注意@import外接样式必须第一行
    • 内部样式(内嵌样式表)
      • <style type=“text/css”></style>
        • HTML5中type="text/css"可以省略
        • style标签可以放在任何一个地方,建议放在head里面,title之下
    • 行内样式
      • <p style=“color: sienna; margin-left: 20px”></p>

    5.3 CSS选择器

    • CSS选择器
      • * 通用选择器: 会匹配页面所有的元素,降低页面的响应速度,不建议随便使用
      • div 标签选择器(派生选择器)
      • # id选择器
      • . 类选择器,可以多写
      • [] 属性选择器(CSS2)
        • E[att] 属性选择器 --> E标签(元素), att 标签行内块里面的的属性
        • E[att = “val”] 选择器具有att属性且属性值等于val的E元素
        • E[att |= “val”] 选择元素有att属性,值以val或val-开头的元素
        • E[att ~= “val”] 选择元素有att属性,其中以空格分隔val,例:att=“one val"或者"val one”
        • E[att ^= “val”] 匹配具有att属性,且值以val开头的E元素
        • E[att $= “val”] 匹配具有att属性,且值以val结尾的E元素
        • E[att *= “val”] 匹配具有att属性,且值中含有val的E元素
        • E[att $= “val” i] 匹配元素不区分大小写,在结束方括号前加i个

    注意: 类选择器名是可以重复的,ID选择器的名字不能重复

    • CSS 优先级与权重值,最高权重,在属性值的后面添加!important
      • 行内样式(1000) > ID选择器(100) > 类选择器(10) = 属性选择器(10) = 伪类选择器(10) > 伪元素 = 标签选择器(1) > 通用选择器(0)
      • 选择器选择的范围越小越精确,优先级越高

    **实例:**09基本选择器demo01.html

    5.4 选择符

    • 后代选择符: 父类 子类{};
      • 例: h1 em{} --> h1标签下的所有em标签,没有距离可言,对孙子元素及以下都起作用
    • 子元素选择符: 父类>子类{};
      • 例: h1>em{} --> h1标签第一层级子元素em的所有标签,对孙子及以下不起作用
    • 兄弟选择符:ul + ol {}; 同一级必须相邻元素,生效的是后面的弟弟元素ol
      • 相同标签第一个不会生效,后面全生效
    • 同胞连接符: h1 ~ h2{ } h1后面的所有h2元素全生效,只限于同级

    5.5 伪类选择符

    • : root 选择根元素
      • html文档中所有元素的根元素的html元素
    • : empty 空选择标签
      • 没有任何子代标签,文本节点,空格,换行符,里面可以是注释,对img,input,textarea也生效
    • : only-child 唯一子代标签(可以是后代),选择的那个后代元素必须是父类独生子
      • p span:only-child{} -->p标签里面的只能有一个span标签,其他标签都不行,span必须我是独生子
    • only-of-type 表示父元素有很多子元素,而且在子元素里面其中有一个是唯一的
    • : first-child 选择父元素(同胞)中第一个子元素,不可以指定类型
    • : last-child 选择父元素(同胞)中最后一个子元素,不可以指定类型
      • :first-child:last-child{} === only-child{}
    • : first-of-type 选择父元素中第一个相同的子元素,可以指定类型
      • 例 span: first-of-type 指定父(同胞)元素下的第一个span元素
    • :last-of-type 选择父元素中最后一个相同的子元素,可以指定类型
      • :first-of-type:last-of-type{} === :only-of-type{}
    • :nth-child(n可以使数字,公式,关键字:even(偶数) odd(奇数))
      • :first-child == :nth-child(1)
    • : nth-last-child(n) 从一组同胞元素的最后一个开始往前算
      • :nth-child(1):nth-last-child(1) === :only-child
    • :nth-of-type() 从前开始选择同胞元素
    • :nth-last-of-type() 从后向前的同胞元素中选择
      • :nth-of-type(1):nth-last-of-type(1) === :only-of-type

    5.5 动态伪类

    超链接伪类

    • :link 未访问链接,和所有的超链接
    • :visited 已访问的超链接

    用户操作伪类

    • : focus 获取当前输入焦点元素,如表单元素,可编辑内容的元素
    • : hover 当鼠标指针悬浮在元素上
    • : active 当用户输入激活的元素,按下的时刻

    顺序: link --> visited --> focus --> hover --> active

    5.6 UI状态伪类

    • :enabled 启用的用户界面元素(表单元素),接收输入元素

    • :disabled 禁用用户界面元素,不接受输入元素

    • :checked 用户或文档默认选中的单选按钮或复选框

    • :indeterminate 没有选中的单选框或者复选框,这个状态只能由DOM脚本设定,不能用户设定

    • :default 默认选中单选按钮,复选框或选项

    • :valid 满足所有数据的有效性语义的输入框

    • :invalid 不满足所有数据有效性语义的输入框

    • :in-range 输入的值在最小值与最大值之间的输入框

    • :out-of-range 输入的值小于空间允许的最小值或大于空间允许的最大值的输入框

    • :required 必须输入值的输入框

    • :optional 可选输入值的输入框

    • :read-write 用户编辑输入框

    • :read-only 不能由用户编辑的输入框

    5.7:target伪类

    URL中有个片段标识伪类,它所指向的是文档片段称为目标(target).URL片段标识符指向的目标元素可以使用:target伪类装饰

    片段标识符: https://www.baidu.com/#target-pseudo

    这个url中的target-pseudo部分就是片段标识符,由#符号标记

    借助这个元素可以可以显示文档中任何目标元素或者为不同的目标元素定义不同的样式; 例如: a:target{color: red},对id = "target-pseudo"也会生效

    伪类定义的样式在两种请款下不会应用

      1. 页面的URL中没有片段标识符
      2. 页面的URL中有片段标识符,但是文档中没有相匹配的元素

    5.8 :lang伪类

    使文本选择语言选择符,可以使用:lang()伪类,在匹配方式上,:lang()与伪类与 |= 属性选择符类似;伪类选择符与属性选择符之间的主要区别是语言信息有多个来源,有时可能来自元素本身之外.对属性选择符而言元素自身必须有lang属性才能匹配,而:lang伪类能匹配设定语言的元素后代

    在HTMl中语言可以通过lang属性判断,也可以通过meta元素和协议(HTTP)判断.XML使用xml:lang属性,还有可能有文档语言专用方法

    :lang伪类可以使用各种信息,而 |= 属性选择符只能用于标记中有lang属性元素,因此伪类比属性选择符更可靠

    *:lang(fr){
    	font-style: italic;
    }
    *[lang |= "fr"]{
    	font-style: italic;
    }
    

    5.9 否定伪类

    :not(选择符),否定可以连写

    *.link:not(li):not(p){
    	/*class属性包含link这个词,但不是li或p的所有元素*/
    }
    

    5.10 伪元素选择符

    在文档中插入虚构的元素,伪类 ’ : ’ ;伪元素’ :: ’

    ::first-letter和::first-line只能用于块级元素上

    1. 装饰首字母

    ::first-letter{ color: red;}

    常用于首字母大写,或者首字母下沉

    第一种:
    <!--每个p元素的首字母比其余内容大两倍,不过最好应用第一段 -->
    p:first-of-type::first-letter{font-size: 200%;}
    
    第二种:
    <!--::first-letter样式之应用于元素的内容里,<p-first-letter>元素不会出现在文档的源代码里面,也不会出现在DOM中,而是由用户动态构建,目的是把::frist-letter样式应用到文本中-->
    <p>
        <p-first-letter>
            T
        </p-first-letter>
        his is a p element, with a styled first
    <p>
    

    2. 装饰首行

    ::first-line

    常用于装饰首行文本

    第一种: 
    <!--这个样式应用到每个p的第一行文本-->
    p::first-line {
    	color: red;
    }
    第二种:
    <!---->
    <p>
        <p-first-line>
            T
        </p-first-line>
        his is a p element, with a styled first
    <p>
    

    3. 创建前置和后置内容元素

    前置 ::before

    后置 ::after

    /*在h2元素前面添加HELLO并且为红色*/
    h2::before{
    	content: "HELLO"
    	color: red;
    }
    
    • before与after必须有content属性,会创建一个元素,属于行内元素
    • 作用在字体图标可以content: '\ea50’和’口’都可以,一般ea50
    • 可以用于清除浮动

    5.11 CSS背景

    background: url() no-repeat 5px center;/后面两个元素是背景定位/

    • background 背景

      • color: #234; 背景颜色
      • image: url(https://www.baidu.com/image/); 背景图片
      • image:url(file:///C:/Users/a4244/Desktop/MD/59.png);背景图
      • repeat:背景图片重复
        • repeat-x(水平)
        • repeat-y(纵向)
        • no-repeat(不平铺);
      • position: 背景定位
        • center
        • top
        • bottom
        • right
        • left
        • 50% 50%
        • 50px 50px
      • attachment: 固定的背景图像
        • scroll(默认值,随内容一起滚)
        • fix(页面滚背景不滚)
        • inherit(继承父元素)
      • rgba(255,255,255, .5) (背景半透明)

    科普:背景图片与插入图片的区别

    1.插入突变用的最多,比如产品展示,移动位置只能靠盒子模型padding margin
    2.背景图片我们一半用于小图标背景或者超大背景图片,背景图片只能通过background-position

    5.12 CSS字体

    font: italic bold 10px/35px arial, sans-serif,“微软雅黑”(斜体字 加粗 字体大小/行高 默认字体,备用字体,“微软雅黑”); font-size;font-family属性必须写,其他可选

    • font 字体
      • family 定义字体系列

        • arial,sans-serif,“宋体”,“微软雅黑”(如果没有就会一直向后找,如果都没有就会默认)
      • style 字体风格

        • normal(标准)
        • italic(斜体)
        • oblique(倾斜)
        • none(关闭所有风格)
      • variant 字体变形

        • normal(默认值,浏览器会显示一个标准字体)
        • small-caps(浏览器会显示小型大写字母的字体)
        • inherit(继承父类)
      • weight 文本加粗

        • normal(默认值,定义标准字符)
        • bold (定义粗体)
        • bolder (定义更粗的字符)
        • lighter (定义更细的字符)
        • 100-900,400默认值,700(bold)
      • size 字体大小,默认16px,浏览器各不相同,最好自定义

        • xx-small,x-small,small,medium(默认),large,x-large,xx-large(字体尺寸从小到大)
        • smaller (比父元素更小)
        • larger (比父元素更大)
        • length(一个固定的值或者百分比)
        • inherit (继承父类)
      • font-kerning字距

        • auto 用户自动调整
        • normal 正常
        • none 忽略
      • @font-face 自定义字体

        惰性加载字体,指定文本渲染时才会加载

        把下载字体包,解压,把里面的font文件夹放到网页文件夹的fonts里面

        <style>
            @font-face {/*声明字体引用字体*/
                font-family: "icomoon"; /*icomoon官网的名字,可自定义*/
                src: url('fonts/icomoon.eot?7kkyc2');
                src: url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
                     url('fonts/icomoon.ttf?7kkyc2') format('truetype'),
                     url('fonts/icomoon.woff?7kkyc2') format('woff'),
                     url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
                font-weight: normal;
                font-style: normal;/*倾斜字体变正常*/
            }
            span {
                font-family: "icomoon";
            }
            /*或者*/
            span::after{
                content: '口';
                font-family: "icomoon";
            }
            /*或者*/
            span::after{
                content: '\ea50';/*右边小口左边的字码*/
                font-family: "icomoon";
            }
        </style>
        <body>
            <!--打开下载字体文件夹中的demo.html,选中需要的,点击下面的右下角的小口,点击复制粘贴到span,就可以啦-->
            <span>口</span>
        </body>
        

        追加字体图标,在网站上点击import icons(导入icons),选中下载的文件夹中的下来的selection.jsonselection.json就可以

      • CSSUnicode字体
        在CSS中设置字体名称,直接写中文是可以的,但是在文件编码(GB2312,UTF-8等)不匹配时会产生乱码的错误,XP系统不支持类似的字体中文
        解决:
        方案一:用英文代替, 比如: font-family: “Microsoft Yahei”
        方案二: 在CSS中直接使用Unicode编码来写字体名称可以避免这些错误,使用Unicode写中文字体名称,浏览器会正确的解析

    字体名称 英文名称 Unicode编码
    宋体 SimSun \5B8B\4F53
    新宋体 NSimSun \65B0\5B8B\4F53
    黑体 SimHei \9ED1\4F53
    微软雅黑 Microsoft YaHei \5FAE\8F6F\96C5\9ED1
    楷体_GB2312 KaiTi_GB2312 \6977\4f53_GB2312
    隶书 LiSu \96B6\4e66
    幼圆 YouYuan \5E7C\5706
    华文细黑 STXihei \534E\6587\7EC6\9ED1
    细明体 MingLiU \7EC6\660E\4F53
    新细明体 PMingLiU \65B0\7EC6\660E\4F53

    文本格式化标签样式

    标签 含义 样式 属性
    <em></em> 倾斜 添加倾斜 font-style: italic
    <i></i> 取消倾斜 font-style: normal
    <strong></strong> 加粗 添加加粗 font-weigth: 700(bold)
    <b></b> 取消加粗 font-weigth: 400(normal)
    <u></u> 下划线 添加下划线 text-decoration: underline
    <ins></ins> 删除下划线 text-decoration: none
    <s></s> 删除线 添加删除线 text-decoration : line-through
    <i></i> 取消删除线 text-decoration : none

    5.13 CSS文本

    • text 文本
      • indent: 5em(可以负值,百分比,像素值); 首行缩进
        • 1px = 16em,一个em就是一个字的距离
      • align: 文本对齐
        • left(左对齐)
        • right(右对齐)
        • center(居中对齐)
        • justify(两端对齐)
        • inherit(看父元素)
      • spacing: 字符间距
        • normal (默认值,和0一样)
        • length(可正可负)
        • inherit (看父元素)
      • transform 处理文本大小写
        • none(默认)
        • uppercase(全转为大写)
        • lowercase(全转为小写)
        • capitalize(首字母大写)
      • decoration 文本装饰,可以多个属性值一起写
        • none(关闭所有装饰)
        • underline(文本加下划线)
        • overline(文本顶端加下划线)
        • line-through(文本中间画贯穿线)
        • blink (文本闪烁)
    • direction: 文本方向
      • ltr (默认.文本方向从左到右)
      • rtl (文本方向从右到左)
      • inherit (继承父类)
    • white-space(处理空白字符)
      • pre-line(合并空白符,保留换行符,允许自动换行)
      • normal (合并空白符,忽略换行符,允许自动换行)
      • nowrap (合并空白符,忽略换行符,不允许自动换行)
      • pre (保留空白符,保留换行符,不允许自动换行)
      • pre-wrap(保留空白符,保留换行符,允许自动换行)
    • a 链接状态(按照这个顺序不能换)
      • a:link {color:#FF0000;} (未被访问的链接)
      • a:visited {color:#00FF00;}(已被访问的链接)
      • a:hover {color:#FF00FF;} (鼠标指针移动到链接上)
      • a:active {color:#0000FF;} (正在被点击的链接)
    • line-height (行高,行间距)
    • color (文本颜色)

    5.14 CSS盒子模型

    在这里插入图片描述

    • 盒子边距
      • margin: (top,right,bottom,left)盒子的外边距,会重叠合并(盒子塌陷)
      • padding: (top,right,bottom,left)盒子边框内边距,会撑开盒子(子盒子没有宽度,不会撑开)
    • 盒子边框
      • border-style:(border-top/right/bottom/left-style)边框样式
        • none(无边框)
        • hidden(与 “none” 相同。不过应用于表时除外,对于表,hidden 用于解决边框冲突)
        • dotted(点状边框,很细,密密麻麻的点,有的浏览器直接实现实现)
        • dashed(定义虚线,有的浏览器也会显示实线)
        • solid(实现)
        • double(双线)
        • groove(定义 3D 凹槽边框。其效果取决于 border-color 的值)
        • ridge(定义 3D 垄状边框。其效果取决于 border-color 的值)
        • inset(定义 3D inset 边框。其效果取决于 border-color 的值。)
        • outset(定义 3D outset 边框。其效果取决于 border-color 的值)
        • dotted solid double dashed(上 右 下 左)
        • dotted solid double(上 左右 下)
        • dotted solid(上下 左右)
        • dotted(上下左右)
      • border-width: (border-top/right/bottom/left-width)边框宽度
        • thin(细边框)
        • medium(默认中等边框)
        • thick(定义粗边框)
        • length(自定义边框宽度)
        • inherit(继承父类)
      • border-color: (border-top/right/bottom/left-color)边框颜色
        • transparent(默认值,边框透明)
        • inherit(继承父类)
      • border-radius: 50%(圆) || 1px (圆角边框)(CSS3)
      • 圆角矩形,按照下面的顺序写 border-radius: 左上 右上 右下 左下;
        • border-top-left-radius 左上角圆弧
        • border-top-right-radius右上角圆弧
        • border-bottom-right-radius 右下角圆弧
        • border-bottom-left-radius 左下角圆弧
      • border-collapse
        • collapse: 表格边框合并是1+1=2,变粗,然后使用这方法相邻边框合并在一起
        • separate: 表格边框合并是1+1=2
        • inherit
      • box-shadow盒子阴影(按照这顺序可以连写)(CSS3)
        • h-shadow(必须,水平x轴阴影位置,允许负值)
        • v-shadow(必须,垂直y轴阴影的位置,允许负值)
        • blur(可选,模糊阴影,数值越大越模糊)
        • spread(可选,阴影大小)
        • color(可选,阴影的颜色)
        • inset(默认外部阴影,修改为内部阴影;注意外部阴影不能写)

    box-shadow:0 2px 4px rgba(0,0,0,.2);

    科普1:盒子居中

    盒子水平居中要满足两个条件1.必须指定宽度;2.然后给左右两个外布局设置为auto
    写法一: margin-left: auto; margin-right: auto;
    写法二: margin: auto;因为上下auto是没有用的
    写法三: margin: 0 auto;

    科普2:边距

    行内元素上下外边距设置没用,低版本IE设置内边距也没用,为了兼容性尽量写左右内外边距,不要写上下

    5.15 盒子塌陷解决办法

    • overflow: 内容溢出元素框时,发生的事情
      • visible(默认值。内容不会被修剪,会呈现在元素框之外)
      • hidden (内容会被修剪,并且其余内容是不可见的)
      • scroll (一直显示滚动条,超出部分滚动可见)
      • auto (当超出元素框后,显示滚动条,超出部分滚动可见)
      • inherit(规定应该从父元素继承 overflow 属性的值。)

    5.16 标签显示模式(display)

    • 块级元素 (block-level)

      • 特点: 宽度默认独占一行(100%)
      • div,p,h1-h6,ul,li,ol,form,table等
    • 行内元素 (inline-level)

      • 特点: 宽高无效,默认内容的宽高,所有内容排在一排
      • a,strong,b,em,i,del,s
    • 行内块 (lnline-block)

      • 行内元素只能放行内元素,(float,绝对定位,固定定位都会把标签转为行内块)
      • 既能设置宽高大小,又能排在一排显示
      • img,input,td
    • 模式转换

      • 块转行内: display:inline
      • 行内转块: display: block
      • 块与行内 转成行内块: display: inline-block

    5.17 盒子布局的三种机制

    网页布局的核心-就是用css布局

    css提供三种机制来设置盒子的摆放,分别是普通流(标准流),浮动和定位

    • 普通流(标准流);

      • 块级元素会独占一行,从上向下顺序排列

        • 常用元素: div, hr, p, h1-h6, ul , ol ,dl ,form, table
      • 行内元素会按照顺序,从左到右顺序排列.碰到父元素就会换行

        • 常用元素: span, a, i, em等
    • 浮动

      • 让盒子从普通流中浮起来,主要作用是让多个盒子一行显示
    • 定位

      • 将盒子定在浏览器的某一个位置–css离不开定位,特别是后面的js特效

    5.18 浮动

    float: left(左浮动123) || left(右浮动321)||none无浮动

    • 浮动元素重叠问题
      • 浮动不会覆盖文字内容
      • 浮动不会覆盖图片内容
      • 浮动不会覆盖表单内容
      • 任何元素都可以浮动,无论它本身是什么元素.浮动起来就是块级框(和行内块相似)
      • 浮动只会影响当前或者后面的标准流盒子,不会影响到前面的标准流

    5.19 清除浮动

    ​ 很多情况下,父盒子不方便给高度,但是子盒子浮动就不占位置,最后父级盒子高度为0,就会影响到下面的盒子

    ​ 清除浮动主要是为了解决父级元素因为子级浮动引起内部高度为0的问题,清除浮动后,父级就会根据浮动的子盒子自动检测高度,父级就有了高度,就不会影响下面的标准流了

    语法: 选择器 { clear: left/ right/ both}/清除左侧 /右侧 / 左右两侧的浮动/

    • 清除浮动有四种方法

    方法一:额外标签法

    w3c推荐的做法: 通过浮动元素,末尾添加一个空标签,例如<div style = “clear:both”></div>

    优点: 通俗易懂,书写方便

    缺点: 添加许多无意义的标签,结构差

    示例10: 清除浮动之额外标签法demo01.html

    方法二: 父级添加overflow属性的方法

    可以给父级添加: overflow: hidden | auto | scroll都可以实现

    优点: 代码简洁

    缺点: 内容增多时候容易造成不会换行导致内容被隐藏掉,无法显示需要溢出的元素

    示例11: 清除浮动之overflow demo01.html

    方法三: 使用after为元素清除浮动
    after方式为空标签额外标签法的升级版本,好处是不用单独加标签
    .clearfix: after {
    	
    	diplay: block;
    	overflow: hidden;/*可选*/
        clear: both;
        height: 0;
        visibility: hidden;
    	content: "";
    }
    .clearfix {
    	*zoom: 1;/*IE6,7专有*/
    }
    

    优点: 符合闭合浮动思想

    缺点: 由于IE6,7不支持: after,使用zoom:1触发hasLayout(百度,淘宝,网易等都有)

    示例12: 清除浮动之单伪元素demo01.html

    方法四: 双为元素清除浮动

    .clearfix:before,
    .clearfix:after {
    	display: table;
    	content: "";
    }
    .clearfix:after{
    	clear: both;
    }
    .clearfix{
    	*zoom: 1;
    }
    

    优点: 代码更简洁,语义化正确

    缺点: 由于IE6,7不支持: after,使用zoom:1触发hasLayout(腾讯,小米等都有)

    示例13: 清除浮动之双伪元素demo01.html

    5.20 绝对定位

    口诀: 子绝父相

    • position:位置
      • relative : 相对定位的元素,对象不可层叠,absolute开始相对它定位 ,本体移走,位置保留
        • left
        • right
        • top
        • bottom
      • absolute: 绝对定位,可以相对absolute,relative,fixed定位,但是第一个必须是relative,fixed,浏览器窗口,本体移走,位置不保留
        • left
        • right
        • top
        • bottom
      • fixed: 固定定位,相对于浏览器窗口进行定位
      • static: 默认值。静态定位,元素出现在正常的流中
      • inherit: 规定应该从父元素继承 position 属性的值

    5.21 绝对定位盒子居中

    div {
    			position: absolute;
    			left: 50%;
    			top: 50%;
    			margin-left: -100px;
    			margin-top: -100px;
    			height: 200px;
    			width: 200px;
    			border: 1px solid #ff0000;
    		}
    /*或者*/
    div{
    	position: absolute;
    	left: 50%;
    	top: 50%;
    	height: 200px;
    	width: 200px;
    	border: 1px solid #ff0000;
    	transform: translate(-50%, -50%);
    }
    

    5.22 堆叠顺序(z-index)

    ​ 在使用定位布局时,可能会出现盒子重叠情况,加了定位盒子,默认后来者区上,后面的盒子会压住前面的盒子,应用z-index层叠等级属性可以调整盒子的堆叠顺序

    • 属性值: 正数负数或0,默认值0,数值越大盒子越上
    • 如果属性值相同后来者区上
    • 数字后面不能加单位

    **注意: **z-index只能应用于相对定位, 绝对定位和固定定位的元素,其他标准流,浮动,静态定位无效

    6. CSS高级

    6.1 元素显示与隐藏

    6.1.1 diaplay 显示

    • block : 块对象的默认值,同时还有显示元素
    • inline : 转为行内块(内联对象)
    • inline-block: 转为行内块对象
    • none: 隐藏对象,不保留位置。与visibility: hidden(保留位置)不同
    • 还有表格操作元素,查手册

    6.1.2 visiblity 可见性

    • visible: 显示
    • hidde: 隐藏(保留位置); 清除浮动
    • inherit: 继承父级
    • collapse: 隐藏表格的行和列

    6.1.3 overflow 溢出

    • visible: 不剪辑溢出内容,内容也不添加滚动条
    • hidden: 不显示超出的部分,超出的部分隐藏
    • scroll: 不管内容超出与否,都添加滚动条
    • auto: 超出自动显示滚动条,不超出不显示滚动条

    6.2 用户界面样式

    6.2.1 鼠标样式 cursor

    • default: 小白(默认) 在这里插入图片描述
    • pointer: 小手 在这里插入图片描述
    • move: 移动在这里插入图片描述
    • text: 文本在这里插入图片描述
    • not-allowed: 禁止在这里插入图片描述

    6.2.2 轮廓线 outline

    轮廓线: 文本输入框选中会出现蓝色的边框的外围,可起到凸起元素的作用

    outline: outlone-color | outline-style | outline-width

    但是一般不关心可以设置多少,平时一般去掉,直接写法: outline: 0;或者outline: none;

    <input type = “text” style = “outline: 0;” />

    6.2.3 防止拖拽文本域 resize

    < textarea style = “resize: none;”></textarea> /防止拖拽/

    6.3 垂直对齐 vertical-align

    1. 有宽度的块级元素居中对齐,是margin: 0 auto;
    2. 让文字居中对齐,test-align: center;

    vertical-align垂直对齐,他只针对行内元素或者行内块元素有效果,块元素没用

    在这里插入图片描述

    行高指基线与基线的距离

    vertical-align: baseline(基线对齐,默认) | top(顶线对齐) | midde(中线对齐) | bottom(底线对齐)

    6.3.1 去除图片低侧空白缝隙

    父盒子由图片撑开,图片下面会有空白缝隙,因为图片或者表单等行内块元素,它的底线会和父级盒子的基线对齐,就是图片低侧会有的空白缝隙
    解决方案1 : 给img添加vertiacl-align:middle| top | midde都可以,让图片不要和基线对齐
    解决方案2: 给img添加 diaplay: block; 把图片转换为块级元素,就不会生效

    6.4 溢出文字解决

    • while-space(文本显示方式)
      • normal;(默认处理,文字会自动换行)
      • nowrap; (强制在同一行显示,直到文本结束或br)
      • pre 保留格式
      • pre-wrap: 保留空白符序列,但是正常的进行换行
      • pre-line: 合并空白,保留换行
    • overflow
      • hidden;(隐藏)
    • text-overflow
      • clip (文本溢出不显示省略号,简单的裁切)
      • ellipsis(文本溢出显示省略号标记)
    /*第一步: 先强制一行内显示文本*/
    white-space: nowrap;
    /*第二步: 超出的部分隐藏*/
    overflow: hidden;
    /*第三步: 文字省略号待敌超出的文本*/
    text-overflow:ellipsis;
    

    6.5 CSS精灵技术

    6.5.1 精灵技术产生背景

    在这里插入图片描述
    ​ 图所示为网页的请求原理图,当用户访问一个网站时,需要向服务器发送请求,网页上的每张图像都要经过一次请求才能展现给用户。
      然而,一个网页中往往会应用很多小的背景图像作为修饰,当网页中的图像过多时,服务器就会频繁地接受和发送请求,这将大大降低页面的加载速度。为了有效地减少服务器接受和发送请求的次数,提高页面的加载速度,出现了CSS精灵技术(也称CSS Sprites、CSS雪碧)。

    6.5.2 精灵技术本质

    ​ CSS精灵是一种处理网页背景图像的方式。它将一个页面涉及到的所有零星背景图像都集中到一张大图中去,然后将大图应用于网页,这样,当用户访问该页面时,只需向服务发送一次请求,网页中的背景图像即可全部展示出来。通常情况下,这个由很多小的背景图像合成的大图被称为精灵图(雪碧图),如下图所示为王者荣耀网站中的一个精灵图
    在这里插入图片描述

    .icon01 {
        width: 23px;
        height: 23px;
        background: url(file:///C:/Users/a4244/Desktop/MD/59.png) 0px -106px;
        /*background-position: 0(左右不动) -106(背景图上移)*/
    }
    

    6.6 滑动门技术

    ​ 为了各种特殊形状的背景能够自适应元素中文本内容的多少,出现了CSS滑动门技术.它从新的角度构建页面,使各种形状的背景能够自动拉伸,以适应元素内部的文本内容,可用性很强,常见于各种导航栏的滑动门

    核心技术

    ​ 核心技术就是利用css精灵(主要是背景位置)和盒子padding撑开,以便于能使用不同字数的导航栏.一般经典布局是:

    精灵图:在这里插入图片描述

    <style>
       /*a设置左侧(背景)门*/
        a {
            /*需要用文字撑开内容,所以用行内块元素*/
            display: inline-block;
            height: 33px;
            background: url(file:///C:/Users/a4244/Desktop/MD/60.png) no-repeat;
            padding-left: 15px;
        }
        /*span设置右(背景)边门*/
        a span {
            display: inline-block;
            height: 33px;
            background: url(file:///C:/Users/a4244/Desktop/MD/60.png) no-repeat right;
            padding-right: 15px;
        }
        a:hover,
        a:hover span {
            background-image: url(file:///C:/Users/a4244/Desktop/MD/61.png);
        }
    	</style>
    </head>
    <body>
    	<a href="#">
    		<span>导航栏内容</span>
    	</a>
    </body>
    

    6.7 margin负值

    6.7.1 解决边框1+1=2

    利用margin去掉盒子与盒子合并的1+1 = 2的问题

    div {
    			/*浮动的盒子是紧贴在一起的*/
    			float: left;
    			width: 200px;
    			height: 300px;
    			border: 1px solid #ccc;
    			margin-left: -1px;
    			margin-top: -1px;
    		}
    		/*鼠标经过div 的意思  p:hover */
    		div:hover {
    			/*我要让当前鼠标经过的这个div 升到最高处来就好了*/
    			/*定位的盒子是最高层的  */
    			border: 1px solid #f40;
    			/*我们只要保证当前的这个盒子 是定位 就会压住 标准流和浮动盒子*/
    			position: relative;
    			/*我们只能用相对定位  它是占位置的*/
    		}
    
    div {
    			position: relative;
    			/*浮动的盒子是紧贴在一起的*/
    			float: left;
    			width: 200px;
    			height: 300px;
    			border: 1px solid #ccc;
    			margin-left: -1px;
    			margin-top: -1px;
    		}
    		/*鼠标经过div 的意思  p:hover */
    		div:hover {
    			/*我要让当前鼠标经过的这个div 升到最高处来就好了*/
    			/*定位的盒子是最高层的  */
    			border: 1px solid #f40;
    			/*都是定位的盒子,我们通过z-index 来实现层级关系*/
    			z-index: 1;
    
    		}
    

    6.7.2 制作三角

    ​ 用CSS边框可以模拟三角结果,宽度高度都为0,我们4个边框都要写,只保留边框的颜色,其余不能省略,都改为transparent(透明色)就好
    ​ 为了照顾兼容性,低版本浏览器,加上font-size: 0; line-height: 0;

    <style>
    		div {
    			width: 0;
    			height: 0;
    			border-top: 10px solid red;
    			border-bottom: 10px solid green;
    			border-left: 10px solid blue;
    			border-right: 10px solid pink;
    		}
    		p {
    			width: 0;
    			height: 0;
    			border-style: solid;
    			border-width: 10px;
    			border-color: red transparent  transparent transparent;
    			font-size: 0;
    			line-height: 0;
    		}
    	</style>
    </head>
    <body>
    	<div></div>
    	<p></p>
    </body>
    

    6.8 引入icon

    在网站的链接后面添加favicon.ico

    
    /*https://www.jd.com/favicon.ico*/
    /*在head之间引入*/
    <link rel = "shortcut icon" href = "favicon.ico" type = "image/x-icon">
    /*或者*/
    <link rel = "icon" href = "favicon.ico">
    

    ## 7. HTML5

    7.1 HTML5 简介

    ​ 万维网的核心语言,标准通用标记语言下的一个应用超文本标记语言(HTML)的第五次重大修改.作为新的HTML语言,具有新的元素,属性和行为
    ​ HTML5它有更大的技术集,允许多样化和强大的网站和应用程序
    ​ 增加了新特性: 语义特性, 本地存储特性, 设备兼容特性, 连接特性, 网页多媒体特性, 三维, 图形及特效特性, 性能与集成特性, CSS3特性
    ​ XHTML是一种增强了的HTML,它的可扩展性和灵活性将适应未来网络应用更多的需求

    7.2 H5新增语义化标签

    标签 含义 标签 含义 标签 含义
    <header> 头部标签 <nav> 导航栏标签 <article> 内容标签
    <section> 块级标签 <aside> 侧边栏标签 <footer> 尾部标签
    <audio> 音频标签 <video> 视频标签 <footer> 尾部标签

    注意: 这些语义化标签主要是针对搜索引擎的; 一个页面可以多次使用; 在IE9中需要把他们转换为块级元素

    7.3 autio音频标签

    语法: <autio src=“autio.mp3” controls = “controls”></autio>

    • 属性
      • autoplay: autoplay; 如果出现该属性,则音频就绪后会马上播放(谷歌禁用)
      • controls: controls; 如果出现该属性,则向用户显示控件,比如播放按钮
      • loop: loop; 如果出现该属性,则每当音频结束时重新开始播放
      • src: url; 要播放的音频URL
    <!--注意: 不同浏览器支持的格式不同,采取的解决方案也不同,一般是准备多种格式的音频,但是只会执行一个-->
    <audio controls = "controls">
    	<source src = "media/snow.mp3" type = "audio/mpeg">
    	<source src = "media/snow.ogg" type = "audio/ogg">
    	你的浏览器不支持audio音频
    </audio>
    

    7.4 video视频标签

    语法: <video src=“video.mp4” controls = “controls”></video>

    • video属性
      • autoplay: autoplay; 视频就绪自动播放
      • controls: xontrols; 向用户显示播放界面(不使用)
      • width: pixels(像素); 设置播放器的宽度
      • height: pixels(像素); 设置播放器的高度
      • loop: loop; 播放完继续播放该视频,循环
      • preload: 规定是否预加载视频(如果有了autoplay就会忽略该属性)
        • auto(预先加载视频)
        • none(不应加载视频)
      • src: url; 视频url地址
      • poster: imgurl; 加载等待画面图片
      • muted: muted; 静音播放
    格式 IE 火狐 Opera Chrome Safari
    Ogg NO 3.5+ 10.5+ 5.0+ NO
    MPEG 4 9.0+ No No 5.0+ 3.0+
    Ogg NO 4.0+ 10.6+ 6.0+ NO
    <!--注意: 不同浏览器支持的格式不同,采取的解决方案也不同,一般是准备多种格式的视频,但是只会执行一个,谷歌浏览器把自动播放给禁用了: 给视频静音属性就可以解决-->
    <video controls = "controls" width = "300">
    	<source src = "video/snow.mp4" type = "video/mpeg">
    	<source src = "video/snow.ogg" type = "video/ogg">
    	你的浏览器不支持video视频
    </video>
    

    8 CSS3

    8.1 2D转换

    转换(transform): 实现元素位移,旋转,缩放等效果(变形)

    • 移动: translate
    • 旋转: rotate
    • 变形: scale
      • 综合写法transfrom: translate(150px,150px) rotate(180deg) scale(1.2)…等

    1. 移动: translate

    /*语法: 百分比单位相对于自身元素的translate:(50%,50%)*/
    transform: translate(x, y)
    /*或者*/
    transform: translateX(x);
    transform: translateY(y);
    

    优点: 不会影响其他元素的位置,对行内标签没有效果

    2.旋转: rotate

    transform: rotate(度数);
    
    • rotate里面跟度数,单位deg,如rotate(45deg)
    • 角度为正时,顺时针; 负时,为逆时针
    • 默认旋转的中心点是元素的中心点

    3.旋转的中心点: transform-origin

    transform-origin: x y;
    /*x,y(默认中心点50%,50%), 还可以给x,y设置像素,方位名词: top, bottom, left, center*/
    

    4. 缩放: scale

    /*语法: transform: scale(x,y)*/
    transform: scale(1,1): 放大一倍,相当于没有放大
    transform: scale(2,2): 放大两倍
    transform: scale(2) == transform: scale(2,2)
    transform: scale(0.5,0.5): 缩小一半
    /*可以设置中心点缩放,默认就是中心点,而且不会影响其他盒子*/
    

    8.2 过渡动画CSS3

    过渡(transition)是CSS3中具有颠覆性的特征之一,我们可以在不使用 Flash 动画或 JavaScript 的情况下,当元素从一种样式变换为另一种样式时为元素添加效果。

    过渡动画: 是从一个状态 渐渐的过渡到另外一个状态

    可以让我们页面更好看,更动感十足,虽然 低版本浏览器不支持(ie9以下版本) 但是不会影响页面布局。

    我们现在经常和 :hover 一起 搭配使用。

    语法格式:

    transition: 要过渡的属性  花费时间  运动曲线  何时开始;
    
    属性 描述 CSS
    transition 简写属性,用于在一个属性中设置四个过渡属性。 3
    transition-property 规定应用过渡的 CSS 属性的名称。 3
    transition-duration 定义过渡效果花费的时间。默认是 0。 3
    transition-timing-function 规定过渡效果的时间曲线。默认是 “ease”。 3
    transition-delay 规定过渡效果何时开始。默认是 0。 3
    • 属性

    ​ 属性就是你想要变化的 css 属性, 宽度高度 背景颜色 内外边距都可以 。如果想要所有的属性都变化过渡, 写一个all 就可以。

    • 花费时间

      transition-duration 花费时间 单位是 秒(必须写单位) s ms 比如 0.5s 这个s单位必须写 ms 毫秒

    • 运动曲线 ease(默认)

    运动曲线示意图:

    在这里插入图片描述

    • 何时开始

      默认是 0s 鼠标触发就立即开始 可以设置 延迟触发时间

    案例:

    div {
    			width: 200px;
    			height: 100px;
    			background-color: pink;
    			/* transition: 要过渡的属性  花费时间  运动曲线  何时开始; */
    			/*transition: width 0.6s ease 0s, height 0.3s ease-in 1s, background-color 1s ease 0s;*/
    			/* transtion 过渡的意思  这句话写到div里面而不是 hover里面 */   
        /*二选一*/
      transition: all 0.6s;  /* 所有属性都变化用all 就可以了  后面俩个属性可以省略 */
    			
    }
    div:hover {  /* 鼠标经过盒子,我们的宽度变为400 */
    
    			width: 600px;
    			height: 300px;
        background-color: purple;
    }
    

    8.3 动画

    动画(animation): 可通过设置多个节点来精确控制一个或一组动画,用用来实现复杂的动画效果

    相比于过渡,动画实现跟多变化,更多控制,连续自动播放等效果

    制作动画: 先定义动画,然后使用(调用)动画

    • 动画序列
      • 0%是动画的开始,100%是动画完成,这样的规则就是动画序列
      • 在@keyframes中规定某项CSS样式,就能创建由当前样式逐渐改为新样式的动画效果
      • 动画是使元素从一种样式逐渐变化为另一种样式的效果,您可以改变任意多的样式任意多的次数
      • 请用百分比来规定变化发生的时间,或用关键词"from"和"to",等同于0%和100%
    • 动画属性
      • @keyframes 规定动画
      • animation 所有动画属性的简写属性,除animation-play-state属性
      • animation-name 规定@keyframes动画名称(必须的)
      • animation-duration 规定动画完成一个周期多花费的秒或毫秒,默认是0(必须的)
      • animation-timing-function 规定动画运动曲线
        • linear 动画从头到尾的速度相同,匀速
        • ease 默认. 动画以低速开始,然后加快,在结束前变慢
        • ease-in 动画低速开始
        • ease-out 动画低速结束
        • ease-in-out 动画以低速开始低速结束
        • steps() 指定了时间函数中的间隔数量
      • animation-delay 规定动画何时开始,默认是0
      • animation-iteration-count 规定动画播放的次数,默认是1,还有infinite
      • animation-direction 规定动画是否在下一周期逆向播放,默认是"normal",alternate逆向播放
      • animation-play-state 规定动画是否正在运行或暂停,默认是"running"还有"paused"
      • animation-fill-mode 规定动画后的结束状态,保持forwards,回到起始backwards
      • 简写: animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束状态,第二个动画;
    /*1. 定义动画*/
    @keyframes move{
    	0%{/*开始状态*/
    		transform: translateX(0px, 0px);
    	}
    	100%{/*结束状态*/
    		transform: translateX(1000px, 0px);
    		opacity: 1; /*透明度[0-1]*/
    	}
    	/*或者*/
    	from{/*开始状态*/
    		transform: translateX(0px);
    	}
    	to {/*结束状态*/
    		transform: translateX(1000px);
    	}
    }
    div{
    	width: 200px;
    	height: 200px;
    	/*2. 调用动画*/
    	animation-name: move;
    	/*持续时间*/
    	animation-duration: 3s;
    	/*运动曲线*/
    	animation-timing-function: ease;
    	/*开始时间*/
    	animation-delay: 1s;
    	/*动画播放次数: 无限*/
    	animation-iteration-count: infinite
    	/*动画的播放方向: 逆向*/
    	animation-deiection: alternate
    }
    <div><div>
    

    8.4 3D转换

    • 3D位移: translate3d(x, y, z)
    • 3D旋转: rotate3d(x, y, z)
    • 透视: perspective
    • 3D呈现: transfrom-style

    1. 3D移动: translate3d

    translform: translateX(100px); 仅在X轴上移动

    translform: translateY(100px); 仅在Y轴上移动

    translform: translateZ(100px); 仅在Z轴上移动

    translform: translateX(100px) translateY(100px) translateZ(100px);

    translform: translate3d(x,y,z); 分别指定x, y, z轴移动方向的距离

    2. 透视: perspective

    perspective: 200px;
    透视的属性一般写在被观察的父盒子的身上

    3. 3D旋转: rotate3d

    transform: rotateX(45deg): 沿着x轴的正方向旋转45度
    transform: rotateY(45deg): 沿着y轴的正方向旋转45度
    transform: rotateZ(45deg): 沿着z轴的正方向旋转45度
    transform: rotate3d(x, y, z, deg);沿着自定义轴旋转deg为角度

    4. 3D呈现: transfrom-style

    • 控制子盒子是否开启三维立体环境
    • transfrom-style: flat子元素不开启3d立体空间,默认的
    • transfrom-style: preserce-3d; 子元素开启立体空间
    • 代码写给父级,但是影响的却是子盒子

    8.5 渐变

    1 线性渐变

    background: linear-gradient(起始方向,颜色1,颜色2,...);
    background: -webkit-linear-gradient(left, red, blue);
    background: -webkit-linear-gradient(left top, red, blue);
    要加私有前缀,不然不显示
    

    8.5 浏览器私有前缀

    浏览器私有前缀是为了兼容老版本,比较新的就不用添加

    • -moz-: 代表火狐(firefox)
    • -ms-: IE
    • -webkit-: safari, chrome
    • -o-: Opera
    /*例如圆角*/
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
    

    9 移动端

    视口(viewport):浏览期限是页面的屏幕区域,视口可以分: 布局视口, 视觉视口, 理想视口*

    • 布局视口(layout viewport)

    一般移动设备的浏览器都默认设置了一个布局视口,用于解决早期的PC端页面在手机上显示的问题。
    iOS, Android基本都将这个视口分辨率设置为 980px,所以PC上的网页大多都能在手机上呈现,只不过元素看上去很小,一般默认可以通过手动缩放网页,手机显示电脑网页

    • 视觉视口(visual viewport)

    字面意思,它是用户正在看到的网站的区域。注意:是网站的区域。
    我们可以通过缩放去操作视觉视口,但不会影响布局视口,布局视口仍保持原来的宽度。

    • 理想视口(ideal viewport)
      为了使网站在移动端有最理想的浏览和阅读宽度而设定

      理想视口,对设备来讲,是最理想的视口尺寸

      需要手动添写meta视口标签通知浏览器操作

      meta视口标签的主要目的:布局视口的宽度应该与理想视口的宽度一致,简单理解就是设备有多宽,我们布局的视口就多宽

      总结:我们开发最终会用理想视口,而理想视口就是将布局视口的宽度修改为视觉视口

    9.1 视口标签meta

    <meta name = “viewport” content = “width=device-width, use-scalable = no, initial-scale = 1.0, maximum-scale = 1.0, minimum-scale = 1.0”>

    content = width = device-width(设备的宽度)
    use-scalable = no (不允许用户放大(no,0))
    initial-scale = 1.0(初始缩放)
    maximum-scale = 1.0(最大缩放比)
    minimum-scale = 1.0(最小缩放比)

    9.2 二倍图

    图片缩放
    设定图片大小为100px*100px,手机一般是2:1 img{width: 50px; height: 50px}

    背景图缩放background-size

    • background-size: 背景图宽度 背景图片高度;
      • cover: 等比例拉伸,背景放大至完全覆盖,可能有些部分显示不全
      • contain: 等比例拉伸,当宽度或高度铺满盒子就不会在拉伸,可能有部分空白区域
    • 精灵图二倍缩放
      • 先把精灵图缩小至原来的两倍,然后量坐标与大小
      • background-size也要缩放

    9.3 移动端主流方案

    1. 单独制作移动端页面(主流)

      • 流式布局(百分比布局); flex弹性布局; less+rem+媒体查询布局; 混合布局
      • 通常情况下,网址域名前面加m(mobile)可以打开移动端.通过判断设备打开,则跳转移动端页面,例:m.taobao.com
    2. 响应式页面兼容移动端(其次)

    • 媒体查询; bootstarp
    • 判断屏幕宽度来改变样式,以适应不同终端,制作麻烦,花大量的精力调兼容性问题

    移动端浏览器基本以webkit内核为主,因此只要考虑webkit的兼容性问题,可以使用H5,CSS3

    移动端CSS初始化文件: normalize.css

    • Normalize.css

      • 保护了有价值的默认值
      • 修复了浏览器的bug
        • 是模块化
      • 拥有详细的文档
      • 官网:http://necolas.github.io/normalize.css/
    • CSS3的盒子模型: box-sizing

      • box-sizing: content-box; 传统模式
      • box-sizing: border-box; CSS3模式
      • 传统盒子模型: 盒子宽度 = width + border + padding;
      • CSS3盒子模型: 盒子的宽度 = CSS中设置的宽度,里面包含border和padding,也就是说不会撑大盒子

    特殊样式

    CSS3盒子模型

    box-sizing: border-box;

    -webkit-box-sizing: border-box;

    点击高亮我们需要清除: 设置为transparent;

    -webkit-tap-heighlight-color: transparent;

    在移动端ios默认外观加上这个属性才能给按钮和输入框自定义样式

    -webkit-appearance: none;

    禁用长按页面时的弹出菜单

    img,a{-webkit-touch-callout: none;}

    10 fiex布局

    传统布局: 兼容性好, 布局繁琐,局限性,不能在移动端很好的布局
    fiex布局: 操作方便,布局简单,移动端应用广泛,pc支持较差,IE不支持

    布局原理: 通过给父盒子添加flex属性,来控制子盒子的位置和排列方式

    flexible Box的缩写(弹性布局),用来为盒转模型提供最大的灵活性,任何一个容器都可以指定为flex布局

    • 当我们为父盒子设为flex布局后,子元素的float,clear,vertical-align属性会失效
    • 伸缩布局 = 弹性布局 = 伸缩盒布局 = 弹性盒布局 = flex布局
    • 采用flex布局的元素,称为Flex容器(flex container),简称"容器",他的所有子元素自动成为容器成员,称为Flex项目(flex item),简称"项目"
      • div就是flex父容器,大的叫容器,小的叫项目
      • span就是自容器flex项目
      • 自容器可以横向排列也可以纵向排列

    10.1 flex的父类属性

    给父元素: display: flex;

    • flex-direction: 设置主轴的方向
      • flex布局中,分为主轴和侧轴两个方向或者叫行和列,或者X,Y轴,子元素是根据主轴排列的
      • 主轴默认方向就是x轴的方向,水平向右;侧轴方向是y轴的方向,水平向下
      • 主轴和侧轴是可以变换的,就可flex-direction设置谁是主轴,剩下的就是侧轴
      • 属性:
        • row: 默认从左到右
        • row-reverse 从右到左
        • column 从上到下
        • column-reverse 从下到上
    • justify-content: 设置主轴上的子元素排列方式
      • 使用这个元素之前一定要确定主轴是哪个
      • 属性:
        • flex-start: 默认值,从头开始,如果主轴是x轴,则从左向右
        • flex-end: 尾部开始排列
        • center: 主轴区中对齐(如果主轴是x轴则水平区中)
        • space-around: 平分剩余空间
        • space-between: 先两边贴边,再平分剩余空间(重要)
    • flex-wrap: 设置子元素排列方式
      • 默认的情款下,盒子都排在一条轴上,flex布局默认不换行
      • 属性值:
        • nowrap: 默认值,不换行
        • wrap换行
    • align-content: 设置侧轴上的子元素的排列方式(多行),单行无效果
      • 属性:
        • flex-start 在侧轴的头部开始排列
        • flex-end 在侧轴的尾部开始排列
        • center 在侧轴的中间显示
        • stretch 设置子项元素高度平分父元素高度
        • space-around 子项在侧轴平分剩余空间
        • space-between 子项在侧轴先分布在两头.在平分剩余空间
    • align-items: 设置侧轴上的子元素排列方式(单行)
      • 该属性是控制侧轴(默认y轴),上的排列顺序,在子项为单向的时候使用
      • 属性:
        • flex-start 默认值 从上到下
        • flex-end 从下到上
        • center 挤在一起区中(垂直区中)
        • stretch 拉伸
    • flew-flow: 复合属性,相当于同时设置了flex-direction和flex-wrap简写
      • flexflow: row wrap;

    10.2 flex的子项属性

    flex属性定义了子项目分配剩余控件,用flex来表示占多少份数

    flex: number;默认是0

    align-self属性允许单个项目与其他项目不一样的对齐方式.可以覆盖align-items属性,默认值为auto,标识继承父元素的align-items属性,如果没有父元素,则等同于stretch

    span:nth-child(2){align-self: flex-end;}

    order属性定义项目的排列顺序
    数值越小,排列越靠前面,默认为0

    11 rem适配布局

    11.1 rem基础

    rem(root em)是相对单位, 类似于em,em是父元素字体大小,不同的是rem的基准是相对于html元素的字体大小
    优点:可以通过修改html里面的文字大小来改变页面中元素的大小可以实现整体控制
    例如: 根元素html设置font-size: 12px;非根元素设置width:2rem;则换成px表示就是24px;

    html {
    	font-size: 14px;
    }
    div {
    	font-size: 12px;
    }
    p{
    	/*em相对于父元素div的字体大小来说,生成一个120x120的盒子*/
    	width: 10em;
    	height: 10em;
    	/*rem相对于html元素字体大小来说,生成140x140的盒子*/
    	width: 10rem;  10*14=140
    	height: 10rem;
    }
    

    11.2 媒体查询

    媒体查询(Media Query)是CSS3的语法

    • 使用@media查询,可以针对不同的媒体类型定义不同的样式
    • @media可以针对不同的屏幕尺寸设置不同的样式
    • 当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面
    • 目前针对很多苹果手机,android手机,平板等设备都用得到多媒体查询

    语法: media mediatype and|no|only (media feature){CSS-Code;}

    • 用@media开头 注意@符号
    • mediatype媒体类型
      • all 用于所有的设备
      • print 用于打印机和打印预览
      • scree 用于电脑屏幕,平板电脑,智能手机
    • 关键字 and not only
      • and可以将多个多媒体特性连接在一起,相当于且的意思
      • not: 排除某个媒体类型,相当于非得意思,可以省略
      • only: 指定某个特定的媒体查询类型,可以省略
    • media featrue 媒体特性 必须由小括号包含
      • width:定义输出设备中页面可见区域的宽度
      • min-width: 定义输出设备中页面最小可见区域宽度
      • max-width: 定义输出设备中页面最大可见区域宽度
    /*在屏幕上,最大的宽度为800px*/
    @media screen and (max-width: 800px){
    	body {
    		background-color: pink;
    	}
    }
    @media scree and (min-width: 320px) and (max-width: 500px) {
    	body {
    		background-color: purple;
    	}
    }
    
    例: 实现放大缩小
    * {
    	margin: 0;
    	padding: 0;
    }
    media screen and (min-width: 32px) {
    	html {
    		font-size: 50px;
    	}
    }
    media screen and (min-width:640px) {
    	html {
    		font-size: 100px;
    	}
    }
    .top {
    	height: 1rem;
    	font-size: .5rem;
    	background-color: green;
    	color: #fff;
    	text-align: center;
    	line-height: 1rem;
    }
    
    <div class = "top">购物车</div>
    

    10.3 媒体查询引入css

    语法: <link rel = “stylesheet” media = “mediatype and|not|only (media feature)” href = “mystyle.css”>

    11 less

    less(Leaner Style Sheets): 一门扩展语言,也是CSS的预处理器,作为CSS的一种形式的扩展,他并没有减少CSS的功能,而是在现有的CSS的语法上,为CSS加入了程序式语言特性,在CSS的语法基础上,引入了Mixin(混入),运算一级函数等功能,大大简化了CSS的编写,并且降低了CSS的维护成本
    常见的CSS预处理器: Sass, Less, Stylus

    11.1 less安装

    • 安装nodejs,可以选择版本(8.0)
    • 检查是否安装成功,使用cmd,node-v查看版本号
    • 基于nodejs在线安装Less,使用cmd,"npm install -g less
    • 检查是否安装成功,使用cmd命令, "lessc -v"查看版本就可以啦

    less使用: 新建less后缀的文件,在这个less文件里面书写less语句

    • less变量
    • less编译
    • less嵌套
    • less运算

    11.2 less变量

    @变量名: 值;

    变量名规范: 必须以@作为前缀, 不能包含特殊字符, 不能以数字开头, 大小写敏感

    //新建一个my.less文件
    @color: pink;   //定义一个粉色变量
    @font14: 14px; //定义字体为14号字体
    body {
    	background-color: @color;
    	font-size: @font14;
    }
    div {
    	background-color: @color;
    }
    

    11.3 less编译

    本质上,less包含一套自定义的语法及一个解析器, 用户根据这些语法定义自己的样式规则,这些规则最终会通过解析器,编译生成对应的CSS文件,所以less文件需要编译生成CSS文件,这样html才能使用

    Easey LESS插件用来把less文件编译成为CSS文件,只要保存就会自动生成CSS文件,然后引入生成的CSS文件

    11.4 嵌套

    伪类,伪元素,或者交集选择器需要在前面加&符号,然后写伪元素, 伪类和交集选择器

    
    /*less文件*/
    .header {
    	width: 200px;
    	height: 200px;
    	background-color: pink;
    	a {
    		color: red;
    		&:hover {
    			color: green;
    		}
    	}
    }
    
    /*less文件生成的CSS文件*/
    .header {
    	width: 200px;
    	height: 200px;
    	background-color: pink;
    }
    .header a {
    	color: red;
    }
    .header a:hover {
    	color: green;
    }
    <!--HTML结构-->
    <header>
    	<a herf = "#"></a>
    </header>
    

    11.5 less运算

    运算符有: + - * /

    • 运算符左右必须加空格
    • 运算的顺序和数学一样
    • 两个数参与运算, 如果一个有单位,则最后的结果的以这个单位为准
    • 如果两个都有单位,而且不一样,最后的结果以第一个单位为准
    // less文件
    @border: 5px + 5;
    div {
    	width: 200px - 50;
    	height: 200px * 2;
    	border: @border solid red;
    	background-color: #666 - #222;
    }
    header {
    	width: 82 / 50rem;
    	height: 82 / 50rem;
    }
    
    /*生成CSS文件*/
    div {
    	width: 150px;
    	height: 400px;
    	border: 10px solid red;
    	background-color: #444;
    }
    header {
    	width: 1.64rem;
    	height: 1.64rem;
    }
    

    11.6 rem适配方案

    • 让一些不能等比自适应元素,达到当设备尺寸发生改变的时候,等比例适配当前的元素
    • 使用媒体查询根据不同设备按比例设置html的字体大小,然后页面元素使用rem做单位的尺寸

    技术方案一: less, 媒体查询, rem

    • 动态设置htmlfont-size大小
      • 假设设计稿是750px
      • 于是我们就可以把设计稿划分为15等分(20等份,等分不一),每份html大小就是50px
      • 在320px设备的时候,字体大小就是320/15就是21.33
      • 页面元素大小除以不同的html字体大小会发现他们的比例还是不相同的
      • 比如750px的设计稿,在10010像素的页面元素750屏幕下,就是100/50转换为rem,就是2rem2rem比例是1:1
      • 320屏幕下,html字体大小为21.33,则2rem = 42.66px,此时宽和高都是42.66,但是宽和高比例还是1:1
      • 元素取值方法
        • 页面元素rem值 = 页面元素值(px) / (屏幕宽度 / 划分的份数)
        • 屏幕宽度 / 划分的份数 = html font-size的大小
        • 或者: 页面元素的rem值 = 页面元素值(px) / html font-size字体大小
          技术方案二: flexible.js, rem

    CSS规范

    1. CSS属性书写顺序

    • 遵循以下顺序
      • 布局定位(显示)属性: display, position, float, clear, visibility, overflow
      • 自身属性: width, height, margin, padding, border, background(透明背景CSS3除外)
      • 文本属性: color, font, text-decoration, text-align, vertical-align, white-space, break-word
      • 其他属性(CSS3): content, currsor, border-radius, box-shadow, text-shadow, background: linear-gradient …

    2. CSS布局流程

    ​ 为了提高网页制作的效率,布局时通常有以下的布局流程,具体如下:

    • 必须确定页面版心(可视区),我们测量可以得知
    • 分析页面中的行模块,以及每个行模块中的列模块.其实页面布局就是一行一行罗列出来的
    • 制作HTML结构,我们还是遵循,先有结构后有样式的原则,结构永远最重要
    • 然后开始运行盒子模型的原理,通过DIV+CSS布局来控制网页的各个模块

    3. CSS文件名

    主要的 master.css    模块 module.css   基本共用 base.css     布局、版面 layout.css   
    主题 themes.css     专栏 columns.css  文字 font.css        表单 forms.css  
    补丁 mend.css       打印 print.css       公共样式: common.css
    

    4. 常用的CSS命名

    头:header  
    内容:content/container  
    尾:footer  
    导航:nav  
    侧栏:sidebar  
    栏目:column  
    页面外围控制整体佈局宽度:wrapper  
    左右中:left right center  
    登录条:loginbar  
    标志:logo  
    广告:banner  
    页面主体:main  
    热点:hot  
    新闻:news  
    下载:download  
    子导航:subnav  
    菜单:menu  
    标签:tags  
    子菜单:submenu  
    搜索:search  
    友情链接:friendlink  
    页脚:footer  
    版权:copyright  
    滚动:scroll  
    内容:content  
    文章列表:list  
    提示信息:msg  
    小技巧:tips  
    栏目标题:title  
    加入:joinus  
    指南:guide  
    服务:service  
    注册:regsiter  
    状态:status  
    投票:vote  
    合作伙伴:partner
    
    关于: about  
    账户: account 
    箭头图标: arrow  
    文章: article  
    边栏: aside    
    音频: audio  
    头像: avatar  
    背景: bg,background  
    栏(工具类): bar    
    品牌化: branding  
    分类: category  
    面包屑: crumb,breadcrumbs     
    按钮:  btn,button   
    标题,说明: caption  
    图表: chart  
    清除浮动: clearfix  
    关闭: close  
    列: col,column     
    评论: comment  
    社区: community  
    容器: container  
    内容: content  
    版权: copyright    
    当前态,选中态: current  
    默认: default  
    描述: description  
    细节: details   
    不可用: disabled  
    文章,博文: entry  
    错误: error  
    偶数,常用于多行列表或表格中: even    
    失败(提示): fail  
    专题: feature  
    收起: fewer  
    用于表单的输入区域: field   
    图: figure    
    筛选: filter  
    第一个,常用于列表中: first  
    隐藏: hide  
    页脚: footer  
    论坛: forum     
    画廊: gallery  
    模块,清除浮动: group  
    页头: header  
    帮助:  help  
    高亮: hightlight    
    主页: home   
    图标: icon  
    信息: info,information  
    最后一个,常用语列表: last  
    链接: links  
    登录: login  
    退出:  logout  
    标志: logo  
    主题: main  
    菜单: menu             
    作者、更新时间等信息栏,一般位于标题之下: meta  
    模块: module  
    更多(展开): more    
    消息: msg,message  
    导航: nav,navigation  
    下一页: next  
    小块: nub                         
    奇数,常用于多行列表或表格中: odd  
    鼠标离开: off   
    鼠标移过: on  
    输出: output  
    分页: pagination  
    弹窗: pop,popup  
    预览: preview   
    上一页: previous  
    主要: primary  
    进度条: progress   
    促销: promotion  
    推荐: rcommd,recommendations      
    注册: reg,register 
    顶部导航: shortcut
    保存: save  
    搜索: search  
    次要: secondary  
    区块: section              
    已选: selected  
    分享: share  
    显示: show  
    边栏,侧栏: sidebar   
    排序: sort                  
    幻灯片,图片切换: slide   
    次级的,子级的: sub   
    提交: submit   
    订阅: subscribe                
    副标题: subtitle   
    成功(提示): success   
    摘要: summary   
    标签:  tab   
    表格: table         
    文本: txt,text   
    缩略图: thumbnail   
    时间: time   
    提:  tips   
    标题: title   
    视频: video  
    容器,包,一般用于最外层: wrap   
    容器,包,一般用于最外层: wrapper                          
    

    5. id命名

    1. 页面结构

    容器: container  
    页头:header  
    内容:content/container  
    页面主体:main  
    页尾:footer  
    导航:nav  
    侧栏:sidebar 
    栏目:column  
    页面外围控制整体佈局宽度:wrapper  
    左右中:left right center
    

    2. 导航

    导航:nav  
    主导航:mainnav  
    子导航:subnav  
    顶导航:topnav  
    边导航:sidebar  
    左导航:leftsidebar  
    右导航:rightsidebar  
    菜单:menu  
    子菜单:submenu  
    标题: title  
    摘要: summary
    

    3. 功能

    标志:logo  
    广告:banner  
    登陆:login  
    登录条:loginbar  
    注册:register  
    搜索:search  
    功能区:shop  
    标题:title  
    加入:joinus  
    状态:status  
    按钮:btn  
    滚动:scroll  
    标籤页:tab  
    文章列表:list  
    提示信息:msg  
    当前的: current  
    小技巧:tips  
    图标: icon  
    注释:note  
    指南:guild  
    服务:service  
    热点:hot  
    新闻:news  
    下载:download  
    投票:vote  
    合作伙伴:partner  
    友情链接:link  
    版权:copyright
       
    按钮:  btn,button   
    标题,说明: caption  
    图表: chart  
    清除浮动: clearfix  
    关闭: close  
    列: col,column     
    评论: comment  
    社区: community  
    容器: container  
    内容: content  
    版权: copyright    
    当前态,选中态: current  
    默认: default  
    描述: description  
    细节: details   
    不可用: disabled  
    文章,博文: entry  
    错误: error  
    偶数,常用于多行列表或表格中: even    
    失败(提示): fail  
    专题: feature  
    收起: fewer  
    用于表单的输入区域: field   
    图: figure    
    筛选: filter  
    第一个,常用于列表中: first  
    隐藏: hide  
    页脚: footer  
    论坛: forum     
    画廊: gallery  
    模块,清除浮动: group  
    页头: header  
    帮助:  help  
    高亮: hightlight    
    主页: home   
    图标: icon  
    信息: info,information  
    最后一个,常用语列表: last  
    链接: links  
    登录: login  
    退出:  logout  
    标志: logo  
    主题: main  
    菜单: menu             
    作者、更新时间等信息栏,一般位于标题之下: meta  
    模块: module  
    更多(展开): more    
    消息: msg,message  
    导航: nav,navigation  
    下一页: next  
    小块: nub                         
    奇数,常用于多行列表或表格中: odd  
    鼠标离开: off   
    鼠标移过: on  
    输出: output  
    分页: pagination  
    弹窗: pop,popup  
    预览: preview   
    上一页: previous  
    主要: primary  
    进度条: progress   
    促销: promotion  
    推荐: rcommd,recommendations      
    注册: reg,register 
    顶部导航: shortcut
    保存: save  
    搜索: search  
    次要: secondary  
    区块: section              
    已选: selected  
    分享: share  
    显示: show  
    边栏,侧栏: sidebar   
    排序: sort                  
    幻灯片,图片切换: slide   
    次级的,子级的: sub   
    提交: submit   
    订阅: subscribe                
    副标题: subtitle   
    成功(提示): success   
    摘要: summary   
    标签:  tab   
    表格: table         
    文本: txt,text   
    缩略图: thumbnail   
    时间: time   
    提:  tips   
    标题: title   
    视频: video  
    容器,包,一般用于最外层: wrap   
    容器,包,一般用于最外层: wrapper                          
    ```
    
    ### 5. id命名
    
    **1. 页面结构**
    
    ```tes
    容器: container  
    页头:header  
    内容:content/container  
    页面主体:main  
    页尾:footer  
    导航:nav  
    侧栏:sidebar 
    栏目:column  
    页面外围控制整体佈局宽度:wrapper  
    左右中:left right center
    ```
    
    **2. 导航**
    
    ```tes
    导航:nav  
    主导航:mainnav  
    子导航:subnav  
    顶导航:topnav  
    边导航:sidebar  
    左导航:leftsidebar  
    右导航:rightsidebar  
    菜单:menu  
    子菜单:submenu  
    标题: title  
    摘要: summary
    ```
    
    **3. 功能**
    
    ```tes
    标志:logo  
    广告:banner  
    登陆:login  
    登录条:loginbar  
    注册:register  
    搜索:search  
    功能区:shop  
    标题:title  
    加入:joinus  
    状态:status  
    按钮:btn  
    滚动:scroll  
    标籤页:tab  
    文章列表:list  
    提示信息:msg  
    当前的: current  
    小技巧:tips  
    图标: icon  
    注释:note  
    指南:guild  
    服务:service  
    热点:hot  
    新闻:news  
    下载:download  
    投票:vote  
    合作伙伴:partner  
    友情链接:link  
    版权:copyright
    ```
    
    展开全文
  • 5小时入门HTML5-基础篇

    千人学习 2017-05-10 16:05:25
    html5相对于html4或者xhtml1.0,进步是很明显的。以前很多靠html代码无法实现的效果现在都可以通过html5实现,如视频,音频,网页绘图,而且并不需要复杂的代码,所以说html5宛如一场革命。
  • HTML5+CSS3项目实战详解

    2020-05-16 06:58:08
    课程讲解循序渐进,难度由浅入深,老师带领学生通过实战练习,学会HTML5+CSS3开发。 课程中包含5个实战练习: 声音和图像 淘宝轮播图 个人简介 五子棋 百度页面
  • 教你玩转HTML(html5)h5网页设计,网站开
  • 不要把HTML语言和Java、C等编程语言混淆起来,HTML只是一种标记语言,简单地说,HTML文件就是普通文本+HTML标记(HTML标签),和不同的标记就能表示不同的效果。 1.HTML发展历史 HTML1.0 在1993年6月作为互联网...

    HTML的全称是(Hyper Text Markup Language )即超文本标记语言,它是互联网上应用最广泛的标记语言。不要把HTML语言和Java、C等编程语言混淆起来,HTML只是一种标记语言,简单地说,HTML文件就是普通文本+HTML标记(HTML标签),和不同的标记就能表示不同的效果。

    1.HTML发展历史

    HTML1.0 在1993年6月作为互联网工程工作小组(IETF)工作草案发布
    HTML 2.0 1995年11月作为RFC 1866发布,在RFC 2854于2000年6月发布之后被宣布已经过时
    HTML 3.2 1996年1月14日,W3C推荐标准
    HTML 4.0 1997年12月18日,W3C推荐标准
    HTML 4.1 1999年12月24日,W3C推荐标准
    XHTML 发布与2000年1月26日,是W3C组织推荐标准,后来经修订与2002年8月1日重新发布
    HTML5 第一份正式草案已于2008年1月22日公布,现仍继续完善。

    2.HTML4.01与XHTML

    XHTML的全称是(EXtensible HyperText Markup Language,扩展的超文本标记语言),XHTML和HTML4.01具有很好的兼容性,而且XHTML是更严格、更纯净的HTML代码。HTML有很多不规范的地方,而XHTML致力于消除这种不规范,XHTML要求HTML文档首先必须是一份XML文档。XML文档是一种结构化文档,它有如下4条基本原则:  

    1.  整个文档有且只有一个更元素
    2.  每个元素都由开始标签好结束标签组成(例如:<a></a>就是开始标签和结束标签),除非使用空元素语法(例如<br>就   是空元素语法)  
    3.  元素与元素之间应该合理嵌套,例如<div><span>hello word</span></div>,可以明确地看出<span>元素是<div>元素的子元素,这就是合理的嵌套;<div><span>hello word</div></span>,这种写法就比较
    4. 元素的属性必须有属性值,而且属性值应该在引号(单引号或双引号都可以)引起来。             

    3.HTML与XHTML的文档定义类型(DTD)

    从表面上看,HTML和XHTML显得杂乱无脏,但实际上W3C制定了严格的语义约束,使用了DTD(Document Type Definition,文档类型定义)来定义HTML和XHTML的语义约束。关于DTD的详细介绍可以看我的博客-->点击打开链接

    4.从XHTML到HTML5

    虽然W3C努力为HTML制定规范,但由于绝大部分编写HTML页面并没有受过专业训练,他们对HTML规范、XHTML规范也不怎么了解,所有他们制定的HTML网页绝大部分没有遵守HTML规范。HTML规范:

    1. 元素的标签名用了大小写混乱的情况。比如:<p>html</P>
    2. 元素没有合理结束的情况。比如只有<p>标签,没有</p>结束标签
    3. 元素中使用了属性,但没有指定属性的情况。比如:<Input type="text" disabled>
    4. 为元素的属性指定属性值时没有使用引号的情况。比如:<input type=text>,可能是出于存在合理的考虑,WHATWG组织开始制定一种妥协式的规范:HTML5。

    5.HTML优势

    5.1 解决了跨浏览器问题                                                                             

    对于有过实际开发经验的前端程序员来说,跨浏览器问题绝对是一个永恒的噩梦:明明在一个浏览器中科院正常运行的HTML+CSS+JAVASCRIPT页面,但换一个浏览器之后,就会出现很多问题,比如:JavaScript运行出错、页面布局混乱等,因此前端程序员会先判断对方浏览器,然后根据对方浏览器编写不同的页面代码。HTML5的出现可能改变了这种局面,目前主流浏览器如Edage(Internet Explorer)、Chorme、Firefox、Safari都表现出对HTML5的极大热情。

    5.2 部分代替了原来的JavaScript 

    HTML5增加了一些非常实用的功能,例如,打开一个页面立即让某个单行文本框获得输入焦点,在HTML5之前要通过JavaScript来实现。

    图书:<input type="text" name="book" id="name"/><br/>    
    价格:<input type="text" name="price" id="price"/>    
    <script type="text/javascript">  
    document.getElementById("price").focus();  
    </script>

    在HTML5中只需要设置一个属性即可

    图书:<input type=text name=book/><br/>
    
    价格:<input type=text autofocus name=price/>

    5.3 更明确的语义支持         

    在HTML5以前,如果要表达一个文档结构,可能只通过<div>元素来实现,HTML5则可以提供更明确的语义元素

    <header>.........</header>
    <nav>...............</nav>
    <article>
    <section></section>
    </article>
    <aside>...............</aside>
    <footer>..............</footer>  

    上面的页面片段就可以提供更清晰的语义了,而不是通过语义不清的<div>元素来完成布局。除此之外,以前的HTML会通过<em>元素来表示被强调的内容,但到底是哪一种强调,HTML却无法表达;HTML5则提供了更多支持语义的强调元素,例如:<time>2017-11-11</time> -----强调的是日期或时间、<mark>被标记的文本</mark>---强调被标记的文本。

    5.4 增强了WEB应用程序的功能

    一直以来,HTML页面的功能被死死地限制着:客户端从服务器下载HTML页面数据,浏览器负责呈现这些HTML页面数据。出于客户机安全性的考虑,以前的HTML在安全性方面确实做得足够安全。
    当做得足够安全后,就需要JavaScript等其他方式来增加HTML的功能。换句话说,HTML对WEB程序而言太单薄了,比如文件上传时想同时选择多文件都不行(前端开发者不得不通过Flash、JavaScript等各种技术来克服这个因素),为补充这种不足,HTML5规范增加了不少新的API,比如HTML5新增的本地存储API、文件访问功能,在未来的日子里,我相信使用HTML5开发WEB应用将会更加轻松。          

    6.HTML的基本结构和语法

    首先要明确一点,HTML5并不是对HTML4、XHTML的革命,也就是说原来的HTML4开发的HTML网页同样可用;如果开发者受过严格训练,喜欢XHTML那种严格、规范、语法,同样可以按XHTML的严格要求来开发HTML5。(个人建议使用严格的语法格式)    Html5完全遵守以下3点原则:

    1. 兼容性:HTML5在老版本的浏览器也可以运行    
    2. 实用性:HTML5内部并没有特别复杂的功能,它只是封装了简单功能
    3. 非革命性:HTML5并不是革命式的发展,是一种妥协式的规范 

    6.1 HTML5的基本结构 
    HTML5,只要把XHTML中的DTD声明改为<!DOCTYPE html>;HTML5支持两种方式来指定页面的字符集
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   
    <meta charset=utf-8" />   
    6.2HTML5的语法变化
    6.2.1 标签不再区分大小写
    6.2.2 元素可以省略结束标签,例如:

    <p>
    <ol>
    <li>aaaa
    <li>bbbb
    <li>ccccc
    <img src="a.gif" alt="a"/>
    </ol>
    

    6.2.3 支持Boolean值的属性
    <input checked type="checkbox"/> 相当于之前的<input checked="checked" type="checkbox"/>
    6.2.4允许属性值不使用引号

    <option value=java>Java</option>                                                   

    重点:HTML5语法的改变

    1.标签不再区分大小写    2.元素可以省略结束标签    3.支持Boolean值的属性    4.允许属性值不使用引号

     

    --------------如果大家喜欢我的博客,可以点击左上角的关注哦。

    展开全文
  • 第1章 HTML 1 认识WEB 1.1 网页 网页是如何形成的? “代码” --浏览器的解析–>真正的页面 网页主要由文字、图像和超链接等元素构成。当然,除了这些元素,网页中还可以包含音频、视频以及Flash等。 我们的任务...

    第1章 HTML

    1 认识WEB

    1.1 网页

    网页是如何形成的?

    “代码” --浏览器的解析–>真正的页面

    网页主要由文字、图像和超链接等元素构成。当然,除了这些元素,网页中还可以包含音频、视频以及Flash等。

    我们的任务就是要把这部分网页元素用代码写出来

    1.2 浏览器

    平时我们浏览网页,是在浏览器地址栏中输入网页地址,就可以访问我们的页面了。

    在这里插入图片描述

    浏览器是网页显示、运行的平台,常用的浏览器有IE、火狐(Firefox)、谷歌(Chrome)、Safari和Opera等。我们平时称为五大浏览器。
    

    在这里插入图片描述

    可能你最熟悉的是 IE浏览器,但是。。。

    在这里插入图片描述

    1.2.1 查看浏览器占有的市场份额

    查看网站: https://tongji.baidu.com/research/site

    在这里插入图片描述

    2008年,大名鼎鼎的互联网巨头Google公司发布了它的首款浏览器Chrome浏览器。

    1.2.2 常见浏览器内核

    首先解释一下浏览器内核是什么东西。英文叫做:Rendering Engine,中文翻译很多,排版引擎、解释引擎、渲染引擎,现在流行称为浏览器内核.

    浏览器 内核 备注
    IE Trident IE、猎豹安全、360极速浏览器、百度浏览器
    firefox Gecko 可惜这几年已经没落了,打开速度慢、升级频繁、猪一样的队友flash、神一样的对手chrome。
    Safari webkit 现在很多人错误地把 webkit 叫做 chrome内核(即使 chrome内核已经是 blink 了)。苹果感觉像被别人抢了媳妇,都哭晕再厕所里面了。
    chrome Chromium/Blink 在 Chromium 项目中研发 Blink 渲染引擎(即浏览器核心),内置于 Chrome 浏览器之中。Blink 其实是 WebKit 的分支。大部分国产浏览器最新版都采用Blink内核。二次开发
    Opera Presto Presto(已经废弃) 是挪威产浏览器 opera 的 “前任” 内核,为何说是 “前任”,因为最新的 opera 浏览器早已将之抛弃从而投入到了谷歌怀抱了。 现在用blink内核。

    拓展阅读:

    移动端的浏览器内核主要说的是系统内置浏览器的内核。
    
    Android手机而言,使用率最高的就是Webkit内核,大部分国产浏览器宣称的自己的内核,基本上也是属于webkit二次开发。
    
    iOS以及WP7平台上,由于系统原因,系统大部分自带浏览器内核,一般是Safari或者IE内核Trident的
    

    1.3 Web标准(规范/协议)

    Web标准不是某一个标准,而是由W3C组织和其他标准化组织制定的一系列标准的集合。

    W3C 万维网联盟是国际最著名的标准化组织。1994年成立后,至今已发布近百项相关万维网的标准,对万维网发展做出了杰出的贡献。

    w3c就类似于现实世界中的联合国。

    1.3.1 为什么要遵循WEB标准呢?

    通过以上浏览器的内核不同,我们知道他们渲染或者排版的模式就有些许差异,显示就会有差别。

    问:  哪个方言再全国基本都可以听得懂? 
    

    在这里插入图片描述

    1.3.2 Web 标准的好处

    1、让Web的发展前景更广阔
    2、内容能被更广泛的设备访问
    3、更容易被搜寻引擎搜索
    4、降低网站流量费用
    5、使网站更易于维护
    6、提高页面浏览速度

    专业的人做专业的事。

    1.3.3 Web 标准构成

    构成: 主要包括结构(Structure)、表现(Presentation)和行为(Behavior)三个方面。

    标准 说明 备注
    结构 结构用于对网页元素进行整理和分类,咱们主要学的是HTML。 [外链D图片转存失败(img-6uwIj2cF-3143)(file://D:/小管同学/Web %E5%89%8D%E7%AB%AF/%E9%BB%91%E9%A9%AC2019%E5%89%8D%E7%AB%AF/%E3%80%9027%E3%80%91%E6%BA%90%E7%A0%81+%E8%AF%BE%E4%BB%B6+%E8%BD%AF%E4%BB%B6/01-03%20%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E5%9F%BA%E7%A1%80/01-HTML%E8%B5%84%E6%96%99/01.HTML-Day01/%E7%AC%94%E8%AE%B0/media/htmll.jpg?lastModify=1576452774)]
    表现 表现用于设置网页元素的版式、颜色、大小等外观样式,主要指的是CSS [外链图片转存失败(img-7SXYcQsG-3163)(file://D:/小管同学/Web %E5%89%8D%E7%AB%AF/%E9%BB%91%E9%A9%AC2019%E5%89%8D%E7%AB%AF/%E3%80%9027%E3%80%91%E6%BA%90%E7%A0%81+%E8%AF%BE%E4%BB%B6+%E8%BD%AF%E4%BB%B6/01-03%20%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E5%9F%BA%E7%A1%80/01-HTML%E8%B5%84%E6%96%99/01.HTML-Day01/%E7%AC%94%E8%AE%B0/media/css.jpg?lastModify=1576452774)]
    行为 行为是指网页模型的定义及交互的编写,咱们主要学的是 Javascript [外链图片转存失败(img-FvFRTsTA-3178)(file://D:/小管同学/Web %E5%89%8D%E7%AB%AF/%E9%BB%91%E9%A9%AC2019%E5%89%8D%E7%AB%AF/%E3%80%9027%E3%80%91%E6%BA%90%E7%A0%81+%E8%AF%BE%E4%BB%B6+%E8%BD%AF%E4%BB%B6/01-03%20%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E5%9F%BA%E7%A1%80/01-HTML%E8%B5%84%E6%96%99/01.HTML-Day01/%E7%AC%94%E8%AE%B0/media/search.gif?lastModify=1576452774)]
    • 结构标准:结构用于对网页元素进行整理和分类,咱们主要学的是HTML。 对于网页来说最重要的一部分

    • 表现标准:表现用于设置网页元素的版式、颜色、大小等外观样式,主要指的是CSS

    • 行为标准:行为是指网页模型的定义及交互的编写,咱们主要学的是 Javascript

    理想状态我们的源码: .html .css .js

    2 认识HTML

    • HTML 指的是超文本标记语言 (Hyper Text Markup Language)是用来描述网页的一种语言。
    • HTML 不是一种编程语言,而是一种标记语言 (markup language)
    • 标记语言是一套标记标签 (markup tag)

    所谓超文本,有2层含义:

    1. 因为它可以加入图片、声音、动画、多媒体等内容(超越文本限制
    2. 不仅如此,它还可以从一个文件跳转到另一个文件,与世界各地主机的文件连接(超级链接文本)。
    <h1> 我是一个大标题 </h1>
    

    非专业人士看到的效果页面

    在这里插入图片描述

    专业人士看到的html页面

    在这里插入图片描述

    2.1 HTML骨架格式

    HTML 有自己的语言语法骨架格式:(要遵循,要专业) 要求务必非常流畅的默写下来。。

    <html>   
        <head>     
            <title></title>
        </head>
        <body>
        </body>
    </html>
    

    html骨架标签

    标签名 定义 说明
    <html></html> HTML标签 页面中最大的标签,我们成为 根标签
    <head></head> 文档的头部 注意在head标签中我们必须要设置的标签是title
    <title></title> 文档的标题 让页面拥有一个属于自己的网页标题
    <body></body> 文档的主体 元素包含文档的所有内容,页面内容 基本都是放到body里面的
    <title></title> 文档的标题 让页面拥有一个属于自己的网页标题

    **课堂练习1: **

    书写我们的第一个HTML 页面。

    1. 新建一个demo 的 TXT 文件。

    2. 里面写入刚才的HTML 骨架。

    3. 把后缀名改为 .html。

    4. 右击–谷歌浏览器打开。

      <html>   
          <head>     
              <title>我的第一个页面</title>
          </head>
          <body>
                刻苦学习  一飞冲天 
          </body>
      </html>
      

    HTML标签名、类名、标签属性和大部分属性值统一用小写

    推荐:

    <head>     
            <title>我的第一个页面</title>
     </head>
    

    不推荐:

    <HEAD>     
            <TITLE>我的第一个页面</TITLE>
    </HEAD>
    

    2.2 HTML元素标签分类

    标签:

    在HTML页面中,带有“< >”符号的元素被称为HTML标签,如上面提到的 <html>、<head>、<body>都是HTML骨架结构标签。

    分类:

    1. 常规元素(双标签
    <标签名> 内容 </标签名>   比如 <body>  我是文字  </body>
    
    • 该语法中“<标签名>”表示该标签的作用开始,一般称为“开始标签(start tag)”,“</标签名>” 表示该标签的作用结束,一般称为“结束标签(end tag)”。
    • 和开始标签相比,结束标签只是在前面加了一个关闭符“/”。
    • 我们以后接触的基本都是双标签
    1. 空元素(单标签
    <标签名 />  比如  <br />
    
    • 空元素 用单标签来表示, 简单点说,就是里面不需要包含内容, 只有一个开始标签不需要关闭。
    • 这种单身狗标签非常少,一共没多少,我们多记忆就好

    2.3 HTML标签关系

    主要针对于双标签 的相互关系分为两种: 请大家务必熟悉记住这种标签关系,因为后面我们标签嵌套特别多,很容易弄混他们的关系。

    1. 嵌套关系
    <head>  
    	<title> </title> 
    </head>
    

    2.并列关系

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

    倡议:

    如果两个标签之间的关系是嵌套关系,子元素最好缩进一个tab键的身位(一个tab是4个空格)。如果是并列关系,最好上下对齐。
    

    2.4 文档类型

    用法:

    <!DOCTYPE html> 
    

    作用:

    <!DOCTYPE> 声明位于文档中的最前面(第一行)的位置,处于 <html> 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。
    

    **注意: **

    一些老网站可能用的还是老版本的文档类型比如 XHTML之类的,但是我们学的是HTML5,而且HTML5的文档类型兼容很好(向下兼容的原则),所以大家放心的使用HTML5的文档类型就好了。

    团队约定:

    HTML文件必须加上 DOCTYPE 声明,并统一使用 HTML5 的文档声明
    

    2.4 页面语言

    <html lang="en">  指定html 语言种类
    

    最常见的2个:

    1. en定义语言为英语
    2. zh-CN定义语言为中文
    考虑浏览器和操作系统的兼容性,目前仍然使用 zh-CN 属性值
    

    2.5 字符集

    <meta charset="UTF-8" />
    
    字符集(Character set)是多个字符的集合。
    
    计算机要准确的处理各种字符集文字,需要进行字符编码,以便计算机能够识别和存储各种文字。
    

    utf-8是目前最常用的字符集编码方式,常用的字符集编码方式还有gbk和gb2312。

    • gb2312 简单中文 包括6763个汉字
    • BIG5 繁体中文 港澳台等用
    • GBK包含全部中文字符 是GB2312的扩展,加入对繁体字的支持,兼容GB2312
    • UTF-8则基本包含全世界所有国家需要用到的字符
    • 这句代码非常关键, 是必须要写的代码,否则可能引起乱码的情况。
    一般情况下统一使用 "UTF-8" 编码, 请尽量统一写成标准的 "UTF-8",不要写成 "utf-8" 或 "utf8" 或 "UTF8"。
    

    3 HTML常用标签

    首先 HTML和CSS是两种完全不同的语言,我们学的是结构,就只写HTML标签,认识标签就可以了。 不会再给结构标签指定样式了。

    HTML标签有很多,这里我们学习最为常用的,后面有些较少用的,我们可以查下手册就可以了。

    3.1 排版标签

    排版标签主要和css搭配使用,显示网页结构的标签,是网页布局最常用的标签。

    1 标题标签h

    单词缩写: head 头部. 标题 title 文档标题

    为了使网页更具有语义化,我们经常会在页面中用到标题标签,HTML提供了6个等级的标题,即

    标题标签语义: 作为标题使用,并且依据重要性递减

    其基本语法格式如下:

    <h1>   标题文本   </h1>
    <h2>   标题文本   </h2>
    <h3>   标题文本   </h3>
    <h4>   标题文本   </h4>
    <h5>   标题文本   </h5>
    <h6>   标题文本   </h6>
    

    显示效果如下:

    在这里插入图片描述

    小结 :

    • 加了标题的文字会变的加粗,字号也会依次变大
    • 一行是只能放一个标题的
    			登高
    风急天高猿啸哀,渚清沙白鸟飞回。
    无边落木萧萧下,不尽长江滚滚来。
    万里悲秋常作客,百年多病独登台。
    艰难苦恨繁霜鬓,潦倒新停浊酒杯。
              			------杜甫
    

    2 段落标签p

    单词缩写: paragraph 段落 [ˈpærəgræf] 无须记这个单词

    作用语义:

    可以把 HTML 文档分割为若干段落

    在网页中要把文字有条理地显示出来,离不开段落标签,就如同我们平常写文章一样,整个网页也可以分为若干个段落,而段落的标签就是

    <p>  文本内容  </p>
    

    是HTML文档中最常见的标签,默认情况下,文本在一个段落中会根据浏览器窗口的大小自动换行。

    3 水平线标签hr

    单词缩写: horizontal 横线 [ˌhɔrəˈzɑntl] 同上

    在网页中常常看到一些水平线将段落与段落之间隔开,使得文档结构清晰,层次分明。这些水平线可以通过插入图片实现,也可以简单地通过标签来完成,


    就是创建横跨网页水平线的标签。其基本语法格式如下:

    <hr />是单标签
    

    在网页中显示默认样式的水平线。

    课堂练习:新闻页面

    在这里插入图片描述

    4 换行标签br

    单词缩写: break 打断 ,换行

    在HTML中,一个段落中的文字会从左到右依次排列,直到浏览器窗口的右端,然后自动换行。如果希望某段文本强制换行显示,就需要使用换行标签

    <br />
    

    这时如果还像在word中直接敲回车键换行就不起作用了。

    5 div 和 span标签

    div span 是没有语义的 是我们网页布局主要的2个盒子 想必你听过 css+div

    div 就是 division 的缩写 分割, 分区的意思 其实有很多div 来组合网页。

    span 跨度,跨距;范围

    语法格式:

    <div> 这是头部 </div>    <span>今日价格</span>
    

    他们两个都是盒子,用来装我们网页元素的, 只不过他们有区别,现在我们记住

    • div标签 用来布局的,但是现在一行只能放一个div

    • span标签 用来布局的,一行上可以放好多个span

    后面后面讲显示模式的时候,会告诉大家

    排版标签总结

    标签名 定义 说明
    <h></h> 标题标签 作为标题使用,并且依据重要性递减
    <p></p> 段落标签 可以把 HTML 文档分割为若干段落
    <hr /> 水平线标签 没啥可说的,就是一条线
    <br /> 换行标签
    <div></div> div标签 用来布局的,但是现在一行只能放一个div
    <span></span> span标签 用来布局的,一行上可以放好多个span

    3.2 文本格式化标签

    在网页中,有时需要为文字设置粗体、斜体或下划线效果,这时就需要用到HTML中的文本格式化标签,使文字以特殊的方式显示。

    在这里插入图片描述

    区别:

    <b>只是加粗

    <strong>除了可以加粗还有 强调的意思, 语义更强烈。

    剩下的同理…

    请同学们重点记住 前两组 加粗 和 倾斜 后面两组没记住回来查

    3.3 标签属性

    在这里插入图片描述

    所谓属性就是外在特性 比如 手机的颜色 手机的尺寸 ,总结就是手机的。。

    • 手机的颜色是黑色
    • 手机的尺寸是 8寸
    • 水平线的长度是 200
    • 图片的宽度 是 300

    使用HTML制作网页时,如果想让HTML标签提供更多的信息,可以使用HTML标签的属性加以设置。其基本语法格式如下:

    <标签名 属性1="属性值1" 属性2="属性值2" > 内容 </标签名>
    <手机 颜色="红色" 大小="5寸">  </手机>
    

    提倡: 尽量不使用 样式属性。

    3.4 图像标签img

    单词缩写: image 图像

    要想在网页中显示图像就需要使用图像标签,接下来将详细介绍图像标签以及和他相关的属性。

    语法如下:

    <img src="图像URL" />
    

    该语法中src属性用于指定图像文件的路径和文件名,他是img标签的必需属性。

    在这里插入图片描述

    border 后面我们会用css来做,这里就记住这个border 单词就好了

    注意:

    1. 标签可以拥有多个属性,必须写在开始标签中,位于标签名后面。
    2. 属性之间不分先后顺序,标签名与属性、属性与属性之间均以空格分开。
    3. 任何标签的属性都有默认值,省略该属性则取默认值。
    4. 采取 键值对 的格式 key=“value” 的格式

    比如:

    	正常的<br />
        <img src="cz.jpg" width="300" height="300" /><br />
         带有边框的<br />
        <img src="cz.jpg" width="300" height="300" border="3" /><br />
    	有提示文本的<br />
    	<img src="cz.jpg" width="300" height="300" border="3" title="这是个小蒲公英" /><br />
    	有替换文本的<br />
    	<img src="cz.jpg" width="300" height="300" border="3" alt="图片不存在" />
    

    此处有练习题

    重点掌握点:

    • 请说出 图像标签那个属性是必须要写的? src
    • 请说出 图像标签中 alt 和 title 属性区别? alt在不显示的时候说明 title在显示的时候说明

    3.5 链接标签

    单词缩写:anchor 的缩写 [ˈæŋkə®] 。基本解释 锚, 铁锚 的

    在HTML中创建超链接非常简单,只需用标签把文字包括起来就好。

    语法格式:

    <a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
    
    属性 作用
    href 用于指定链接目标的url地址,(必须属性)当为标签应用href属性时,它就具有了超链接的功能
    target 用于指定链接页面的打开方式,其取值有_self和_blank两种,其中_self为默认值,_blank为在新窗口中打开方式。

    注意:

    1. 外部链接 需要添加 http:// www.baidu.com
    2. 内部链接 直接链接内部页面名称即可 比如 < a href=“index.html”> 首页
    3. 如果当时没有确定链接目标时,通常将链接标签的href属性值定义为“#”(即href="#"),表示该链接暂时为一个空链接。
    4. 不仅可以创建文本超链接,在网页中各种网页元素,如图像、表格、音频、视频等都可以添加超链接。

    重点掌握点:

    • 请说出 链接标签那个属性是必须要写的? href
    • 请说出 如何新窗口打开这个一个链接网页的? target=“_blank”

    锚点定位

    通过创建锚点链接,用户能够快速定位到目标内容。

    创建锚点链接分为两步:

    1. 使用相应的id名标注跳转目标的位置。 (找目标)
      <h3 id="two">第2集</h3> 
    
    2. 使用<a href="#id名">链接文本</a>创建链接文本(被点击的) (拉关系)  我也有一个姓毕的姥爷..
      <a href="#two">   
    

    在这里插入图片描述

    base 标签

    语法:

    <base target="_blank" />
    

    在这里插入图片描述

    1. base 可以设置整体链接的打开状态
    2. base 写到 之间
    3. 把所有的连接 都默认添加 target="_blank"

    3.6 注释标签

    在HTML中还有一种特殊的标签——注释标签。如果需要在HTML文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字,就需要使用注释标签。

    简单解释:

    注释内容不会显示在浏览器窗口中,但是作为HTML文档内容的一部分,也会被下载到用户的计算机上,查看源代码时就可以看到。

    语法格式:

        <!-- 注释语句 -->     快捷键是:    ctrl + /       或者 ctrl +shift + / 
    

    注释重要性:

    在这里插入图片描述

    注释是给人看的,目的是为了更好的解释这部分代码是干啥的, 程序是不执行这个代码的

    一般用于简单的描述,如某些状态描述、属性描述等

    注释内容前后各一个空格字符,注释位于要注释代码的上面,单独占一行

    推荐:

    <!-- Comment Text -->
    <div>...</div>
    

    不推荐:

    <div>...</div><!-- Comment Text -->	
    	
    <div><!-- Comment Text -->
        ...
    </div>
    

    3.7 特殊字符

    一些特殊的符号,我们再html 里面很难或者 不方便直接 使用, 我们此时可以使用下面的替代代码。

    在这里插入图片描述

    特殊字符表:https://www.jb51.net/onlineread/htmlchar.htm

    虽然有很多,但是我们平时用的比较较少, 大家重点记住 空格 大于号 小于号 就可以了,剩下的回来查阅。

    总结:

    1. 是以运算符&开头,以分号运算符;结尾。 (空格: &nbsp;)
    2. 他们不是标签,而是符号。
    3. HTML 中不能使用小于号 “<” 和大于号 “>”特殊字符,浏览器会将它们作为标签解析,若要正确显示,在 HTML 源代码中使用字符实体 ()

    4 路径

    在这里插入图片描述

    实际工作中,我们的文件不能随便乱放,否则用起来很难快速的找到他们,因此我们需要一个文件夹来管理他们。

    目录文件夹:

    就是普通文件夹,里面只不过存放了我们做页面所需要的 相关素材,比如 html文件, 图片 等等。

    在这里插入图片描述

    根目录

    打开目录文件夹的第一层 就是 根目录

    页面中的图片会非常多, 通常我们再新建一个文件夹专门用于存放图像文件(images),这时再插入图像,就需要采用“路径”的方式来指定图像文件的位置。路径可以分为: 相对路径和绝对路径

    4.1 相对路径

    以引用文件之网页所在位置为参考基础,而建立出的目录路径。因此,当保存于不同目录的网页引用同一个文件时,所使用的路径将不相同,故称之为相对路径。

    路径分类 符号 说明
    同一级路径 只需输入图像文件的名称即可,如<img src=“baidu.gif” />。
    下一级路径 “/” 图像文件位于HTML文件同级文件夹下(例如文件夹名称为:images) 如<img src=“images/baidu.gif” />。
    上一级路径 “…/” 在文件名之前加入“…/” ,如果是上两级,则需要使用 “…/ …/”,以此类推, 如<img src="…/baidu.gif" />。

    相对路径,是从代码所在的这个文件出发, 去寻找我们的目标文件的,而 我们所说的 上一级 下一级 同一级 简单说,就是 图片 位于 HTML 页面的位置

    4.2 绝对路径

    绝对路径以Web站点根目录为参考基础的目录路径。之所以称为绝对,意指当所有网页引用同一个文件时,所使用的路径都是一样的。

    “D:\web\img\logo.gif”,或完整的网络地址,例如“http://www.baidu.com/images/logo.gif”。

    注意:

    绝对路径用的较少,我们理解下就可以了。 但是要注意,它的写法 特别是符号 \ 并不是 相对路径的 /

    5 表格

    5.1 创建表格

    在HTML网页中,要想创建表格,就需要使用表格相关的标签。

    创建表格的基本语法:

    <table>
      <tr>
        <td>单元格内的文字</td>
        ...
      </tr>
      ...
    </table>
    

    要深刻体会表格、行、单元格他们的构成。

    在上面的语法中包含基本的三对HTML标签,分别为 table、tr、td,他们是创建表格的基本标签,缺一不可,下面对他们进行具体地解释

    1. table用于定义一个表格标签。

    2. tr标签 用于定义表格中的行,必须嵌套在 table标签中。

    3. td 用于定义表格中的单元格,必须嵌套在<tr></tr>标签中。

    4. 字母 td 指表格数据(table data),即数据单元格的内容,现在我们明白,表格最合适的地方就是用来存储数据的。

    总结:

    • 表格的主要目的是用来显示特殊数据的
    • 一个完整的表格有表格标签(table),行标签(tr),单元格标签(td)组成,没有列的标签
    • 中只能嵌套 类的单元格
    • 标签,他就像一个容器,可以容纳所有的元素

    5.2 表格属性

    表格有部分属性我们不常用,这里重点记住 cellspacing 、 cellpadding。

    我们经常有个说法,是三参为0, 平时开发的我们这三个参数 border cellpadding cellspacing 为 0

    案例1:

    <table width="500" height="300" border="1" cellpadding="20" cellspacing="0" align="center">
       <tr>  <th>姓名</th>   <th>性别</th> <th>年龄</th>  </tr>
       <tr>  <td>刘德华</td> <td></td> <td>55</td>  </tr>
       <tr>  <td>郭富城</td> <td></td> <td>52</td>  </tr>
       <tr>  <td>张学友</td> <td></td> <td>58</td>  </tr>
       <tr>  <td>黎明</td>   <td></td> <td>18</td>  </tr>
       <tr>  <td>刘晓庆</td> <td></td> <td>63</td>  </tr>
    </table>
    

    5.3 表头单元格标签th

    • 作用:
      • 一般表头单元格位于表格的第一行或第一列,并且文本加粗居中
    • 语法:
      • 只需用表头标签<th></th>替代相应的单元格标签<td></td>即可。

    案例2:

    ​ 效果图

    ​ 代码:


    <table width="500" border="1" align="center" cellspacing="0" cellpadding="0">
    		<tr>  
    			<th>姓名</th> 
    			<th>性别</th>
    			<th>电话</th>
    		</tr>
    		<tr>
    			<td>小王</td>
    			<td></td>
    			<td>110</td>
    		</tr>
    		<tr>
    			<td>小明</td>
    			<td></td>
    			<td>120</td>
    		</tr>	
    	</table>
    

    th 也是一个单元格 只不过和普通的 td单元格不一样,它会让自己里面的文字居中且加粗

    5.4 表格标题caption

    定义和用法

    <table>
       <caption>我是表格标题</caption>
    </table>
    

    **注意: **

    1. caption 元素定义表格标题,通常这个标题会被居中且显示于表格之上。
    2. caption 标签必须紧随 table 标签之后。
    3. 这个标签只存在 表格里面才有意义。你是风儿我是沙

    案例3:

    根据要求完成以下案例:

    5.5 合并单元格

    合并单元格是我们比较常用的一个操作,但是不会合并的很复杂。

    1 合并单元格2种方式

    • 跨行合并:rowspan=“合并单元格的个数”
    • 跨列合并:colspan=“合并单元格的个数”

    2 合并单元格顺序

    **合并的顺序我们按照 先上 后下 先左 后右 的顺序 **

    跟我们以前学习汉字的书写顺序完全一致。

    3 合并单元格三步曲

    1. 先确定是跨行还是跨列合并
    2. 根据 先上 后下 先左 后右的原则找到目标单元格 然后写上 合并方式 还有 要合并的单元格数量 比如 :
    3. 删除多余的单元格 单元格

    5.6 总结表格

    标签名 定义 说明
    <table></table> 表格标签 就是一个四方的盒子
    <tr></tr> 表格行标签 行标签要再table标签内部才有意义
    <td></td> 单元格标签 单元格标签是个容器级元素,可以放任何东西
    <th></th> 表头单元格标签 它还是一个单元格,但是里面的文字会居中且加粗
    <caption></caption> 表格标题标签 表格的标题,跟着表格一起走,和表格居中对齐
    clospan 和 rowspan 合并属性 用来合并单元格的
    1. 表格提供了HTML 中定义表格式数据的方法。
    2. 表格中由行中的单元格组成。
    3. 表格中没有列元素,列的个数取决于行的单元格个数。
    4. 表格不要纠结于外观,那是CSS 的作用。
    5. 表格的学习要求: 能手写表格结构,并且能简单合并单元格。

    7. 表格划分结构

    对于比较复杂的表格,表格的结构也就相对的复杂了,所以又将表格分割成三个部分:题头、正文和脚注。而这三部分分别用:thead,tbody,tfoot来标注, 这样更好的分清表格结构
    

    注意:

    1. :用于定义表格的头部。用来放标题之类的东西。 内部必须拥有 标签!
    2. :用于定义表格的主体。放数据本体 。
    3. 放表格的脚注之类。
    4. 以上标签都是放到table标签中。

    6 列表

    类似Java中的集合

    前面我们知道表格一般用于数据展示的,但是网页中还是有很多跟表格类似的布局,如下图~~ 我们用什么做呢?

    答:是列表, 那什么是列表? 表格是用来显示数据的,那么列表就是用来布局的。 因为非常整齐和自由

    • 概念:

      容器里面装载着结构,样式一致的文字或图表的一种形式,叫列表

    • 特点:

      列表最大的特点就是 整齐 、整洁、 有序,跟表格类似,但是他可组合自由度会更高。

    6.1 无序列表 ul

    无序列表的各个列表项之间没有顺序级别之分,是并列的。其基本语法格式如下:

    <ul>
      <li>列表项1</li>
      <li>列表项2</li>
      <li>列表项3</li>
      ......
    </ul>
    

    比如下面这些,新闻是没有顺序的,不用排队,先到先得,后发布先显示。

     1. <ul></ul>中只能嵌套<li></li>,直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的。
     2. <li>与</li>之间相当于一个容器,可以容纳所有元素。
     3. 无序列表会带有自己样式属性,放下那个样式,一会让CSS来!
    

    6.2 有序列表 ol

    有序列表即为有排列顺序的列表,其各个列表项按照一定的顺序排列定义,有序列表的基本语法格式如下:

    <ol>
      <li>列表项1</li>
      <li>列表项2</li>
      <li>列表项3</li>
      ......
    </ol>
    

    所有特性基本与ul 一致。 但是实际中比 无序列表 用的少很多。

    6.3 自定义列表

    定义列表常用于对术语或名词进行解释和描述,定义列表的列表项前没有任何项目符号。其基本语法如下:

    <dl>
      <dt>名词1</dt>
      <dd>名词1解释1</dd>
      <dd>名词1解释2</dd>
      ...
      <dt>名词2</dt>
      <dd>名词2解释1</dd>
      <dd>名词2解释2</dd>
      ...
    </dl>
    

    用的还可以:

    在这里插入图片描述

    6.4 列表总结

    标签名 定义 说明
    <ul></ul> 无序标签 里面只能包含li 没有顺序,我们以后布局中最常用的列表
    <ol></ol> 有序标签 里面只能包含li 有顺序, 使用情况较少
    <dl></dl> 自定义列表 里面有2个兄弟, dt 和 dd

    我们现在还没有学布局,现在只要保证2个点:

    1. 学会什么时候用无序列表, 学会什么时候用自定义列表
    2. 无序列表和自定义列表代码怎么写?
    3. 具体的我们刚才看的布局,等我们学了css 在来全面布局。

    7 表单

    现实中的表单,类似我们去银行办理信用卡填写的单子。 如下图

    **作用: **

    表单目的是为了收集用户信息。

    在我们网页中, 我们也需要跟用户进行交互,收集用户资料,此时也需要表单。

    在HTML中,一个完整的表单通常由表单控件(也称为表单元素)、提示信息和表单域3个部分构成。

    表单控件:

    ​ 包含了具体的表单功能项,如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。

    提示信息:

    ​ 一个表单中通常还需要包含一些说明性的文字,提示用户进行填写和操作。

    表单域:

    ​ 他相当于一个容器,用来容纳所有的表单控件和提示信息,可以通过他定义处理表单数据所用程序的url地址,以及数据提交到服务器的方法。如果不定义表单域,表单中的数据就无法传送到后台服务器。

    7.1 input 控件

    • 语法:

      <input type="属性值" value="你好">
      
      • input 输入的意思
      • <input />标签为单标签
      • type属性设置不同的属性值用来指定不同的控件类型
      • 除了type属性还有别的属性
    • 常用属性:

    1 type 属性

    • 这个属性通过改变值,可以决定了你属于那种input表单。
    • 比如 type = ‘text’ 就表示 文本框 可以做 用户名, 昵称等。
    • 比如 type = ‘password’ 就是表示密码框 用户输入的内容 是不可见的。
    用户名: <input type="text" /> 
    密  码:<input type="password" />
    

    2 value属性值

    用户名:<input type="text"  name="username" value="请输入用户名"> 
    
    • value 默认的文本值。 有些表单想刚打开页面就默认显示几个文字,就可以通过这个value 来设置。

    3 name属性

    用户名:<input type="text"  name=“username” />  
    

    name表单的名字, 这样,后台可以通过这个name属性找到这个表单。 页面中的表单很多,name主要作用就是用于区别不同的表单。

    • name属性后面的值,是我们自己定义的。

    • radio 如果是一组,我们必须给他们命名相同的名字 name 这样就可以多个选其中的一个啦

    <input type="radio" name="sex"  /><input type="radio" name="sex" />
    • name属性,我们现在用的较少, 但是,当我们学ajax 和后台的时候,是必须的。

    4 checked属性

    • 表示默认选中状态。 较常见于 单选按钮和复选按钮。
    性    别:
    <input type="radio" name="sex" value="" checked="checked" /><input type="radio" name="sex" value="" />

    上面这个,表示就默认选中了 男 这个单选按钮

    5 input 属性小结

    属性 说明 作用
    type 表单类型 用来指定不同的控件类型
    value 表单值 表单里面默认显示的文本
    name 表单名字 页面中的表单很多,name主要作用就是用于区别不同的表单。
    checked 默认选中 表示那个单选或者复选按钮一开始就被选中了

    7.2 label标签

    目标:

    label标签主要目的是为了提高用户体验。 为用户提高最优秀的服务。

    概念:

    label 标签为 input 元素定义标注(标签)。

    作用:

    用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点。

    如何绑定元素呢?

    1. 第一种用法就是用label直接包括input表单。
    <label> 用户名: <input type="radio" name="usename" value="请输入用户名">   </label>
    

    适合单个表单选择

    1. 第二种用法 for 属性规定 label 与哪个表单元素绑定。
    <label for="sex"></label>
    <input type="radio" name="sex"  id="sex">
    

    当我们鼠标点击 label标签里面的文字时, 光标会定位到指定的表单里面

    7.3 textarea控件(文本域)

    • 语法:
    <textarea >
      文本内容
    </textarea>
    
    • 作用:

      通过textarea控件可以轻松地创建多行文本输入框.

      cols=“每行中的字符数” rows=“显示的行数” 我们实际开发不用

    文本框和文本域区别

    表单 名称 区别 默认值显示 用于场景
    input type=“text” 文本框 只能显示一行文本 单标签,通过value显示默认值 用户名、昵称、密码等数据量比较少的地方
    textarea 文本域 可以显示多行文本 双标签,默认值写到标签中间 留言板

    7.4 select下拉列表

    目的:

    如果有多个选项让用户选择,为了节约空间,我们可以使用select控件定义下拉列表.

    语法:

    <select>
      <option>选项1</option>
      <option>选项2</option>
      <option>选项3</option>
      ...
    </select>
    
    • 注意:
    1. <select> 中至少包含一对 option
    2. 在option 中定义selected =" selected "时,当前项即为默认选中项。
    3. 但是我们实际开发会用的比较少

    7.5 form表单域

    • 收集的用户信息怎么传递给服务器?

      通过form表单域

    • 目的:

      在HTML中,form标签被用于定义表单域,以实现用户信息的收集和传递,form中的所有内容都会被提交给服务器。

    **语法: **

    <form action="url地址" method="提交方式" name="表单名称">
      各种表单控件
    </form>
    

    常用属性:

    属性 属性值 作用
    action url地址 用于指定接收并处理表单数据的服务器程序的url地址。
    method get/post 用于设置表单数据的提交方式,其取值为get或post。
    name 名称 用于指定表单的名称,以区分同一个页面中的多个表单。

    注意:

    每个表单都应该有自己表单域。我们现在做页面,不写看不到效果,但是 如果后面学 ajax 后台交互的时候,必须需要 form表单域。

    元素属性

    • 元素属性值使用双引号语法
    • 元素属性值可以写上的都写上

    推荐:

    <input type="text" />	
    <input type="radio" name="name" checked="checked" />
    

    不推荐:

    <input type=text  />	
    <input type='text' />	
    <input type="radio" name="name" checked />
    
    展开全文
  • 网页设计制作规范

    2004-08-06 15:57:00
    网页设计制作规范 本规范既是一个开发规范,也是一个脚本语言参考,本规范并不是一个一成不变的必须严格遵守的条文,特殊情况下要灵活运用,做一定的变通。基 本 要 求 1. 在网站根目录中开设images common temp 三...
  • Vue 刷课笔记

    2020-11-22 16:14:10
    Vue 笔记 Vue 官方文档 什么是Vue? Vue 是一套用于构建用户界面的渐进式JavaScript框架。 Vue 被设计为可以自底向上逐层应用。 Vue 的核心库只关注视图层,方便与第三方库或既有项目整合。...Vue 完全有能力驱动采用...
  • Vue基础

    2020-11-23 00:10:49
    易用:熟悉HTML、CSS、JavaScript可快速上手Vue 灵活:在一个库和一套完整框架之间自如伸缩 高效:20KB运行大小,超快的虚拟DOM Vue虚拟DOM 前言:Vue2.0引入了虚拟DOM,比Vue1.0的初始渲染速度提升了2~4倍,并...
  • html5 Audio常用属性和函数事件

    万次阅读 2018-04-22 18:50:32
    项目需要,要做一个音乐播放器,于是又复习了一遍h5播放器各种属性。本人比较懒,就直接从大牛博客偷过来了。大牛地址:https://blog.csdn.net/gongstrong123/article/details/50339249...
  • HTML5开发

    千次阅读 2019-06-26 20:59:57
    1.什么是HTML5开发工程师? HTML5开发工程师是协调HTML5设计师、后端程序员实现网站页面或程序界面,优化交互体验的一个职位。 2.HTML5开发工程师需要掌握哪些职业技能? 市场非常需要精通HTML、CSS、JavaScript、...
  • 目录 PWA Web应用 VS 本地应用 Service Worker ...对于收集设备来说,前有本地App,后有移动小程序,想要浏览器切入到移动端时相当困难的一件事,因为浏览器的运行性能时低于本地App的,并且Google也没有类似微信...
  • 利用HTML表单标签编写一个注册页面

    万次阅读 2018-09-12 21:55:43
    今天我们来写一个注册页面 form表单 ... 页面结构大体就是这样子的~ 表单标签: ...所有需要提交到服务器端的表单项必须使用 ...action:整个表单提交的位置(可以是一个页面,也可以是一个后台的Java代码) ...t...
  • HTML5+MUI+HBuilder 之初探情人

    万次阅读 多人点赞 2014-12-22 18:19:24
    MUI(Mobile User Interface)是国内DCloud的最新成果。它遵循了W3C最新的H5+规范,旨在提供一个高效的,跨平台的,H5前端开发框架。本文分享了作者对这项新技术的感受和想法。刚接触这项技术是令人振奋和激动的!...
  • HTML5适合的情人节礼物有纪念日期功能

    万次阅读 多人点赞 2020-02-09 20:51:24
    利用HTML5,css,js实现爱心树 以及 纪念日期的功能 网页有播放音乐功能 以及打字倾诉感情的画面,非常适合情人节送给女朋友 具体的HTML代码 具体只要修改代码里面的男某某和女某某 文字段也可自行修改,还有代码下...
  • 用什么代码实现?不允许有白色底色产生,...html,body{ width:100%; height:100% } 再加一段 body{ font-family: &amp;amp;amp;quot;华文细黑&amp;amp;amp;quot;; background:url(&amp;amp;amp;quo
  • HTML5浪漫爱心表白动画在线演示程序

    万次下载 热门讨论 2014-02-12 23:50:10
    HTML5浪漫爱心表白动画在线演示.htm 修改一下情人节送女友
  • 12个优秀的 HTML5 网站设计案例欣赏

    万次阅读 多人点赞 2018-05-20 14:39:56
    12个优秀的 HTML5 网站设计案例欣赏 欣赏地址:12个优秀的 HTML5 网站设计案例欣赏
  • html5

    千次阅读 2018-11-15 00:07:56
    HTML5 1.Html5 是一个泛指: HTML5 +CSS3+JavaScript 文档的第一行的代码表示的是当前文档的类型(Html1.0---html5.0) Html5 的文档类型: &lt;!doctype Html&gt; 2.Html5和html之间有什么区别? (1)...

空空如也

1 2 3 4 5 ... 20
收藏数 5,031,818
精华内容 2,012,727
关键字:

html5