前端基础--HTML

最新推荐文章于 2024-04-29 11:06:38 发布

kickmyeyes

最新推荐文章于 2024-04-29 11:06:38 发布

阅读量388

点赞数 3

分类专栏：前端文章标签： html html5

本文链接：https://blog.csdn.net/qq_50048558/article/details/120011713

版权

前端专栏收录该内容

12 篇文章 1 订阅

订阅专栏

一、HTML介绍 & 规范

1.介绍

HTML 指的是超文本标记/标签语言 (Hyper Text Markup Language).
专门制作网页的计算机语言.
超文本的意思是有一些单词或字母，在网页浏览器的世界中被赋予了特殊的权利。

2.记事本开发第一个网页

<html>
	<head>
		<title>第一个网页</title>
	</head>
	<body>
		Hello World!
	</body>
</html>

注意
①< html >标签它代表当前页面是一个HTML
②< head >标签中可以声明HTML页面的相关信息
③< body >标签中它主要是用于显示页面信息
④标签要有开始，有结束，成双成对
⑤开始标签与结束标签中的内容是标签的内容，如果没有标签内容，可以让标签自关闭< br/ >
⑥大多数标签它具有属性,属性值要使用引号引起来。
⑦HTML它本身是不区分大小写的。

二、HTML的使用

1.文件标签

< html >标签：代表当前书写的是一个HTML文档
< head >标签：存储的本页面的一些重要的信息，它不会显示
< head >标签：有一个子标签< title >它是用于定义页面的标题的
< body >标签：书写的内容会显示出来
< body >标签的属性
　● text 用于设置文字颜色
　● bgcolor 用于设置页面的背景色
　● background 用于设置页面的背景图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>第一个网页</title>
</head>
<body text="yellow" bgcolour="black" background="img/2.jpg">
    HelloWorld！
</body>
</html>

2.排版标签

3.HTML注释

<!-- 注释内容 -->

4.换行标签

< br/ > 标签就是一个换行（回车）功能标签，标签中的 / 可有可无的。

<body>
    Hello<br/>
    World<br>
    hello<br/>
    world<br>
</body>

5.段落标签

在< p >标签中的内容,会在开始与结束之间产生一个空白行，并且它会自动换行.
常用属性 align 它的作用是设置段落中的内容对齐方式可取值有 left right center.

<body>
    <p align="left">我</p>
    <p align="center">爱</p>
    <p align="right">你</p>
</body>

6.水平线标签

< hr >标签会在页面上产生一个水平线
对于hr标签它有常用属性:
● align：可取值有left right center 代表水平线位置
● size：代表水平线厚度（粗细）
● width：代表水平线宽度
● color：水平线的颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    我<hr width="50%"/>
    爱<hr color="red" size="10px"/>
    你<hr width="30" align="left"/>
</body>

单位：size=“10px”，10是默认的单位，为"像素"/“像素点”，像素就是构成计算机图片的最小单位！

7.分区标签

div是一个块标签，用来进行布局的.
普通的div并没有什么效果，肉眼也看不见，但div与CSS结合，就会更好对页面进行排版.
div与span都是“容器”的作用，具体区别:
● div会自动换行，我们也叫这样的标签为块级元素
● span标签它不会自动换行，我们也叫它为行内元素
● div：整体划分区块
● span：局部划分

<body>
    <div style="width: 50px;height: 50px;background: green">hello</div>
    <div style="width: 50px;height: 50px;background: red">hello</div>
    <span style="width: 50px;height: 50px;background: blue">hello</span>
    <span style="width: 50px;height: 50px;background: yellow">hello</span>
</body>

8.字体标签

< font >标签可以设置字体，字的大小及颜色，常用属性：
● face:用于设置字体，例如宋体隶书楷体
● size:用于设置字的大小（大小默认设置1-7，7最大）
● color:用于设置字的颜色

每一种颜色的饱和度和透明度都是可以变化的，用0～255的数值来表示。如纯红色表示为（255，0，0），十六进制表示为#FF0000。按这种表达方式，理论上我们可以得到256 * 256 * 256 = 16777216种颜色。

当颜色值为#cc3300 时，可简化成 #c30 这种方式

< body bgcolor="#666">

RGB颜色表示法：RGB（x,y,z）。x、y、z是0 ～ 255之间的整数。rgb字母大小写无所谓

< body bgcolor=“rgb(11,11,11)”>

在线颜色选择器： http://www.86y.org/code/colorpicker/color.html
在线颜色选择器

9.标题标记

给一段文字起一个标题
< h1 > ----- < h6 >
h1最 h6最小，它们代表的是标题，
自动换行，字体加粗，标题与标题之间产生一定的距离
注意:在HTML中允许标签进行嵌套的，但是一般都包裹嵌套，而不可以进行交叉嵌套

<body>
    <h1>标题1号</h1>
    <h2>标题2号</h2>
    <h3>标题3号</h3>
    <h4>标题4号</h4>
    <h5>标题5号</h5>
    <h6>标题6号</h6>
</body>

10.格式化标签

● < b >：字体加粗
● < i >：字体倾斜
● < del >：删除线
● < u >：下划线

<body>
    我爱你<br/>
    <b>我爱你</b><br/>
    <i>我爱你</i><br/>
    <del>我爱你</del><br/>
    <u>我爱你</u><br/>
</body>
</html>

11.列表标记

● ol：有序列表
　type=‘A’：字母排序
　type=‘I’：罗马排序
　start=“3” 序列从几开始
● ul：无序列表
　type=“disc”：默认，实心圆
　type=“square”：方块
　type=“circle”：空心圆

<body>
    <h2>有序列表</h2>
    <ol start="2">
        <li>语文</li>
        <li>数学</li>
        <li>英语</li>
    </ol>
    <ol type="A">
        <li>语文</li>
        <li>数学</li>
        <li>英语</li>
    </ol>
    <ol type="I">
        <li>语文</li>
        <li>数学</li>
        <li>英语</li>
    </ol>

    <hr/>
    <h2>无序列表</h2>
    <ul>
        <li>语文</li>
        <li>数学</li>
        <li>英语</li>
    </ul>
    <ul type="circle">
        <li>语文</li>
        <li>数学</li>
        <li>英语</li>
    </ul>
</body>

12.图像标签

< img >它可以让我们在网页引入一张图片，常用属性：
1.src 代表的图片的路径
2.width 图片的宽度
3.height 图片的高度
4.border 用于设置图片的边框
5.alt 如果图片不可以显示时，默认显示的文本信息
6.title鼠标悬停图片上，默认显示的文本信息
7.align 图片附件文字的对齐方式，可取值有
　● left：把图像对齐到左边
　● right：把图像对齐到右边
　● middle：把图像与中央对齐
　● top：把图像与顶部对齐
　● bottom：把图像与底部对齐（默认）

<body>
    图片
    <img src="img/1.jpg" width="400px" height="300px" border="5px" alt="图片加载失败" title="动漫" align="middle"/>
</body>

13.超连接标签

< a >标签,可以实现跳转到其它页面操作.
超链接内容不仅可以是文本，也可以是图片等信息
常用属性:
● href 代表的我们要跳转的路径
● target 这个属性规定在何处打开这个链接文档，可取值：
　　_ blank 在新窗口中打开页面
　　_ self 默认。在本窗口打开页面

<body>
    <!-- 跳转到互联网上资源需要补全http:// 协议部分 -->
    <a href="http://www.baidu.com">百度</a>
    <!-- 跳转本地资源 -->
    <a href="01 test.html">第一个网页</a>
    <!-- 发邮件 -->
    <a href="mailto:123456789@qq.com">发送邮件</a>
    <!-- QQ聊天窗口 -->
    <a href="tencent://message/?uin=123456789&Menu=yes">
        <img border="0" src="http://wpa.qq.com/pa?p=1:615050000:7"/>
    </a>        
</body>

14.表格

< table >：定义一个表格
● border：边框，取值是像素为单位
● width 代表的表格的宽度
● align 代表表格的对齐方式；取值
　left 左对齐表格
　right 右对齐表格
　center 居中对齐表格
● cellspacing：单元格间距（通常设置0表示单线表格）
< tr >：表格中的行（Table Row）
● align 代表表格的对齐方式；取值
　left 左对齐内容（默认值）
　right 右对齐内容
　center 居中对齐内容（th 元素的默认值）
< td >：表格中的数据单元格（Table DataCell）
　colspan 指示列的合并
　rowspan 指示行的合并

<body>
    <table border="1" width="400px" align="center" cellspacing="0">
        <tr align="center">
            <td colspan="3">1</td>
        </tr>
        <tr>
            <td rowspan="3">4</td>
            <td>5</td>
            <td>6</td>
        </tr>
        <tr>
            <td>8</td>
            <td>9</td>
        </tr>
        <tr>
            <td>11</td>
            <td>12</td>
        </tr>
    </table>
</body>

15.表单标签

表单可以让我们将录入信息携带到服务器端。
简单说，通过表单可以将要提交的数据提交到指定的位置。
但一个一个的提交，不方便。表单正好解决了这个问题，将所有的数据形成一个整体，一起提交给服务器。
form属性
● action：整个表单提交的目的地
● method：表单提交的方式
　　get：提交时，传输数据量少（传递普通文字信息，传递照片会失败），明文提交（在浏览器的url后面会显示提交的数据，不适合用于登录）
　　post：提交时，传输数据量大（传递文字和图片都行），密文提交（浏览器的url后面看不到提交的数据）

16.表单中的元素(控件)

● < input >元素的type属性
　text：默认值，普通的文本输入框
　　　placeholder属性：提示文本
　　　maxlength属性：最多能输入字符数量
　password：密码输入框
　checkbox：多选框/复选框
　　　checked：被选中
　radio：单选按钮
　file：上传文件
　reset：重置按钮
　submit：提交按钮
　button：普通按钮
● < select >：下拉列表/下拉框
　< option >：列表中的项
　　　selected：被选中
● < textarea >：文本域（多行文本框）
　可以通过 cols 和 rows 属性来规定 textarea 的尺寸，不过更好的办法是使用 CSS 的height和 width 属性。
● < button >：按钮
　在form表单中，作用和submit一样
　不在form表单中，就是普通按钮（配合后期的javascript，可扩展性更高）

<body>
    <form>
        <p>账号：<input type="text" placeholder="请输入账号..." maxlength="5"></p>
        <p>密码：<input type="password"></p>
        <p>爱好：
            <input type="checkbox" name="hobby" checked="checked">蓝球
            <input type="checkbox" name="hobby">足球
            <input type="checkbox" name="hobby">网球
        </p>
        <p>性别：
             <input type="radio" name="sex" checked="checked">男
             <input type="radio" name="sex">女
        </p>
        <p>
            头像：<input type="file">
        </p>
        <p>
            血型：
            <select>
                <option>A</option>
                <option>B</option>
                <option selected="selected">O</option>
            </select>
        </p>
        <p>个人简介：
            <textarea cols="10" rows="5"></textarea>
        </p>
        <p>
            <input type="reset" value="清空">
            <input type="submit" value="提交">
            <input type="button" value="取消">
            <button>保存</button>
        </p>
    </form>
    <button>测试</button>
</body>

注意事项：
1.所有表单中的元素都要具有名称（否则提交到服务器之后，服务器无法区识别多个元素之间的不同）
2.单选框要想可以一次只选择一个，要具有相同的name值
3.所有的复选框以组为单位，组内的每个复选框都应该具有相同的name值

17.框架标签

通过< frameset >和< frame >框架标签可以定制HTML页面布局。可以理解为：用多个页面拼装成一个页面。
注意，框架标签和body标签不共存。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
    <frameset rows="15%,*,20%">
        <frame src="top.html"></frame>
        <frameset cols="20%,*">
            <frame src="left.html"></frame>
            <frame src="right.html"></frame>
        </frameset> 
        <frame src="foot.html"></frame>
    </frameset>
</html>

18.其它标签与特殊字符

< meta >标签

< meta >标签必须写在< head >标签之间.

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">

1.当前页面的字符编码 gbk：中文简体
2.这里的名字是 viewport （显示窗口），数据是文本内容 content=“width=device-width, initial-scale=1.0”，也就是显示窗口宽度是客户端的屏幕宽度（就是满屏！），显示的文字和图形的初始比例是1.0
3.每个电脑内置的IE版本是不一样的，为了兼容所有的版本以最高级模式渲染文档，也就是任何IE版本都以当前版本所支持的最高级标准模式渲染
● 通过meta标签来设置页面加载后在指定的时间后跳转到指定的页面

<meta http-equiv="refresh" content="5; url=http://www.baidu.com">

注意：在html中如果跳转的互联网上的网站资源，那么我们在书写路径时，一定要带协议的路径。

< link >标签

使用link标签来导入css
注意:link标签也必须写在< head >标签中。

特殊字符

特殊字符-1 特殊字符-2

三、HTML5新特性

1.大小写不敏感
　① 标签
　② 属性
　③ 属性的值

<inPUT tYPe="pasSWord"/>

2.引号可以省略

<input type="password">
<input type=password>

3.省略了结尾标签

<p>哈哈哈哈哈哈哈

其实运行起来，查看源代码，html是自动帮我们补全了

1.新增语义化标签

html4中，所有的容器标签95%都会使用div，div过多的话，很难区分彼此
新增许多语义化标签，让div“见名知意”
● section标签：表示页面中的内容区域，部分，页面的主体部分
● article标签：文章
● aside标签：文章内容之外的，标题
● header标签：头部，页眉，页面的顶部
● hgroup标签：内容与标题的组合
● nav标签：导航
● figure标签：图文并茂
● foot：页脚，页面的底部

2.媒体标签

想在网页上播放视频，就要使用< video >，属性有：
● src：媒体资源文件的位置
● controls：控制面板
● autoplay：自动播放（谷歌失效，360浏览器可以）
● loop：循环播放

<video src="img/123456.mp4" controls loop autoplay></video>

3.新增表单控件

表单的控件更加丰富了
< input >，修改type属性：
● color：调色板
● date：日历
● month：月历
● week：周历
● number：数值域
　　min：最小值（默认值是1）
　　max：最大值（默认值无上限）
　　step：递增量
● range：滑块
● search：搜索框（带×号，可一键删除框中内容）
● 进度条< progress/ >
● 高亮< mark >
● 联想输入框< datalist > （模糊查询）
　　选项< option >

<body>
    <h1>我<mark>爱</mark>你</h1>
    <input list="cities">
    <datalist id="cities">
        <option>北京</option>
        <option>上海</option>
        <option>苏州</option>
    </datalist>
    <form action="">
        <input type="color"><br/>
        <input type="date"><br/>
        <input type="month"><br/>
        <input type="week"><br/>
        <input type="number" min="10" max="20" step="2"><br/>
        <input type="range"><br/>
        <input type="search"><br/>
        <progress></progress>
    </form>
</body>

kickmyeyes

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
前端基础--HTML

一、HTML介绍 & 规范1.介绍HTML 指的是超文本标记/标签语言 (Hyper Text Markup Language).专门制作网页的计算机语言.超文本的意思是有一些单词或字母，在网页浏览器的世界中被赋予了特殊的权利。2.记事本开发第一个网页<html> <head> <title>第一个网页</title> </head> <body> Hello World! </body>
复制链接

扫一扫