HTML学习(一)

js笔记

一、HTML基本学习

1.1.什么是HTML?

百度百科:

HTML: Hyper Text Markup Language 超文本标记语言

说人话:

HTML就是一款功能比".txt"文件更强大的语言,它自定义了一些标签可以使页面做到纯文本语言做不到的事情。比如:<image>标签可以内嵌图片,又如<table>标签可以展示表格数据。

大家都用过.txt文件,它是一个纯文本语言,里面只能使用一些中文语言、英文语言以及一些常见的符号,不能插入图片、不能使用链接等等。而HTML就是功能比纯文本语言更强大的语言,这就是“超文本”的来源。

其次,HTML自定义了一些标签,如<image><table>标签等,可以在页面内展示图片数据表格数据等,这就是“标记”的来源。因此HTML是一个“超文本标记语言”。

1.2.HTML的作用是什么?

记住这几句话:

HTML: 决定了页面的框架 -------》 用来展示数据 ---------》相当于一堆家具随意堆砌的房子

CSS: 用来美化我们的页面 -------》 用来美化页面 --------》让房子内的家具有条理的摆放

JS: 提高用户的交互体验--------》使页面具有简单的动态效果 --------》智能家具,住的更舒适

 

1.3.HTML语法规范

<!DOCTYPE html>
    <html>
        <head>
        <title>文档的标题</title>
        </head>
    &lt;body&gt;<span style="color: #000000;">
    文档的内容......
    </span>&lt;/body&gt;

&lt;/html&gt;</pre>

1. 最上面是一个文档声明
2. 根标签 html
3. html文件主要包含两部分. 头部分和体部分
  头部分 : 主要是用来放置一些页面信息
  体部分 : 主要来放置我们的HTML页面内容
4. 通过标签来对内容进行描述,标签通常都是由开始标签和结束标签组成
5. 标签不区分大小写, 官方建议使用小写

注意:

1.3.1 .关于'<!DOCTYPE>'的定义

'<!DOCTYPE>' 声明必须是 HTML 文档的第一行,位于 <html> 标签之前。

'<!DOCTYPE> 声明不是 HTML 标签;它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。

在 HTML 4.01 中,<!DOCTYPE> 声明引用 DTD,因为 HTML 4.01 基于 SGML。DTD 规定了标记语言的规则,这样浏览器才能正确地呈现内容。

HTML5 不基于 SGML,所以不需要引用 DTD。

提示:请始终向 HTML 文档添加 <!DOCTYPE> 声明,这样浏览器才能获知文档类型。

1.3.2.HTML 4.01 与 HTML5 之间的差异

在 HTML 4.01 中有三种 <!DOCTYPE> 声明。在 HTML5 中只有一种:

<!DOCTYPE html>

1.4.一张图搞定HTML常用标签

二、扩展

2.1 字体扩展

  b : 加粗

  i : 斜体

  strong: 加粗, 带语义标签

  em: 斜体, 带语义

2.2 文件路径扩展

  • 相对路径

 

    ./        代表的是当前路径
    ../       代表的上一级路径
    ../../    上上一级路径

2.3 表格扩展

  表格标签table

  table标签:

  常用的属性:

    bgcolor : 背景色

    width : 宽度

    height : 高度

    align : 对齐方式

  tr 标签

  td 标签

合并单元格:

colspan : 跨列操作

rowspan : 跨行操作

注意: 跨行或者跨列操作之后,被占掉的格子需要删除掉

 

表格的嵌套:

在td中可以嵌套一个表格

 

2.4 表单扩展

表单标签

<!--
            表单标签
                action : 直接提交的地址
            method : 
                    get 方式  默认提交方式 ,会将参数拼接在链接后面 , 有大小限制 ,4k
                    post 方式  会将参数封装在请求体中, 没有这样的限制
                    
        
        input :
            type: 指定输入项的类型
                text : 文本
                password :  密码框
                radio :        单选按钮
                checkbox :  复选框
                file      : 上传文件
                submit   : 提交按钮
                button      : 普通按钮
                reset     : 重置按钮
                hidden  : 隐藏域
                
                date    : 日期类型
                tel     : 手机号
                number   : 只允许输入数字
                
            placeholder : 指定默认的提示信息
            name : 在表单提交的时候,当作参数的名称
            id : 给输入项取一个名字, 以便于后期我们去找到它,并且操作它
        
        textarea : 文本域, 可以输入一段文本
                    cols : 指定宽度
                    rows : 指定的是高度
        
        select  : 下拉列表
            option : 选择项
    </span>--&gt;</pre>
原文地址:https://www.cnblogs.com/tianwenxin/p/13986788.html