概览

文档章节

  • <body>
  • <header>
  • <nav> 导航
  • <aside> 表示和主要内容不相关的区域
  • <article> 表示一个独立的、可重复的结构
  • <section> 表示一组内容,相邻的section之间的内容是有相关性的,相邻的article标签之间是独立的
  • <footer>
  • <hx>

标题

  • h1
  • h2
  • h3
  • h4
  • h5
  • h6

文本

  • a标签 创建指向另一个文档的链接;创建指向另一个文档内部的锚点;链接到email地址;

       //href 属性,链接地址
    //target 跳转方式
    //_self:当前窗口显示;
    //_blank:新开一个窗口显示;
    //也可是一个名称name,在名为name的iframe中打开链接
    <a href="mailto:zhangweihang_amy@qq.com">给阿航发邮件</a>
    <a href="tel:10010">给联通打电话</a> //?cc抄送
    //subject 主题
  • 更多不是特别常用的标签

       <em></em> //表示强调
    <strong></strong> //粗体强调
    <br> 换行,在内容中换行
    <cite></cite> //斜体,用在文章标题处;
    <q></q> //表示引用,会加引号“”;
    <code></code> //放代码
    <b></b> //粗体,关键词
    <i></i> //斜体,关键字

组合内容

  • 分区
    div:本身没有任何的语义,主要用来作为分区,h5之前没有header这种语义化的标签,
  • 段落
    p:段落
  • 列表,列表是可以嵌套的
    ul:无序列表(导航 ,节目列表,用户列表等都可以用无序列表来表示)

       //默认的li的样式会有小圆点,可以用css来控制
    .class{
    list-style:none
    }

    ol:有序列表 (排行榜)

       //适合做排行榜等有顺序的列表,默认样式会有序号123
    //序号可以用type属性改变,start属性用来改变起始序号;

    dl:自定义列表

       //dt定义了列表项,dd定义了对列表项的描述,
    //每一项的dt只能有一个,对应的dd可以有多个,
    //dd会有一定缩进


    pre:把code标签的内容放到pre标签中,可以保留code内容中的换行
    blockquote:大块的引用

嵌入资源

  • <img> 图片

       //页面中嵌入图片,自闭和标签
    //src图片路径
    //alt描述图片的含义
    //如果网速慢等情况,导致图片没有加载出来,或者地址写错了导致无法加载图片,
    //alt的内容就会替代图片,显示出来
    //一般都会要求写上alt,改善用户体验
  • <iframe></iframe> 嵌入页面

       //当前页面的上下文(css,js)和嵌入页面中的内容是隔离的,
    //在嵌入页面中的操做并不影响当前页面
    //比如页面中的播放器,可以放在iframe中,这样页面的操作就不会影响播放器的操作
  • <object></object> 嵌入外部资源(可能是pdf等插件)

       //在type属性中指定插件类型,插件的参数可以放在param标签中,
    //播放器的地址也可以写在object的data属性上面,ie8以下不兼容data属性
    <object data="" type="application/x-shockwaveflash">
    <param name="movie" value="http://pdfReader.swf">
    <param name="flashvars" value="http://book.pdf">
    </object>
  • <embed></embed> 嵌入插件

       <embed src="http://pdfReader.swf" type="application/x-shockwaveflash">
  • <video></video> 在h5中可以使用video标签来插入视频,viedo标签,只有高版本的浏览器才支持

       <!--因为不同的浏览器对视频的支持格式不一样,-->
    <!--所以要准备多个视频文件,放在source的标签中,如果只有一个视频文件,可以直接放在video标签的src里面-->
    <!--浏览器会选择一个它支持的文件视频类型来播放-->
    <video src="" controls="controls" poster="海报地址" autoplay>
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.webm" type="video/webm">
    <source src="movie.ogg" type="video/ogg">
    <track kind="subtitles" src="video.srt" label="English">
    您的浏览器不支持video标签
    </video> <!--通过controls,显示控制条-->
    <!--poster用来指定封面,如果没有指定,则显示视频的第一帧;-->
    <!--track属性用来引入字幕-->
    <!--autoplay属性用来设置为自动播放-->
    <!--loop属性,循环播放,没有指定,则播放完毕后显示视频的最后一帧-->
  • <audio></audio> 和video标签很类似
  • <canvas> (图)基于像素的,有很多图形函数,可以在js中进行绘制;适合用来处理比较复杂的,实时性比较高的,比如游戏;
  • <svg> (图) 是矢量的,适合用来处理高保真的、静态的图形图像
  • <map> (热点区域)
  • <area> (热点区域)

       <!--coords,区域-->
    <!--shape,形状-->
    <img src="图片地址" alt="图片名称" width="1090" height="995" usemap="#Map2">
    <map name="Map2">
    <area shape="rect" coords="669,75,1075,682" href="xiupin.com/..." target="_blank">
    <area shape="rect" coords="26,93,391,337" href="xiupin.com/..." target="_blank">
    </map>

附录
video文件兼容性 https://en.wikipedia.org/wiki...
audio文件兼容性https://en.wikipedia.org/wiki...

表格

  • table

       <table>
    <caption>照片冲印价格详情</caption>
    <thead>
    <tr>
    <!--表头单元格用th表示-->
    <th>照片尺寸</th>
    <th>富士</th>
    <th>科达</th>
    </tr>
    </thead>
    <tbody>
    <tr>
    <th>6寸</th>
    <!--普通单元格用td表示-->
    <td>0.45</td>
    <td>0.6</td>
    </tr>
    </tbody>
    <tfoot>
    <tr>
    <!--跨列用colspan,跨行用rowspan-->
    <td colspan="3">运费8元每单,满99免运费</td>
    </tr>
    </tfoot>
    </table>

表单

  • form

       <!--action,接口;method,方式-->
    <form action="/login" method="post">
    <!--fieldset表示不同的区域-->
    <fieldset>
    <legend>照片选择</legend>
    <!--input有两个重要的属性,name和value,name是向后台传值时的参数名,value是向后台传值时的参数值-->
    <input type="file" name="file">
    </fieldset> <fieldset>
    <legend>填写信息</legend>
    <div>
    <!--多选-->
    <!--checked 表示默认选中-->
    <!--同一组单选框或者多选框的name的值是一样的-->
    <input type="checkbox" value="香蕉" id="banana" checked><label for="banana">香蕉</label>
    <input type="checkbox" value="苹果" id="apple"><label for="apple">苹果</label>
    </div>
    <div>
    <!--单选-->
    <input type="radio" value="榨汁" id="1" name="how-to-eat" checked><label for="1">榨汁</label>
    <input type="radio" value="直接吃" id="2" name="how-to-eat"><label for="2">直接吃</label>
    <!--disabled属性用来禁用某个选项-->
    <input type="radio" value="不吃了" id="3" name="how-to-eat" disabled><label for="2">不吃了</label>
    </div>
    <div>
    <!--文本-->
    <!--label为表单做提示,for对应input、textarea、select的id-->
    <label for="name">姓名</label>
    <!--placeholder占位符,默认展示的文字-->
    <!--readonly属性,表示只读-->
    <!--hidden属性表示隐藏,页面上不可见,但是向后台传值的时候是传的-->
    <input type="text" id="name" placeholder="请输入姓名" readonly>
    <input type="text" id="name2" placeholder="请输入姓名" readonly hidden>
    </div>
    <div>
    <label for="more-info">备注</label>
    <!--多行文本框用textarea表示-->
    <textarea name="" id="more-info" cols="30" rows="10"></textarea>
    </div>
    <label for="delivery">delivery</label>
    <!--下拉框-->
    <select name="" id="delivery">
    <!--optgroup用来区分选项组-->
    <optgroup label="group1">
    <option value="0">快递</option>
    <option value="1">平邮</option>
    </optgroup>
    <option value="2" selected>EMS</option>
    </select>
    </fieldset>
    <!--<div>-->
    <!--&lt;!&ndash;input也可以用来做按钮,但是,为了更好地语义化,我们通常使用button&ndash;&gt;-->
    <!--<input type="submit">-->
    <!--<input type="reset">-->
    <!--</div>-->
    <div>
    <button type="submit">提交</button>
    <button type="reset">重置</button>
    </div>
    </form>
  • input

       //input的type属性
    //email
    //url
    //number
    //tel
    //search
    //range 一定范围内的数据
    //color 颜色的拾色器
    //date-picker (date,month,week,time,datetime,datetime-local)
  • 语义化
    什么是语义化呢?
    了解每一种标签的用途,用适当的标签来描述页面。
    语义化的作用:1.便于SEO(Search Engine Optimization)优化,我们的页面是给搜索引擎看的,搜索引擎的爬虫呢会根据语义话的标签来确定关键字的权重,这样子我们的关键字能和用户的关键字能更加的匹配;另外,搜索引擎也会给语义化的页面一个更高的权重,这样我们的页面也会更早出现在用户的搜索结果中。2.可访问性,页面也可能是给残障人士看的,他们可以通过屏幕阅读器来访问页面,屏幕阅读器会对不同的标签发出不同的声音,使用更语义化的标签能够传达不同信息的重要性,使他们能够更好的理解页面的内容。3.可读性,提高代码的可读性,便于多人的修改维护,提高开发效率。
    (ps:主流浏览器都兼容HTML5的新标签,对于 IE8 及以下版本不认识 HTML5的新元素,可以使用 JavaScript 创建一个没用的元素来解决,例如:<script>document.createElement("header");</script>,也可以使用shiv来解决兼容性问题,详情可参考HTML5 Shiv https://github.com/afarkas/ht...

前端复习笔记--1.html标签复习速查的更多相关文章

  1. 2013年7月28日web前端学习笔记-------head相关标签应用

    7月份快过完了.趁周日写写学过觉得有用的东西. 1.缩略图的展示问题,不要以为缩略图设置了width,height,就是缩略图了.比如一个300kb的500*500原始图片,用户请求web服务器后,展 ...

  2. Angular复习笔记7-路由(上)

    Angular复习笔记7-路由(上) 关于Angular路由的部分将分为上下两篇来介绍.这是第一篇. 概述 路由所要解决的核心问题是通过建立URL和页面的对应关系,使得不同的页面可以用不同的URL来表 ...

  3. Angular复习笔记7-路由(下)

    Angular复习笔记7-路由(下) 这是angular路由的第二篇,也是最后一篇.继续上一章的内容 路由跳转 Web应用中的页面跳转,指的是应用响应某个事件,从一个页面跳转到另一个页面的行为.对于使 ...

  4. Angular复习笔记5-指令

    Angular复习笔记5-指令 在Angular中,指令是一个重要的概念,它作用在特定的DOM元素上,可以扩展这个元素的功能,为元素增加新的行为.本质上,组件可以被理解为一种带有视图的指令.组件继承自 ...

  5. angular复习笔记4-模板

    Angular复习笔记4-模板 简介 模板是一种自定义的标准化页面,通过模板和模板中的数据结合,可以生成各种各样的网页.在Angular中,模板的默认语言是HTML,几乎所有的HTML语法在模板中都是 ...

  6. Java基础复习笔记系列 九 网络编程

    Java基础复习笔记系列之 网络编程 学习资料参考: 1.http://www.icoolxue.com/ 2. 1.网络编程的基础概念. TCP/IP协议:Socket编程:IP地址. 中国和美国之 ...

  7. Java基础复习笔记系列 八 多线程编程

    Java基础复习笔记系列之 多线程编程 参考地址: http://blog.csdn.net/xuweilinjijis/article/details/8878649 今天的故事,让我们从上面这个图 ...

  8. Java基础复习笔记系列 七 IO操作

    Java基础复习笔记系列之 IO操作 我们说的出入,都是站在程序的角度来说的.FileInputStream是读入数据.?????? 1.流是什么东西? 这章的理解的关键是:形象思维.一个管道插入了一 ...

  9. Java基础复习笔记系列 五 常用类

    Java基础复习笔记系列之 常用类 1.String类介绍. 首先看类所属的包:java.lang.String类. 再看它的构造方法: 2. String s1 = “hello”: String ...

随机推荐

  1. VB.NET XOR 运算

    C# 里面的 ^ 运算符,在VB.NET中可以用 XOR 表示,但是 byte x=(byte)(65535^254); 直接翻译成 dim x as Byte=CByte(65535 XOR 254 ...

  2. python学习笔记(19)-切片

    转自https://www.jianshu.com/p/15715d6f4dad 在利用python解决各种实际问题的过程中,经常会遇到从某个对象中抽取部分值的情况,切片操作正是专门用于完成这一操作的 ...

  3. 2018安卓巴士开发者大会打造Android技术盛宴

    2018安卓巴士开发者大会打造Android技术盛宴2018安卓巴士开发者大会将于8月25日在上海举行,作为中国最具前沿性.专业性的安卓技术会议,将邀请来自爱奇艺.阿里.饿了么等知名企业的一线工程师分 ...

  4. cannot be found on object of type xx.CacheExpressionRootObject

    0 环境 系统环境:win10 编辑器:IDEA 1 前言->环境搭建 1-1 pom依赖 <?xml version="1.0" encoding="UTF ...

  5. @EnableWebMvc WebMvcConfigurer CorsConfig

    package me.zhengjie.core.config; import org.springframework.context.annotation.Configuration; import ...

  6. Qt QThread必须要了解的几个函数

    概述 如果想对Qt中的QThread有个更加深刻的了解,必须要知道这几个重要的函数,现在就一一介绍下. 函数介绍 属性 返回值 函数体 功能 static QThread * QThread::cur ...

  7. spring boot 测试插件使用及result风格实例1&打包启动

    本节主要内容: 1:spring boot 小插件使用 2:构建第一个简单的result风格的实例并访问 3:将项目打成jar包后启动并访问. 一:添加boot devtools插件: 执行完成后,查 ...

  8. plague|commence|gymnasium|triumph|jump

    N-COUNT 瘟疫:疫病A plague is a very infectious disease that spreads quickly and kills large numbers of p ...

  9. [LC] 7. Reverse Integer

    Given a 32-bit signed integer, reverse digits of an integer. Example 1: Input: 123 Output: 321 Examp ...

  10. CAD 卸载工具,完美彻底卸载清除干净cad各种残留注册表和文件

    CAD提示安装未完成,某些产品无法安装该怎样解决呢?一些朋友在win7或者win10系统下安装CAD失败提示CAD安装未完成,某些产品无法安装,也有时候想重新安装CAD的时候会出现本电脑windows ...