HTML5
1.1 HTML 介绍
HTML(超文本标记语言)是一种用于 Web 开发的标记语言,主要用来格式化和显示网页内容。可以将其视为一种文本文件,浏览器能够读取该文本文件并显示其中的内容。HTML支持多种元素(也称作标签),例如:使用单标签 插入图片,使用双标签定义HTML文档的起始和结束。借助这些元素,我们可以在网页中嵌入图像、标题、段落等不同的内容,构建起网页的页面。以下是 HTML 的基本骨架: 、是一对双标签,用来标定该 HTML 文档的范围 -->、标签用来包含文档的元数据,即关于网页本身的描述信息。这部分的内容通常不直接显示在网页上 -->用来提供网页的元信息,例如字符集、作者、关键词等。charset="utf-8" 代表网页字符集使用的是 UTF-8 字符集 -->我的网页 、标签定义了网页的标题,即浏览器的标签栏显示的内容 -->、标签包含网页的实际内容,即用户在浏览器中看到和互动的部分。这里包含所有展示内容,如文本、图片等 -->
1.2 标题元素
标题是通过~来定义的,定义最大的标题,用来定义最小的。可以用 h$*6 快捷键直接生成~。 我的网页这是一个一级标题这是一个二级标题这是一个三级标题这是一个四级标题这是一个五级标题这是一个六级标题
示例效果:
每一个元素(标签),都有不同的属性可以设置,例如标题元素的 align 属性,我们可以通过设置 align 属性,来调整标题的位置,这个属性有三个可选的值 left | center | right。 、是一对双标签,用来标定该 HTML 文档的范围 -->、标签用来包含文档的元数据,即关于网页本身的描述信息。这部分的内容通常不直接显示在网页上 -->用来提供网页的元信息,例如字符集、作者、关键词等。charset="utf-8" 代表网页字符集使用的是 UTF-8 字符集 -->我的网页 、标签定义了网页的标题,即浏览器的标签栏显示的内容 -->、标签包含网页的实际内容,即用户在浏览器中看到和互动的部分。这里包含所有展示内容,如文本、图片等 -->这是一个一级标题这是一个二级标题这是一个三级标题这是一个四级标题这是一个五级标题这是一个六级标题
示例效果:
但是在实际应用中,我们一般用 CSS 来调整标题的位置和样式,一般不直接通过该属性来调整标题位置。
1.3 段落、换行、水平线
[object Object] [object Object]
示例代码:
[object Object]这里介绍四个很通用的属性 color="" 设置水平线的颜色 width="" 设置水平线的宽度,单位是像素(px) size="" 设置水平线的高度,单位是像素(px) align="" 设置水平线的位置[object Object] [object Object]
示例效果:
1.4 图片元素
图片是 HTML 中很重要的一个元素(标签),我们使用 来表示图片元素。这个标签有如下几个常用的属性:
src:路径,图片的路径。
alt:规定图像加载失败时的替代文本。
width:图像的宽度。
height:图像的高度。
title:鼠标悬停在图像上时的提示文本信息。
图片路径分为三种:绝对路径、相对路径和网络路径。绝对路径是从根目录开始的完整地址;相对路径通过 . 、… 等符号来表示当前目录或上一级目录的相对关系来定位图片;网络路径则是调用网络上的图片资源。
对应的三个例子:
action:服务器的地址,即用户输入的数据提交到哪里。
name:表单的名称,识别不同的表单就是通过 name 识别的。
method:有 get 和 post 两个值,决定了数据的提交方式。get 提交的数据 url 可以看到,但是 post 提交的数据 url 看不到,get 一般用于提交少量数据,post 一般用来提交大量数据。
表单有三个基本组成部分:表单标签(即 form 的 name)、表单域(输入框)、表单按钮(提交按钮)
我的网页 提交按钮input 的 type 的值:
表单元素 描述
text 文本框
password 密码框,输入的文本不会直接显示
submit 提交,可以通过 value=“ … ” 来改变提交按钮上显示的文本信息
1.8 块元素与行内元素(内联元素)
块元素和内联元素的区别:
块元素 内联元素
独占一行,自上向下排列 不会单独占一行,只占自身的大小
可以设置 width , height 属性 不可以设置 width , height 属性
一般块级元素可以包含行内元素和其他块元素 一般内联元素可以包含内联元素,但包含不了块级元素
div、form、h1~h6、hr、p、table、ul a、b、em、i、span、strong等
但也有一些特例,button、img、input 等,他们是内联元素,他们可以设置 width , height 属性
1.9 div等
容器元素,该元素常用于划分网页的区域,使得我们的网页规划的更加清晰。我们一般配合 CSS 使用来划分网页。div,我们可以想象为一个一个盒子,用这些盒子来规划网页的分区。
div 的通用属性:
id: 指定div元素的唯一标识符。
class: 为div元素添加一个或多个类名,以便应用CSS样式。
lang: 指定div元素中内容的语言。
dir: 定义div元素中内容的文本方向,如ltr(从左到右)或rtl(从右到左)。
title: 提供div元素的提示信息,通常显示为工具提示文本。
data-*: 用于存储与div元素相关的自定义数据。
border:设置表格的边框。
width:设置表格宽度。
height:设置表格的高度。
我的网页 一行一列 一行二列 一行三列 二行一列 二行二列 二行三列 单元格合并:水平合并 colspan ,垂直合并 rowspan 我的网页 合并 6 和 7 格子格子1格子2格子3格子4格子5格子6格子8格子9格子10格子11格子12格子13格子14格子15格子16格子17格子18格子19格子20格子21格子22格子23格子24格子25
1.7 表单
表单是用来给用户填写信息的,是让用户能够输入信息的重要元素。使用来表示。表单由容器和控件组成,例如按钮叫做控件,表单就是容器,它能够容纳各种控件。
表单的属性:
第一行列表
第二行列表
第三行列表
第四行列表
第五行列表
第一行列表
第二行列表
第三行列表
第四行列表
第五行列表
第一行列表
第二行列表
第三行列表
第四行列表
第五行列表
第一行列表
第二行列表
第三行列表
第四行列表
第五行列表
、
绝对路径:/images/photo.jpg(从根目录开始,位于根目录下images文件夹中的photo.jpg图片)
相对路径:…/images/photo.jpg(当前目录的上一级目录下的images文件夹中的photo.jpg图片)
网络路径:https://example.com/images/photo.jpg(从网络地址example.com的images文件夹中调用photo.jpg图片)
1.5 超文本链接、文本
超文本链接 的概念类似于快捷方式,我们可以通过点击超文本链接来快速的跳转到另外一个网站。在超文本链接中最常用的属性是 href 用来描述跳转的地址。当然,超链接的格式也可以是图片等其他格式。 我的网页 百度跳转超链接百度搜索
常用文本标签:
标签(都是双标签) 描述
轻微斜体,用来标记比较重点的文字
粗体
斜体
轻微粗体,一般用来表示加重语气
删除效果
无特殊含义,一般配合 CSS 使用
我的网页 文本标签示例:em效果: 着重文字(轻微斜体效果) b效果: 粗体文字i效果: 斜体文字 strong效果: 加重语气del效果:删除字效果span效果: span文字
文本与段落不同,但是我们可以嵌套使用两者。
1.6 有序列表、无序列表、表格
有序列表用、
、
来表示,拥有 type 属性,该属性用来规定列表的格式:
有序列表用、
、
来表示,也拥有 type 属性:
表格用、来表示,其中行用实现,列用来实现。
表格的属性:
第一行列表
第二行列表
第三行列表
第四行列表
第五行列表
第一行列表
第二行列表
第三行列表
第四行列表
第五行列表
第一行列表
第二行列表
第三行列表
第四行列表
第五行列表
第一行列表
第二行列表
第三行列表
第四行列表
第五行列表
第一行列表
第二行列表
第三行列表
第四行列表
第五行列表
、