欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

HTML基础

程序员文章站 2022-01-15 10:59:07
...

一、认识web

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

「浏览器」是网页显示、运行的平台。

「浏览器内核」(排版引擎、解释引擎、渲染引擎)

IE Trident -ms-
firefox Gecko -moz-
Safari Webkit -webkit-
chrome WebKit -webkit-
Opera Presto(新：blink) -o-

web标准

结构标准：用于对网页元素进行整理和分类(HTML)

表现标准：用于设置网页元素的版式、颜色、大小等外观属性(CSS)

行为标准：用于对网页模型的定义及交互的编写(JavaScript)

优点：

  1. 易于维护：只需更改CSS文件，就可以改变整站的样式

  2. 页面响应快：HTML文档体积变小，响应时间短

  3. 可访问性：语义化的HTML（结构和表现相分离的HTML）编写的网页文件，更容易被屏幕阅读器识别

  4. 设备兼容性：不同的样式表可以让网页在不同的设备上呈现不同的样式

  5. 搜索引擎：语义化的HTML能更容易被搜索引擎解析，提升排名

二、HTML

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

1. 含义:

    a. 因为它可以加入图片、声音、动画、多媒体等内容（超越文本限制 ）

    b. 不仅如此，它还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接（超级链接文本）。

2. 格式：

实例

<!DOCTYPE html>
<!-- 页面中最大的标签 根标签 -->
<html lang="en">
<!-- 头部标签 -->
  <head>
      <meta charset="UTF-8">     
    <!-- 标题标签 -->
    <title></title> 
  </head>
  <!-- 文档的主体 -->
  <body>
  </body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

说明：

    ● <!DOCTYPE html>

        <!DOCTYPE html>告诉浏览器按照HTML5标准解析页面。

    ● lang

        lang指定该html标签内容所用的语言，en 定义语言为英语 zh-CN定义语言为中文

    ● 字符集

        UTF-8是目前最常用的字符集编码方式

3. HTML标签关系

    ● 嵌套关系：父子级包含关系

    ● 并列关系：兄弟级并列关系

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

4. html常用标签

    a. 排版标签

        ● 标题标签h(h1~h6)

        ● 段落标签p

        ● 水平线标签hr

        ● 换行标签br

    b. 盒子标签

        ● div

        ● span

    c. 图像标签

        ● img

    d. 超链接标签

        ● a

    e. 表格标签

        ● table

            ○ table: 用来定义表格的标签

            ○ tr: 用来定义表格中的行，必须嵌套在<table></table> 标签中

            ○ td: 用来定义表格中的单元格，必须嵌套在<tr></tr> 标签中

            ○ th: 用来定义表格中的表头，表头单元格里面的内容加粗居中显示

        ● 表格结构标签

            ● thead

            ● tbody

        ● 合并单元格

            ○ 跨行合并：rowspan=“合并单元格的个数”

            ○ 跨列合并：colspan="合并单元格的个数"

    f. 列表标签

        ● ul

            无序列表: 里面只能包含li，没有顺序。li里面可以包含任何标签

        ● ol

            有序列表: 里面只能包含li，有顺序

        ● dl

            自定义列表: 里面只能包含dt和dd，dt和dd里面可以放任何标签 

    g. 表单标签

        ● 表单域

            <form></from>标签用于定义表单域，会把它范围内的表单元素信息提交给服务器        

属性 属性值 作用
action url地址 用于指定接收并处理表单数据的服务器程序的url地址
method get/post 用于设置表单数据的提交方式，其取值为get或post
name 名称

用于指定表单的名称，以区分同一个页面中的多个表单域

        ● 表单控件

            ○ input

                input是个单标签，type 属性设置不同的属性用来指定不同的控件类型(文本字段、复选框、单选按钮、按钮等)

属性值 描述
button 按钮
checkbox 复选框
file 文件上传
hidden 隐藏的输入字段
image 图像形式的提交按钮
password 密码字段。该字段中的字符被掩码
radio 单选按钮
reset 重置按钮。重置按钮会清楚表单中的所有数据。
submit 提交按钮。提交按钮会把表单数据发送到服务器。
text 单行的输入字段，用户可在其中输入文本。默认宽度为 20 个字符。
                除 type 属性外，<input> 标签还有很多其他很多属性，其常用属性如下：

属性 属性值 描述
name 由用户自定义 定义 input 元素的名称
value 由用户自定义 规定 input 元素的值
checked checked 规定此 input 元素首次加载时应当被选中
maxlength 正整数 规定输入字段中字符的最大长度
readonly readonly 规定输入字段是只读的。
disabled disabled 规定输入字段是禁用的。
size 正整数 属性规定输入字段的尺寸（以字符计）
        ○ label

            label标签用于绑定一个表单元素，当点击<lable>标签内的文本时，浏览器就会自动将焦点(光标)转到表单元素上，用来增加用户体验label标签的 for属性 应当与相关元素的id 属性相同

        ○ textarea

            用于定义多行文本输入的控件, cols: “每行中的字符数” ， rows:“显示的函数”

        ○ select

            下拉表单元素,<select>中至少包含一对<option>,在<option>中定义 selected="selected" 时，当前项即为默认选中项

        注：

            单选框和复选框要有相同的name值，value可以不一样

    h. 文本格式化标签

        ● b和strong 文字以粗体显示

        ● i和em 文字以斜体显示

        ● s和del 文字以加删除线显示

        ● u和ins 文字以加下划线显示

三、HTML5

    1. 新增语义化标签

        ● < header > :头部标签

        ● < nav >: 导航标签

        ● < article >： 内容标签

        ● < section >:定义文档某个区域

        ● < aside >:侧边栏标签

        ● < footer >: 尾部标签

    2. video

           视频标签

属性 值 描述
autoplay autoplay 视频就绪自动播放(谷歌浏览器需要添加muted来解决自动播放问题)
controls controls 向用户显示播放控件
width pixels(像素) 设置播放器宽度
height pixels(像素) 设置播放器高度
loop loop 播放完是否继续播放该视频,循环播放
preload auto(预先加载视频)none(不应加载视频) 规定是否预加载视频(如果有了autoplay 就忽略该属性)
src url 视频url的地址
poster lmgurl 加载等待的画面图片
muted muted 静音播放

    3. audio

        音频标签

属性 值 描述
autoplay autoplay 音频在就绪后马上播放
controls controls 向用户显示控件，比如播放按钮
loop loop 循环播放
src url 要播放的音频的url

    4. 新增的input类型

属性值（type） 说明
email 限制用户输入必须为Email类型
url 限制用户输入必须为URL类型
data 限制用户输入必须为日期类型
time 限制用户输入必须为时间类型
month 限制用户输入必须为月类型
week 限制用户输入必须为周类型
number 限制用户输入必须为数字类型
tel 手机号码
search 搜索框
color 生成一个颜色选择表单

    5. 新增的表单属性

属性 值 说明
required required 表单拥有该属性表示其内容不能为空，必填
placeholder 用户自定义 表单的提示信息，存在默认值将不显示
autofocus autofocus 自动聚焦属性，页面加载完成自动聚焦到指定表单
autocomplete off/on 当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项，默认已经打开。如autocomplete=“on” ,关闭autocomplete=“off”，需要放在表单内，同时加上name属性，同时成功提交
multiple multiple 可以多选文件提示



上一篇： 定义一个接口和抽象类、对比接口与抽象类的区别与联系

下一篇： 怎样去给PHP数组进行排序（图文详解）

推荐阅读