前端---HTML篇(详解HTML各类标签)

由于工作需要,之前学习了一些前端开发的知识。现进行笔记分享。

1. HTML简介

 1.1什么是HTML?        

HTML是超文本标记语言的简称(Hyper Text Markup Language),是一种用来告知浏览器如何组织页面的标记语言。其中HTML使用标记标签来描述网页。

 1.2 HTML标签和文档

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

  • HTML 标签是由尖括号包围的关键词,比如
  • HTML 标签通常是成对出现的,比如

  • 标签对中的第一个标签是开始标签,第二个标签是结束标签
  • 开始和结束标签也被称为开放标签闭合标签

HTML文档(.html)即是一个网页:


    
        

标题

段落

上述,打开便是一个网页:

前端---HTML篇(详解HTML各类标签)_第1张图片

 2. HTML属性

html可以提供属性,以此提供有关HTML元素更多信息,属性是以名称=值的形式出现的,比如上述HTML标签中的href="www.baidu.com"就是属性。属性是在开始标签中定义的。

除此之外,还有其他的属性等等(这里主要是举例,后面细学):

① 文字居中:

aaa

② 定义body背景颜色: ③ 定义表格的边框信息:

3.  基本标签

3.1. 标题

html的标题是通过标签

-

实现的


    
        
        
    
    
        

一级标题

二级标题

三级标题

四级标题

五级标题
六级标题

前端---HTML篇(详解HTML各类标签)_第2张图片

(效果如图)

3.2. 段落

html的段落是由

标签实现的:


    
        
        
    
    
        

这是段落

前端---HTML篇(详解HTML各类标签)_第3张图片

3.3. 链接

html的链接是由标签实现的:


    
        
        
    
    
        跳转百度的链接
    

点击跳转即可实现连接效果。

属性target:可以定义链接在何处跳转:

1、打开新窗口: target = "view_window"、target="_blank"、

2、不打开:不写target或者target = "_self"

属性name:         

name 属性规定锚(anchor)的名称。

您可以使用 name 属性创建 HTML 页面中的书签。

书签不会以任何特殊方式显示,它对读者是不可见的。

3.4.图像

html的图像由标签进行定义


    
        
        
    
    
        
    

前端---HTML篇(详解HTML各类标签)_第4张图片

属性:

src: source就是图像的URL地址。

alt:为图像设置一串可以替换的文本,当浏览器无法载入图像的时候,alt的文本信息可以告诉读者出现了问题。

align:align可以设置图像的浮动位置。

使用图像的时候,我们应该知道加入我们放了多个图像在这个页面,浏览器需要加载11个文件,加载事件是需要时间的,因此我们需要慎用图片。

3.5. 引用

短引用:html中提供了标签来进行引用。

长引用:html中提供

来进行引用。

3.6. 缩略词

用户缩略图的是


    
        

鼠标聚焦可以看到:

3.7. 定义

这个和缩略词很像,区别是缩略图带着虚线


    
        

鼠标聚焦可以看到:

3.8. 表格:

我们可以使用HTML在页面创建表格,表格由

标签来定义,其中每个表格均有多行,每一个行由标签定义,而每行又可以分为多个格子
标签定义,表头可以用标签进行定义。

如下为例子:


    
        
        
    
    

        
这是一个表格
姓名 性别
stukk

前端---HTML篇(详解HTML各类标签)_第5张图片

属性:

border:边框:可以设置边框的宽度

width:设置表格的宽度

align:设置表格的对齐方式

cellspacing:设置单元格间距

bgcolor:背景颜色


    
        
        
    
    

        
这是一个表格
姓名 性别
stukk

前端---HTML篇(详解HTML各类标签)_第6张图片

3.9 列表

HTML中的列表分为了无序列表和有序列表两种:
无序列表:使用圆点进行标记:列表开始于标签

    ,每个列表项开始于标签
  • :

    
        
            
            
        
        
            
    • 姓名: stukk
    • 性别: 男

    有序列表:可以使用属性start定义开始的数字进行标记,

    与无序列表的差别是:使用的标签是

      ,列表中的每个项使用
    1. 标签

      3.10 输入框

      html中使用标签来定义输入框。其属性包含以下几种:

      属性 说明
      type 定义input的类型
      required 是否必填
      pattern 内容需要匹配正则表达式
      min / max 限制最大值最小值
      placeholder 内容为空时显示的内容
      readonly 让表单控件不可编辑
      disabled 禁用表单属性
      maxlength 限制最大数字限制
      size 控制大小
      autocomplete 自动补全,根据历史纪录,可以设置on
      autofocus 页面加载后,自动获得焦点
      form 进行表的套嵌。

      其中属性type可以定义多种类型的input,比如文本字段、密码字段等等,如下表展示输入框input的类型:

      前端---HTML篇(详解HTML各类标签)_第7张图片

      前端---HTML篇(详解HTML各类标签)_第8张图片

      (ps:上图引用自:Html中input标签的详解_html input-CSDN博客)

      
          
              
              
          
          
              
      1. 普通文本:
      2. 密码文本:
      3. 按钮:
      4. 复选框:
      5. 单选按钮:
      6. 提交按钮:
      7. 上传文件:
      8. 隐藏字段:
      9. 定义图像作为按钮:
      10. 重置按钮:
      11. 定义Email字段:
      12. 定义URL字段:
      13. 定义电话字段:
      14. 定义数字字段:
      15. 范围:
      16. 搜索框:
      17. 颜色选择器:
      18. 日期选择器:
      前端---HTML篇(详解HTML各类标签)_第9张图片
      3.11 表单 

      html中使用了标签

      来定义表单,在form表单中可以上用上述input组件搭建成为一个表单给用户填写,其中submit可以对应action设置的路径提交这个表单。

      
          
              
              
          
          
      
              
                  
      Title
      3.12 块

      在HTML中,元素被分为了块级元素和内联元素:

      块级元素在浏览器显示的时候会以新的一行来开始:such as: 

      ,

      ,

        ,

        内联元素在显示时,不会以新的一行开始:such as: 

        ,,

        HTML中

        标签就是一个块级元素,它可以用来组合其他HTML元素的容器,
        没有特定的含义。我们可以通过操控CSS来进行布局

        HTML中则是一个内联元素,和div一样,他也没有具体的意义

        
            
                
                
            
            
                
        aaa bbb
        ccc
        ddd

        4. HTML样式

        style属性用来改变HTML的元素样式。

        有了style样式属性之后,有一些标签和样式被抛弃了(比如:

        、align、bgcolor、color) ,如下替换了已经被html4标准删除的标签:

        
            
                
                
            
            
                

        aaa

        5.HTML颜色

        html中的颜色主要是由红、绿、蓝三原色组成的:RGB,它是一个十六进制符号

        前端---HTML篇(详解HTML各类标签)_第10张图片

        6. HTML类(Class)和 Id

        我们可以在HTML的标签中使用类class和id,这样可以为元素定义CSS,为相同而类定义相同的CSS,也方便JavaScript获取元素。

        
            
                
                
                
            
            
                
        老鼠人。。。。老鼠人
        猫咪 猫咪

        7. 内联框架

        html中使用iframe在网页内显示网页:

        
        
            
                
                Title
            
            
              

        111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111

        Title

        前端---HTML篇(详解HTML各类标签)_第11张图片

        8. HTML 头部

        hrml的头部放在标签中, 内的元素可包含脚本,指示浏览器在何处可以找到样式表,提供元信息,等等。以下标签都可以添加到 head 部分:、<base>、<link>、<meta>、<script> 以及 <style>。</p> <p>其中,<strong><title></strong>表示文档的标题、<strong><base></strong>标签为页面上的所有链接规定默认地址或默认目标、</p> <p><strong><link></strong> 标签定义文档与外部资源之间的关系,比如引入CSS文件和JS文件、<strong><syle></strong>用于编写CSS、<strong><meta</strong>提供关于 HTML 文档的元数据。元数据不会显示在页面上,但是对于机器是可读的。</p> <pre><code class="language-html"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>标题 sss

        9.HTML5

        HTML5是HTML最新的修订版本,h5的设计主要是为了在移动端支持多媒体,其对比HTML多了很多的新元素、新属性以及支持CSS3等等。

        新的标签如下:

        标签 描述
        定义页面独立的内容区域。
        定义页面的侧边栏内容。
        允许您设置一段文本,使其脱离其父元素的文本方向设置。
        定义命令按钮,比如单选按钮、复选框或按钮
        用于描述文档或文档某个部分的细节
        定义对话框,比如提示框
        标签包含 details 元素的标题
        规定独立的流内容(图像、图表、照片、代码等等)。
        定义
        元素的标题
        定义 section 或 document 的页脚。
        定义了文档的头部区域
        定义带有记号的文本。
        定义度量衡。仅用于已知最大和最小值的度量。
        定义导航链接的部分。
        定义任何类型的任务的进度。
        定义 ruby 注释(中文注音或字符)。
        定义字符(中文注音或字符)的解释或发音。
        在 ruby 注释中使用,定义不支持 ruby 元素的浏览器所显示的内容。
        定义文档中的节(section、区段)。
        定义日期或时间。
        规定在文本中的何处适合添加换行符

        接下来介绍一些新的元素:

        9.1.Canvas

        在HTML中,标签用于图形绘制,通过脚本Javascript绘制出图形,然后放在容器内,接下来我们用一个例子来测试:我们先创建一个画布
         

          
            
            
          

        接下来时使用js来画画。

        let can = document.getElementById("canvas1"); //首先找到元素
        let context = can.getContext("2d"); //创建context对象
        context.fillStyle = "pink"; //绘制背景颜色
        context.fillRect(0,0,150,75); //定义填充方式

        画线:
        在canvas中画线,我们可以使用:
        moveTo(x , y) 定义线条的开始坐标
        lineTo(x , y)定义线条结束坐标 
        最后加上stroke()方法绘制

            //下面是绘制线条:
            context.moveTo(10,10);
            context.lineTo(200,100);
            context.stroke();
            //  下面是绘制圆形:
            context.beginPath();
            context.arc(50,50,50,0,2*Math.PI);
            context.stroke();

        文本:
        主要使用的方法:
        使用font 定义字体
        1. fillText(text , x , y) 在canvas上绘制实心的文本
        2. strokeText(text , x , y) 绘制空心文本

          //  接下来是写文本:
            context.font="30px 楷体"; //设置字体
            context.fillText("Hello World",10,30); //设置实心字体
            context.strokeText("你好",30,60); //设置空心字体

        渐变:
        渐变可以填充在矩形、圆形、线条、文本等等,各种形状可以定义不同的颜色。
         

            // 创建渐变
            let grd = context.createLinearGradient(0,0,200,0);
            grd.addColorStop(0,"red");
            grd.addColorStop(1,"green");
        
            // 填充渐变
            context.fillStyle=grd;
            context.fillRect(10,10,180,80);

        图像:

            //添加图片
            let img = new Image();
            img.src = "button.png";
            img.onload = function (){
                context.drawImage(img,0,0);
            }
        9.2. SVG 

        SVG 是可缩放矢量图形,使用
        什么是SVG?

        • SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
        • SVG 用于定义用于网络的基于矢量的图形
        • SVG 使用 XML 格式定义图形

        SVG优势

        • SVG 图像可通过文本编辑器来创建和修改
        • SVG 图像可被搜索、索引、脚本化或压缩
        • SVG 是可伸缩的
        • SVG 图像可在任何的分辨率下被高质量地打印
        • SVG 可在图像质量不下降的情况下被放大

        如下,我们做一些SVG,我们可以把它当作图标使用,省去加载图片的时间:

        
        
            
                
                SVG
            
            
              

        绿色圆形

        五角星

        9.3.拖放

        在属性draggable中可以赋值true,之后呢,我们可以使用js处理拖拽事件,详情请见代码:

        
        
            
                
                Draggable
                
                
            
            
        
                

        拖动图片到:



        前端---HTML篇(详解HTML各类标签)_第12张图片

        9.4. 语义元素

        语义元素可以清楚的表示这个标签的意义给浏览器和开发者。
        比如:

        就是无语义的
        等就是由语义的。
        H5中出现了新的语义元素:

        9.5. Web存储

        h5中有着web存储,它主要是存储在用户本地的浏览器上,比cookie要更加安全,数据主要以键值对的形式存在。
        客户端存储的两个对象是:LocalStorageSessionStorage。

        LocalStorage:用于长久保存整个网站的数据,保存的数据没有过期时间,直到手动去除。
        SessionStorage:用于临时保存同一窗口(或标签页)的数据,在关闭窗口或标签页之后将会删除这些数据。

        • 保存数据:localStorage.setItem(key,value);
        • 读取数据:localStorage.getItem(key);
        • 删除单个数据:localStorage.removeItem(key);
        • 删除所有数据:localStorage.clear();
        • 得到某个索引的key:localStorage.key(index);

        使用如代码所示:

        
        
            
                
                Storage
            
            
              

        接下来我们利用这个存储来开发简单的书本网站表单增删改查功能:

        
        
            
                
                书本表单
            
            
              
        请输入你要添加的书名:
        您提交的书:

        前端---HTML篇(详解HTML各类标签)_第13张图片

        9.6.Web SQL

        在我们的Web客户端也可以使用SQL来操作数据库,Web SQL的兼容性并不是特别理想,仅chrome ,safari,opera 10.5+等浏览器支持。归咎其原因,主要是因为 Web SQL Database API 实际上并不包含在 HTML5 规范之中。它是一个独立的规范,它引入了一套使用 SQL 操作客户端数据库的 API。其规范已经被停止更新了,所以大多数浏览器并不支持。

        
        
            
                
                Web SQL
            
            
        
            
        
        
            
        

        使用DataBase现在貌似被浏览器禁止了,所以可以尝试使用下IndexedDB

        9.7. IndexedDB
        let db;
        let objectStore;
        let databaseName = "testIDB"
        let version = 1
        let request = window.indexedDB.open(databaseName, version);
        
        request.onerror = function (event) {}
        request.onsuccess = function (event) {
            db = request.result//可以拿到数据库对象
            console.log(db);
            // add();
            // getByKey(db,'person',2);
            cursorGetData(db,"person");
        }
        //如果指定的版本号,大于数据库的实际版本号,就会发生数据库升级事件upgradeneeded
        request.onupgradeneeded = function (event) {
            db = event.target.result;
            if (!db.objectStoreNames.contains('person')) {//判断是否存在
                objectStore = db.createObjectStore('person', { keyPath: 'id' });
            }
            //新建索引,参数索引名称、索引所在的属性、配置对象
            let idbIndex = objectStore.createIndex('email', 'email', { unique: true });
        }
        
        function add() {  //添加数据
            let request = db.transaction(['person'], 'readwrite')
                .objectStore('person')
                .add({ id: 2, name: '张四', age: 24, email: '[email protected]' });
        
            request.onsuccess = function (event) {
                console.log('数据写入成功');
            };
        
            request.onerror = function (event) {
                console.log('数据写入失败');
            }
        }
        
        function getByKey(db,storeName,key){ //通过主键获取 --- id   你
            let transaction = db.transaction([storeName]); //事务
            let store = transaction.objectStore(storeName);
            let req = store.get(key);
            req.onerror = function (event){
                console.log("事务失败");
            }
            req.onsuccess =  function (event){
                console.log(req.result)
                console.log("查询成功,结果为:" + req.result);
            }
        }
        function cursorGetData(db, storeName){
            let list = [];
            let store = db.transaction(storeName, "readwrite").objectStore(storeName);
            let req = store.openCursor(); //指针对象
            req.onsuccess = function (e) {
                let cursor = e.target.result;
                if (cursor) {
                    list.push(cursor.value);
                    cursor.continue(); //遍历存储对象中的数据
                } else {
                    console.log("游标读取的数据:");
                    console.log(list);
                }
            }
        }
        
        /**
         * 通过索引读取数据
         * @param {object} db 数据库实例
         * @param {string} storeName 仓库名称
         * @param {string} indexName 索引名称
         * @param {string} indexValue 索引值
         */
        function getDataByIndex(db, storeName, indexName, indexValue) {
            let store = db.transaction(storeName, "readwrite").objectStore(storeName);
            let request = store.index(indexName).get(indexValue);
            request.onerror = function () {
                console.log("事务失败");
            };
            request.onsuccess = function (e) {
                let result = e.target.result;
                console.log("索引查询结果:", result);
            };
        }
        
        //更新则是put和delete()方法 db.transaction(storeName, "readwrite").objectStore(storeName).put().....
        
        
        

        10.总结

        总结就是,html主要还是搭建了我们项目的页面的骨架,至于这个骨架要变成什么颜色,什么形状,需要由我们接下来的CSS和Javascript来决定的!

        你可能感兴趣的:(前端开发,学习)