JavaWeb-HTML详解

最新推荐文章于 2024-05-19 14:33:54 发布

憨憨老婆伍

最新推荐文章于 2024-05-19 14:33:54 发布

阅读量1.3k

点赞数 1

分类专栏： LAGOU课程文章标签： html

本文链接：https://blog.csdn.net/hwinte/article/details/107819560

版权

LAGOU课程专栏收录该内容

19 篇文章 0 订阅

订阅专栏

1 HTML介绍&规范
1.1 介绍
HTML指的是超文本标记/标签语言(Hyper Text Markup Language)
专门制作网页的计算机语言
普通的文本就是英文单词，英文字母一样的存在
超文本的意思是有一些单词或字母，在网页浏览器中被赋予了特殊的权利
1.2 使用记事本开发第一个网页
在这里插入图片描述

注意：
1 < html >标签代表当前页面是一个HTML
2 < head >标签中可以声明HTML页面的相关信息
3 < body >标签中它主要是用于显示页面信息
4 标签要有开始，有结束，成双成对
5 开始标签与结束标签中的内容是标签的内容，如果没有标签内容，可以让标签自关闭
6 大多数标签它具有属性，属性值要使用引号引起来
7 HTML它本身是不区分大小写的

1.3 VSCode

2 HTML的使用
2.1 文件标签
< html >标签：代表当前书写的是一个HTML文档
< head >标签：存储的本页面的一些重要的信息，它不会显示
< head >标签：有一个子标签< title >，它是用于定义页面的标题的
< body >标签：书写的内容会显示出来
< body >标签的属性
(1)text用于设置文字颜色–属性的值单引双引皆可
(2)bgcolor用于设置页面的背景色
(3)backgroud用于设置页面的背景图片
在这里插入图片描述
2.2 排版标签
2.2.1 HTML注释

运行结果不会显示注释

2.2.2 换行标签
br标签就是一个换行(回车)功能标签

有斜杠/是html语言的标准化，到那时html不是一个那么严谨的语言
2.2.3 段落标签
在< p >标签中的内容，会在开始与结束之间产生一个空白行，并且它会自动换行。
常用属性align 它的作用是设置段落中的内容对齐方式可取值有left right center

<!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>
    
    <p>我爱你中国！</p>
    <p>我爱你中国！</p>
    <p>我爱你中国！</p>

</body>
</html>

运行结果为：
在这里插入图片描述

<!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>
    
    <p>我爱你中国！</p>
    <p align="center">我爱你中国！</p>
    <p align="right">我爱你中国！</p>

</body>
</html>

在这里插入图片描述
2.2.4 水平线标签
< hr >标签会在页面上产生一个水平线
对于hr标签它有常用属性：
algn：可取值有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 color="red" width="50%">
    狗
    <hr color="blue" size="10px">  <!--px像素-->
    网
    <hr width="30%" align="left">

</body>
</html>

在这里插入图片描述
2.2.5 分区标签
div是一个块标签，用来进行布局的
普通的div并没有什么效果，肉眼也看不见，但div与CSS结合，就会更好对页面进行排版
div与span都是容器的作用，具体区别：
（1）div会自动换行，我们也叫这样的标签为块级元素
（2）span标签它不会自动换行，我们也叫它行内元素
（4）div：整体划分区块
（5）span：局部划分

<!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>
    
    <div style="width:100px; height:100px; background:pink">hello</div>
    <div style="width:100px; height:100px; background:blue">hello</div>

</body>
</html>

运行结果为：
在这里插入图片描述
2.3 字体标签
2.3.1 字体标签
< font >标签可以设置字体，字的大小及颜色，常用属性：
face：用于设置字体，例如宋体隶书楷体
size：用于设置字的大小（大小默认设置1-7,7最大，想更大，往后学css即可）
color：用于设置字的颜色
注：
我们所看到的屏幕上所有的颜色都是由红、绿、蓝这三种基色调混合而成的。
每一种颜色的饱和度和透明度都是可以变化的，用0～255的数值来表示。如纯红色表示为（255，0， 0），十六进制表示为#FF0000。按这种表达方式，理论上我们可以得到256 * 256 * 256=16777216种颜色。
颜色的划分：
（1）使用十六进制方式，取值范围#000000~#FFFFFF(黑色到白色)，当颜色值为#cc3300时，可简化为#c30这种方式

<body bgcolor="#666">

（2）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

<!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>
    
    <font face="隶书" size="7" color="red">就让鲜血染红最美的花</font>
    <hr>
    <font face="楷体" size="7" color="666fff">洒在我的胸膛上</font>

</body>
</html>

效果为：
在这里插入图片描述
2.3.2 标题标记
给一段文字起一个标题
< h1 >=》< h6 >
h1最大，h6最小，他们代表的是标题
自动换行，字体加粗，标题与标题之间产生一定的距离
注意：在HTML中允许进行标签进行嵌套的，但是一般都是包裹嵌套，而不可以进行交叉嵌套

<!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>
    
    <h1>我是标题1</h1>
    <h2>我是标题2</h2>
    <h3>我是标题3</h3>
    <h4>我是标题4</h4>
    <h5>我是标题5</h5>
    <h6>我是标题6</h6>

</body>
</html>

在这里插入图片描述
2.3.3 格式化标签
< b >：字体加粗
< i >：字体倾斜
< del >：删除线
< u >：下划线

<!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>
    
    拉勾网！<br>
    <b>拉勾网！</b><br>
    <i>拉勾网！</i><br>
    <del>拉勾网！</del><br>
    <u>拉勾网！</u><br>

</body>
</html>

在这里插入图片描述
2.4 列表标记
ol：有序列表
type=“A”：字母排序
type=“I”：罗马排序
start="3"序列从几开始
ul：无序列表
type=“disc”：默认，实心圆
type=“square”：方块
type=“circle”：空心圆

<!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>
    <h2>有序列表</h2>
    <ol>
        <li>辣子鸡丁</li>
        <li>打卤面</li>
        <li>山西油泼面</li>
        <li>锅包肉</li>
    </ol>

    <ol type="A">
        <li>辣子鸡丁</li>
        <li>打卤面</li>
        <li>山西油泼面</li>
        <li>锅包肉</li>
    </ol>

    <ol type="I">
        <li>辣子鸡丁</li>
        <li>打卤面</li>
        <li>山西油泼面</li>
        <li>锅包肉</li>
    </ol>

    <ol start="2">
        <li>辣子鸡丁</li>
        <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>

    <ul type="square">
        <li>西红柿鸡蛋</li>
        <li>西红柿鸡蛋</li>
        <li>西红柿鸡蛋</li>
    </ul>
</body>
</html>

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

<!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>
    
    多甜蜜！
    <img src="img/1.jpg" width="400px" height="300px" border="10px">

</body>
</html>

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

<!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>
    
    <!--跳转到互联网上的资源 需要补全http://，这是协议部分-->
    <a href="http://lagou.com" target="_blank">去求职</a>
    <!--跳转到本地资源文件-->
    <a href="图片标签.html" target="_blank">去第一个页面</a>
    

</body>
</html>

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

<!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>4行三列的表格</title>
</head>
<body>
    
    <table border="1" width="400px" align="center" cellspacing="0">

        <tr align="center">
            <td colspan="3">粘度流体特性</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>
</html>

在这里插入图片描述
2.8 表单标签
表单可以让我们将录入信息携带到服务器端
简单说，通过表单可以将要提交的数据提交到指定的位置
但一个一个的提交，不方便，表单正好解决了这个问题，将所有的数据形成一个整体，一起提交给服务器。
常见的登录页面、注册页面都离不开表单的应用
2.8.1 form属性
action：整个表单提交的目的地
method：表单提交的方式
=》get：提交时，传输数据量少（传递普通文字信息，传递照片会失败），明文提交（在浏览器的url后面会显示提交的数据，不适合用于登录）
=》post：提交时，传输数据量大（传递文字和图片都行），密文提交（浏览器的url后面看不到提交的数据）
2.8.2 表单中的元素（控件）
< input >元素的type属性
=》text：默认值，普通的文本输入框
（1）placeholder属性：提示文本
（2）maxlength属性：最多能输入字符数量
=》password：密码输入框
=》checkbox：多选框/复选框
（1）checked：被选中
=》radio：单选按钮
=》file：上传文件
=》reset：重置按钮
=》submit：提交按钮
=》button：普通按钮
< select >：下拉列表/下拉框
=》< option>：列表中的项
==》selected：被选中
< textarea >：文本域（多行文本框）
=》可以通过cols和rows属性来规定textarea 的尺寸，不过更好的办法是使用CSS的height和width属性。
< button >：按钮
=》在form表单中，作用和submit一样
=》不在form表单中，就是普通按钮（配合后期的javascript，可扩展性更高）

<!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>
    
    <form action="http://www.baidu.com">

        <p>账号：<input type="text" placeholder="请输入账号"></p>
        <p>密码：<input type="password" placeholder="请输入密码"></p>
        <p>爱好：
            <input type="checkbox">抽烟
            <input type="checkbox" checked="checked">喝酒
            <input type="checkbox">烫头
            <input type="checkbox">泡澡
        </p>
        <p>性别：
            <input type="radio" name="sex">男
            <input type="radio" name="sex">女
        </p>
        <p>身份：
            <input type="radio" name="role">ceo
            <input type="radio" name="role">cto
            <input type="radio" name="role">coo
            <input type="radio" name="role">ufo
        </p>
        <p>头像：
            <input type="file">
        </p>
        <p>个人简介：
            <textarea cols="10"></textarea>
        </p>
        <p>
            <select>
                <option>A型</option>
                <option>B型</option>
                <option>C型</option>
                <option selected="selected">O型</option>
            </select>
        </p>
        <p>
            <input type="reset" value="清空">
            <input type="submit" value="提交">
            <input type="button" value="取消">
            <button>保存</button>
        </p>
    </form>
</body>
</html>

在这里插入图片描述
注意事项：
（1）所有表单中的元素都要具有名称（否则提交到服务器之后，服务器无法去识别多个元素之间的不同）
（2）单选框要想可以一次选择一个，要具有相同的name值
（3）所有的复选框以组为单位，组内的每个复选框都应该具有相同的name值
2.9 框架标签
通过< 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="10%,*,13%">

    <frame src="top.html"></frame>
    <frameset cols="15%,*">
        <frame src="left.html"></frame>
        <frame src="right.html"></frame>
    </frameset>
    <frame src="foot.html"></frame>

</frameset>
</html>

top.html

<!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>
    <h1>顶部奋斗区</h1>
</body>
</html>

2.10 其他标签和特殊字符
2.10.1< 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.lagou.com">

注意：在html中如果跳转的互联网上的网站资源，那么我们在书写路径时，一定要带协议的路径
2.10.2 < link >标签
后面我们会使用link标签来导入css
注意：link标签也必须写在< head >标签中
2.10.3 特殊字符
在这里插入图片描述

3 HTML5新特性
3.1 HTML4与HTML5的区别
H5包含H4
1 大小写不敏感
（1）标签
（2）属性
（3）属性的值

<inPUT tYPe="pasSWord"/>

2 引号可以省略

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

3 省略了结尾标签（帮你补全）

<p>哈哈哈

3.2 新增语义化标签（让大家见名知意）
html4中，所有的容器标签95%都会使用div，div过多的话，很难区分彼此
=》section标签：表示页面中的内容区域，部分，地区
=》article标签：文章
=》aside标签：文章内容之外的标题
=》header标签：头部，页眉，页面的顶部
=》hgroup标签：内容与标题的组合
=》nav标签：导航
=》figure标签：图文并茂
=》foot：页脚，页面的底部
3.3 媒体标签
想在网页上播放视频，就要使用< video >，属性有：
src：媒体资源文件的位置
controls：控制面板
autoplay：自动播放
loop：循环播放
3.4 新增表单控件
表单的控件更丰富了
< input >：修改type属性；
=》color：调色板
=》date：日历
=》month：月历
=》week：周历
=》number：数值域
==》min：最小值（默认值是1）
==》max：最大值（默认值无上限）
==》step：递增量
=》range：滑块
=》search：搜索框
进度条< progress/ >
高亮< mark >
联想输入框< datalist >（模糊查询）
=》选项< option >

<!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>
    <form>
        <h1>我<mark>爱你</mark></h1>

        <input list="citys">
        <datalist id="citys">
            <option value="北京"></option>
            <option value="南京"></option>
            <option value="上海"></option>
        </datalist>

        <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>
</html>

在这里插入图片描述

憨憨老婆伍

关注

1
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
JavaWeb-HTML详解

1 HTML介绍&规范1.1 介绍HTML指的是超文本标记/标签语言(Hyper Text Markup Language)专门制作网页的计算机语言普通的文本就是英文单词，英文字母一样的存在超文本的意思是有一些单词或字母，在网页浏览器中被赋予了特殊的权利1.2 使用记事本开发第一个网页注意：1 < html >标签代表当前页面是一个HTML2 < head >标签中可以声明HTML页面的相关信息3 < body >标签中它主要是用于显示页面
复制链接

扫一扫

专栏目录