HTML5基础知识笔记(更新)

一      HTML
     通常意义的h5是一个技术总称,约等于html5+css3+js
     1.1 含义
     1.2 基本骨架
            <html>
                  <head>
                         <title></title>
                  </head>
                  <body>
                          网页要显示的内容
                  </body>
           </html>
 
    html5基本骨架
          <!DOCTYPE html>
          <html lang="en">
                <head>
                  <meta charset="UTF-8">
                  <title>Document</title>
                </head>
                <body>
   
                </body>
         </html>
 
       <!DOCTYPE html> DTD 文档类型说明
      <meta charset="UTF-8"> 字符集设置 UTF-8是支持绝大数语言
 
      假如大家用sublime,快捷方式html:5 按住tab或ctrl+E
    
 1.3 编辑器
                记事本  sublime  vscode(IDE) Hbuilder webstorm ...
 
 1.4 常用标签
               标题标签  h1~h6   双标签  <h1></h1> 开始标签和结束标签
                       Q: 请谈谈你对标题标签的理解?
                                  从语义的角度回答  标题标签给文本赋予标题的含义
                                  SEO搜索引擎优化
                                  结构化的语言标记要看结构。
               划线标签  <hr /> 单标签  了解  线条以后用css完成
               段落标签  <p></p> 双标记
             
               换行标签  <br /> 单标签
               div和span标签  无语义的标签   实在找不到标签表示的时候 考虑用div和span
                        span可以放文字、图片、表单
                        div可以自我内部嵌套,span内部不能嵌套div
               pre标签保留原文本格式
 
               <!--注释
        1 标签可以拥有多个属性 属性不分前后顺序 属性之间用空格隔开
        2 标签属性语法 <标签名  属性1="属性1值"  属性2="属性2值" />
        3 任何标签的属性值都有默认值 省略属性则取这些默认值
                -->
 
               图像标签  <img /> 单标签(图片出问题时,使用alt显示提示。还可以内嵌title,鼠标放上去显示。还可以width,high最好等比例。还有边框border,默认黑,像素设置粗细)
               超链接  <a href="地址">  超链接名字(后面加路径,#等于原页面,路径后加target=“_blank”打开新页面,中间路径也可以用图像标签) </a>                        应用:还可以做锚点
 
锚点  
           <a href="#值">文字</a>
           需要跳转到的地方打一个标记 <a name="值"></a>或<h2 id="值">文字</h2>,标记可以不用文字,还是用标题表示
 
跨页面锚点
            在#前加包含跳转地点的网页地址,带后缀的全称
            
    base标签  单标记 设置在head中 作用 让页面所有的超链接可以在新窗口打开
<base target="_blank" />
 
实体符号
    <用&lt
    >用&gt
    &用&amp
    因为有空白折叠机制,&nbsp为1个空格
 
注释
    
 
路径 绝对路径和相对路径
            绝对路径 F:\训练营\day3 带有盘符的路径
            相对路径  说明有个参照物
            情况一
            day3文件夹下面
                  01.html  1.jpg
 
                  01.html中 <img src="1.jpg" />
 
             情况二
                   前端文件夹 > day3文件夹 > 01.html
                                1.jpg         <img src="../1.jpg"   />
       ./当前目录
       ../上一级
        /下一级
 
列表
1  无序列表
      <ul>
          <li>1</li>
          <li>2</li>
      </ul>
 
2 有序列表
      <ol>
         <li></li>
      </ol>   
 
3 自定义列表
     <dl>
          <dt></dt>     列表标题
          <dd></dd>   列表描述,dd是描述dt的,多对1关系
     </dl>         
 
表格
        在出现CSS前,老式布局是表格加div
 
        caption表格标题,此为表格自带标签
        tr表示增加行
        td表示增加列(可加 rowspan 横跨行数,被横跨行需要删除对应。可加colspan 横跨列数,也需要删除自己对应的多列)
        th表示表头,加黑居中,可包裹在thead标签中(与之对应有tbody,如果没有thead,一般浏览器会默认添加tbody,tbody会均分高度与宽度,thead不会,tfoot在body后面,存一些统计信息)
        cellspacing单元格之间间距
        border边框粗细
        align是让整个表格居中
 
表单
       input type
                         text   文本框
                         password   密码
                         radio   选项(加name值,可以同值唯一,达到互斥)
                         checkbox   复选项
                         button   按钮(value赋文字)
                         submit   提交按钮,数据发到后台
                         reset   重置,刷新,用form(双标签)全部包裹需要重置的部分
                         file   文件上传
                         image   src路径
                         textarea   文本域
 
       datalist
           option   数据列表选项参考,双,可以与上面的input相关联而提示,给datalist一个id,用input的list去标记id,可以有联想和参考提示功能
      
       fieldset分组功能,会包裹信息,自动边框
          legend表示表单的主题
 
       select 
           option选项,第一个为默认显示
       
       from 
                 action  =  "服务器地址
                 method = 提交方式
                 name = 区分表单
 
label标签的使用(双标签)
       可以包裹text使文字部分也可提示显示输入框(多个text就不可以了,把label后加for,获取需要的text的id就可以定向跳转,获取光标)
 
第一行   文档类型声明   DTD   有很多种
       xhtml   严格版html 3种版本
       html4   3种版本
       html5   语法松散不严谨
   strict严格   transitional过渡 frameset框架
 
       html5在html的变化
              增加了很多语义化标签
              header定义网页的头部或页眉
              nav定义导航栏
              footer定义页面的底部 页脚
              article定义文章
              section定义某个具有主题的区域
              aside定义侧边栏
       
       html5在表单中的变化
              表单元素都可以用form包裹起来
              input  type  
                                 email移动端提示@
                                 tel移动端提示9宫格
                                 number带数字加减
                                 url移动端带.com
                                 search移动端放大镜
                                 range一个可移动滑块
 f                                time带数字加减选择
                                 date年月日,带日历点击选择
                                 month月份
                                 week星期和第几周
                                 color颜色,前面颜色全面面板,但默认左上角显示
 
       html5新增表单属性
          input  type = text  placeholder = 提示信息,点击即消除
                    autofocus页面加载时,自动获取焦点,光标闪烁
                    file文件上传,加multiple可以同时选择多个文件上传
                    text文本,加autocomplete = on 增加一个历史记录,并且根据字段进行提示,要用form包裹可用。加required检测非空才可提交。accesskey = "一个名字",键盘alt+名字可以激活焦点
 
多媒体标签
       embed 标签可定义嵌入的内容,可以用来插入各种多媒体,格式可以是Midi、Wav、AIFF、MP3等等
       embed  src = 路径源 width =     heigh =     align="middle"居中   allowFullScreen = "true"
       html5有替代标签
       audio(双)
                   src = 路径 controls控制显示      autoplay自动放 loop=-1循环
                   controls autoplay
             source  src = (audio中加上面)
             您的浏览器不支持
       video
                   src = 路径  controls  autoplay
             source  src = (video中加上面)
             你的浏览器不支持视频播放
 
 
 
 
 
 
 
 
 
 
 
 
posted @ 2019-01-14 10:10  STK0210  阅读(884)  评论(0编辑  收藏  举报