HTML5

最新推荐文章于 2024-09-30 21:15:00 发布

造次阿

最新推荐文章于 2024-09-30 21:15:00 发布

阅读量1.3k

点赞数

文章标签： html5 vscode 前端

本文链接：https://blog.csdn.net/Wwd631255/article/details/128456851

版权

第一个前端程序

两步完成一个网页程序

第一步：使用记事本，编写代码

在 E 盘下保存路径 E:/itbaizhan/... , 文件名 Welcome.html

<html>
    <head>
        <title>我的网页</title>
    </head>
    <body>
        Hello，我的第一个网页
    </body>
</html>

注意事项

① 文件后缀名以 .html 结尾

② 在编写代码的过程中， <> 必须是英文状态下编写

第二步：以浏览器方式打开

右键打开方式，以浏览器方式打开即可

前端工具的选择与安装

前端常见开发者工具

工欲善其事必先利其器

浏览器

浏览器是我们最重要的合作伙伴

推荐选择

我们推荐谷歌浏览器，有两点原因：

1. 简洁大方，打开响应速度快

2.开发者调试工具

开发者工具

开发者工具有效的提高了开发效率

推荐选择

我们推荐选择 VSCode

1.打开速度快

2.使用方便

VSCode 中文语言包安装：

扩展 → 搜索 Chinese → 点击安装

VScode 开发者工具快捷键

VSCode打开文件夹与创建文件

1.选择文件夹

2.拖拽文件夹

生成浏览器文件 .html 的快捷方式

！+ 回车

VSCode常用快捷键列表

① 代码格式化： Shift+Alt+F

② 向上或向下移动一行： Alt+Up 或 Alt+Down

③ 快速复制一行代码： Shift+Alt+Up 或 Shift+Alt+Down

④ 快速保存： Ctrl + S

⑤ 快速查找： Ctrl + F

⑥ 快速替换： Ctrl + H

HTML5 简介与基础骨架

HTML5介绍

HTML5是用来描述网页的一种语言，被称为超文本标记语言。用HTML5编写的文件，后缀以 .html 结尾

HTML是一种标记语言，标记语言是一套标记标签。标签是由尖括号包围的关键字，例如： <html>

标签有两种表现形式：

① 双标签，例如： <html></html>

② 单标签，例如： <img>

HTML5 的 DOCTYPE 声明

DOCTYPE 是 document type ( 文档类型 ) 的缩写。 <!DOCTYPE html > 是 H5 的声明位于文档的最前面，处于标签之前。

他是网页必备的组成部分，避免浏览器的怪异模式。

<!DOCTYPE html>

HTML5 基本骨架

html 标签

定义 HTML 文档，这个元素我们浏览器看到后就明白这是个 HTML文档了，所以你的其它元素要包裹在它里面，标签限定了文档的开始点和结束点。

<!DOCTYPE html>
<html>
<html>

head标签

head标签用于定义文档的头部。文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。

<!DOCTYPE html>
<html>
    <head>
    <head>
</html>

body标签

body 元素定义文档的主体。

body 元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等等。）

它会直接在页面中显示出来，也就是用户可以直观看到的内容

<!DOCTYPE html>
<html>
   <head>
   </head>
   <body>
      我会显示在浏览器中
   </body>
</html>

title 标签

① 可定义文档的标题。

② 它显示在浏览器窗口的标题栏或状态栏上。

③ <title> 标签是 <head> 标签中唯一必须要求包含的东西，就是说写 head 一定要写 title

④ <title> 的增加有利于 SEO 优化

● SEO 是搜索引擎优化的英文缩写。通过对网站内容调整，满足搜索引擎的排名需求

<!DOCTYPE html>
<html>
   <head>
       <title>第一个页面</title>
   </head>
   <body>
      我会显示在浏览器中
   </body>
</html>

meta标签

meta标签用来描述一个HTML网页文档的属性，关键词等，例如：charset="utf-8" 是说当前使用的是 utf-8 编码格式，在开发中我们经常会看到 utf-8 ，或是 gbk ，这些都是编码格式，通常使用 utf-8 。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>itbaizhan</title>
    </head>
    <body>
    </body>
</html>

标签之标题

标题介绍与应用

标题（Heading）是通过 <h1> - <h6> 标签进行定义的。

<h1> 定义最大的标题 <h6> 定义最小的标题

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

● 生成h1~h6快捷键：h$*6

VSCode 插件

快速打开浏览器

扩展 -> 搜索 open in browser -> 点击安装

正确使用标题

请确保将 HTML 标题标签只用于标题。

不要仅仅是为了生成粗体或大号的文本而使用标题。

正确使用标题有益于SEO

应该将 < h1> 用作主标题（最重要的），其后是 <h2> （次重要的），再其次是 <h3> ，以此类推

标题标签位置摆放

在标签中添加属性： align="left | center | right" 默认居左

标签之段落、换行、水平线

标签之段落

段落是通过 <p> 标签定义的

<p>这是一个段落 </p>
<p>这是另一个段落</p>

换行

如果您希望在不产生一个新段落的情况下进行换行（新行），请使用 <br>

<br /> 元素是一个空的 HTML 元素。

<p>这个<br>段落<br>演示了分行的效果</p>

水平线

<hr/> 标签在 HTML 页面中创建水平线

<hr color="" width="" size="" align=""/>

属性：

① color：设置水平线的颜色

② width：设置水平线的宽度

③ size：设置水平线的高度

④ align：设置水平线的对齐方式（默认居中），可取值left|right

标签之图片

网站中最多的元素

网站中最多的元素毋庸置疑，一定是图片

<img> 标签定义 HTML 页面中的图像

<img src="" alt="" title="" width="" height="">

注意事项

<img> 是单标签，不需要进行闭合操作

属性：

① src：路径（图片地址与名字）

② alt：规定图像的替代文本

③ width：规定图像的宽度

④ height：规定图像的高度

⑤ title：鼠标悬停在图片上给予提示

图片路径详解

绝对路径

绝对路径是电脑的盘符存储与访问的具体地址

E:\WwdCode\1.jpg

<img src="E:\itbaizhanCode\1.jpg">

相对路径

两者相对关系，两者在同⼀路径下可以直接访问

① 子级关系: /

② 父级关系: ../

③ 同级关系: ./ （可以省略）

网络路径

具体的网络地址: http://iwenwiki.com/api/newworld/images/n1.png

标签之超文本链接

超链接描述

HTML使用标签 <a> 来设置超文本链接

超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档

<a href="url">链接文本</a>

超链接属性

在标签 <a> 中使用了 href 属性来描述链接的地址默认情况下，链接将以，以下形式出现在浏览器中：

① 一个未访问过的链接显示为蓝色字体并带有下划线。

② 访问过的链接显示为紫色并带有下划线。

③ 点击链接时，链接显示为红色并带有下划线。

特别提示

后期我们会通过CSS 样式修改掉这些效果

超链接表现

当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手

标签之文本

常用文本标签

标签	描述
<em>	定义着重文字
<b>	定义粗体文本
<i>	定义斜体字
<strong>	定义加重语气
<del>	定义删除字
<span>	元素没有特定的含义

特别提示

常用文本标签和段落是不同的，段落代表一段文本，而文本标签一般表示文本词汇

列表标签之有序列表

有序列表

有序列表是一列项目，列表项目使用数字进行标记。有序列表始于<ol> 标签。每个列表项始于 <li> 标签。

<ol>
   <li>天行健</li>
   <li>程序员</li>
</ol>

type 属性

<ol> 的属性 type 拥有的选项

① 表示列表项目用数字标号（1,2,3... ）

② a 表示列表项目用小写字母标号（ a,b,c... ）

③ A 表示列表项目用大写字母标号（ A,B,C... ）

④ i 表示列表项目用小写罗马数字标号（ i,ii,iii... ）

⑤ I 表示列表项目用大写罗马数字标号（ I,II,III... ）

有序列表嵌套

列表是可以进行嵌套的

<ol>
    <li>百度</li>
    <li>
       <ol>
            <li>阿里</li>
            <li>京东</li>
       </ol>
    </li>
    <li>今日头条</li>
</ol>

列表标签之无序列表

无序列表实现

无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记

无序列表始于 <ul> 标签。每个列表项始于 <li> 标签。

<ul>
   <li>北京</li>
   <li>上海</li>
</ul>

type属性

<ul> 的属性type 拥有的选项

● disc 默认实心圆

● circle 空心圆

● square 小方块

● none 不显示

无序列表嵌套

列表是可以进行嵌套的

<ul>
   <li>上海</li>
   <li>
       <ul>
           <li>阿里</li>
           <li>京东</li>
       </ul>
   </li>
   <li>北京</li>
</ul>

常见应用场景

① 无序的列表效果

② 导航效果

导航效果

<ul>
   <li>Xiaomi手机</li>
   <li>Redmi 红米</li>
   <li>电视</li>
   <li>笔记本</li>
</ul>

快捷键

快速生成 ul+li 的布局： ul>li*3 （数字根据自己的需要的 li 数量修改）

标签之表格

表格展示效果

表格在数据展示方面非常简单，并且表现优秀

表格组成与特点

行、列、单元格

单元格特点：同行等高、同列等宽。

表格标签

表格： <table>

行： <tr>

单元格( 列 ) ： <td>

<table>
   <tr>
       <td>北京</td>
       <td>上海</td>
   </tr>
   <tr>
       <td>阿里</td>
       <td>京东</td>
   </tr>
</table>

快捷键

快速生成表格结构：table>tr*2>td{单元格}

表格属性

① border：设置表格的边框

② width：设置表格的宽度

③ height：设置表格的高度

表格单元格合并

单元格合并属性

● 水平合并：colspan

● 垂直合并：rowspan

<table border="1" width="500px" height="200px">
   <tr>
       <td colspan="3">单元格1单元格2单元格3</td>
       <td>单元格4</td>
       <td>单元格5</td>
   </tr>
   <tr>
       <td rowspan="2">单元格6-11</td>
       <td>单元格7</td>
       <td rowspan="3">单元格81318</td>
       <td colspan="2" rowspan="2">单元格
9101415</td>
       </tr>
       <tr>
        <td>单元格12</td>
       </tr>
       <tr>
        <td>单元格16</td>
        <td>单元格17</td>
        <td>单元格19</td>
        <td>单元格20</td>
    </tr>
</table>

Form表单

表单在 Web 网页中用来给用户填写信息，从而能采用户信息，使网页具有交互的功能。

所有的用户输入内容的地方都用表单来写，如登录注册、搜索框

表单是由容器和控件组成的,一个表单一般应该包含用户填写信息的输入框,按钮等，这些输入框,按钮叫做控件,表单就是容器,它能够容纳各种各样的控件

<form action="url" method="get|post"

name="myform"></form>

属性说明

● action服务器地址

● name表单名称

method中Get和Post的区别

① 数据提交方式，get把提交的数据url可以看到，post看不到

② get一般用于提交少量数据，post用来提交大量数据

表单元素

一个完整的表单包含三个基本组成部分：表单标签、表单域、表单按钮

① 表单标签

② 表单域

③ 表单按钮

<form>
   <input type="text">
   <input type="submit">
</form>

表单元素

文本框

文本域通过 <input type="text"> 标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域

<form>
  First name: <input type="text"
name="firstname">
   <br>
  Last name: <input type="text"
name="lastname">
</form>

密码框

密码字段通过标签 <input type="password"> 来定义

<form>
  Password: <input type="password" name="pwd">
</form>

● 温馨提示

密码字段字符不会明文显示，而是以星号或圆点替代

提交按钮

当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件，通常会对接收到的输入数据进行相关的处理

1 <form name="input" action="url" method="get">
2   Username: <input type="text" name="user">
3   <input type="submit" value="Submit">
4 </form>

块元素与行内元素（内联元素）

HTML5出现之前，经常把元素按照块级元素和内联元素来区分。在HTML5中，元素不再按照这种⽅式来区分，而是按照内容模型来区分，分为元数据型(metadata content) 、区块型 (sectioning content)、标题型 (heading content) 、文档流型 (flow content) 、语句型(phrasing content) 、内嵌型 (embedded content) 、交互型(interactive content)。元素不属于任何⼀个类别，被称为穿透的，元素可能属于不止⼀个类别，称为混合的。

详细参考地址： https://developer.mozilla.org/zh-CN/docs/Web/ Guide/HTML/Content_categories

虽然到了 HTML5 的版本，元素分类更细致了，但是这对初学者并不友好, 所以我们仍然按照块元素和内联元素做区分，这对我们的布局起到了至关重要的作用

内联元素和块级元素的区别

块级元素	内联元素
块元素会在页面中独占一行（自上向下垂直排列）	行内元素不会独占页面中的一行，只占自身的大小
可以设置width，height属性	行内元素设置width，height属性无效
⼀般块级元素可以包含行内元素和其他块级元素	⼀般内联元素包含内联元素不包含块级元素