1_Html

V2AS问路

1_Html

阅读原文时间：2023年07月09日阅读：7

一. 引言

1.1 HTML概念

网页, 是网站中的一个页面, 是构成网站的基本元素, 是承载各种网站应用的平台. 通俗的说, 网站就是由网页组成的, 通常我们看到的网页都是以html或html后缀结尾的文件, 俗称HTML文件

1.2 HTML5

目前网页常用
提供了一些新的元素和一些有趣的新特性, 同时也建立了一些新的规则. 这些元素, 特性和规则的建立提供了许多新的网页功能, 如使用网页实现动态渲染图形, 图表, 图像和动画, 以及不需要安装任何插件直接使用网页播放视频等
优势:
- 世界知名浏览器厂商对HTML5的支持
  - 微软, Google, 苹果, Opera, Mozilla
- 市场的需求
- 跨平台

1.3 W3C标准

W3C
- World Wide Web Consortium(万维网联盟)
- 成立于1994年, Web技术领域最权威和具影响力的国际中立性技术标准机构
- http://www.w3.org/
- http://www.chinaw3c.org/
W3C标准包括
- 结构化标准语言
  - HTML, XML
- 表现标准语言
  - CSS
- 行为标准
  - DOM, ECMAScript

二. HTML简介

2.1 什么是HTML

HTML全称: Hyper Text Markup Language(超文本标记语言)
- 超文本: 包括文字, 图片, 音频, 视频, 动画等
- 标记: 标签, 不同的标签实现不同的功能
- 语言: 人与计算机的交互工具

2.2 HTML能做什么

HTML使用标记标签来描述网页, 展示信息给用户

2.3 HTML书写规范

HTML标签是以尖括号包围的关键字
HTML标签通常是成对出现的, 有开始就有结束
HTML通常都有属性, 格式: 属性="属性值"(多个属性之间空格隔开)
HTML标签不区分大小写, 建议全小写

2.4 IDEA快捷键

生成注释: Ctrl + Shift + / 或者 Ctrl + /
生成标签: Tab

三. HTML基本标签

3.1 结构标签

<html>: 根标签
    <head>: 网页头标签
        <title>: 网页的标题</title>
    </head>
    <body>: 网页正文</body>
</html>


<body text="#f00"></body> text: 设置网页正文中所有文字的颜色
<body bgcolor="#00f"></body> bgcolor:设置网页的背景色
<body background="1.png"></body> background:设置网页的背景图

颜色的表示方式:
- 方式一: 用表示颜色的英文单词, 例: red, green, blue
- 方式二: 用16进制表示颜色, 例: #000000, #ffffff, #325687, #377405
文件路径
- ./ 表示当前目录下
- ../ 表示父目录
- / 表示根目录

3.2 排版标签

可用于实现简单的页面布局
注释标签: < !--注释-->
换行标签: < br>
段落标签: < p>文本文字< /p>
- 特点: 段与段之间有空行
- 属性: align对齐方式(left, center, right)
水平线标签: < hr/>
- 属性:
  - width: 水平线的长度(两种: 第一种, 像素表示; 第二种, 百分比表示)
  - size: 水平线的粗细(像素表示, 例如: 10px, 或者数字表示)
  - color: 水平线的颜色
  - align: 水平线的对齐方式
换
行

段落1

段落2

段落3

3.3 块标签

使用CSS+DIV是目前流行的一种布局方式
块标签
- 无论内容有多少, 该标签独占一行
- (p, h1-h6…)
行内标签
- 内容撑开宽度, 左右都是行内标签的可以排在一行
- (a, strong, em…)

3.4 基本文字标签

font标签处理网页中文字的显示方式

用于设置字体的大小, 最小1号, 最大7号
用于设置字体的颜色
>用于设置字体的样式

3.5 文本格式化标签

使用标签实现标签的样式处理

粗体

加粗

强调字体

斜体

小号字体

大号字体

5²(上标)

H₂O(下标)

~~删除线~~

3.6 标题标签

随着数字增大字体逐渐变小, 字体是加粗的, 内置字号, 默认占据一行

h1标题(最大)

h2标题

h3标题

h4标题

h5标题

h6标题(最小)

3.7 列表标签(清单标签)

无序列表: 使用一组无序的符号定义, < ul>< /ul>

无序列表
- 无序列表
- 无序列表
- 无序列表
- 空心圆
- 实心圆
- 黑色方块
有序列表: 使用一组有序的符号定义, < ol>< ol>

有序列表
1. 有序列表
2. 有序列表
3. 有序列表
1. 数字类型
1. 大写字母类型
1. 小写字母类型
1. 大写古罗马
1. 小写古罗马
嵌套列表: 无序列表与有序列表相互嵌套使用
- 嵌套列表

自定义列表

语言

3.8 图形标签

在页面指定位置处引入一幅图片, < img>

src: 引入图片的地址
alt: 提示信息, 如果图片未能正确显示, 则显示提示信息
title: 鼠标悬停图片上提示的信息
width: 图片的宽度
height: 图片的高度
border: 图片的边框
align: 与图片对齐显示方式
hspace: 在图片左右设定空白
vspace: 在图片的上下设定空白

前一行
前面的文字后面的文字
后一行

3.9 链接标签

href: 在页面中使用链接标签跳转到另一页面
- 标签: < a href="">< /a>
- 属性: href跳转页面的地址(跳转到外网需要添加协议)
target属性: 设置跳转页面时的页面打开方式
- _blank在新窗口打开
- _self在原窗口打开
锚链接: 跳转到指定位置
- 定义位置: < a name="名称">< /a>, 使用name作为标记
- 指向: < a href="#名称">< /a>, #+name属性值跳转到name标记所在位置
功能链接:
- 邮件链接: < a href="mailto:邮箱">点击联系我< /a>
- qq链接: 把跳转链接href中和图片标签src中的qq号换成真实的即可
顶部跳转到另一个页面

中部

回到顶部

回到中部

3.10 表格标签

普通表格 (table, tr(行), td(列))

第一列第二列第三列

第一列第二列第三列
表格的列标签(th): 内容有加粗和居中效果

第一列第二列第三列

第一列第二列第三列
表格的列合并属性(colspan): 在同一行内同时合并多个列
表格的行合并属性(rowspan): 在同一列内同时合并多个行

第一列第二列第三列

第一列	第二列	第三列
第一列	第二列	第三列

3.11 媒体标签

<!--音频和视频
音频: audio
视频: video
src: 资源路径
controls: 控制条
autoplay: 自动播放
-->
<video src="./resource/video/min.mp4" controls autoplay></video>

<audio src="./resource/audio/Empire%20Of%20Angels.mp3" controls autoplay></audio>

3.12 页面结构分析

header: 标记头部区域的内容(用于页面或页面中的一块区域)
footer: 标记脚部区域的内容(用于页面或页面中的一块区域)
section: Web页面中的一块独立区域
article: 独立的文章内容
aside: 相关内容或应用(常用于侧边栏)
nav: 导航类辅助内容

网页头部

网页主体

网页脚部

四. 综合案例

<!--表格table
行tr
列td
-->
<table border="1">
    <tr>
        <!--colspan 跨列-->
        <th colspan="3">学生成绩</th>
    </tr>
    <tr>
        <!--rowspan 跨行-->
        <td rowspan="3">张三</td>
        <td>语文</td>
        <td>100</td>
    </tr>
    <tr>
        <td>数学</td>
        <td>100</td>
    </tr>
    <tr>
        <td>英语</td>
        <td>100</td>
    </tr>
    <tr>
        <!--rowspan 跨行-->
        <td rowspan="3">李四</td>
        <td>语文</td>
        <td>100</td>
    </tr>
    <tr>
        <td>数学</td>
        <td>100</td>
    </tr>
    <tr>
        <td>英语</td>
        <td>100</td>
    </tr>
</table>

五. html表单标签

html表单用于收集不同类型的用户输入数据

5.1 form元素常用属性

action表示动作, 值为服务器的地址, 把表单的数据提交到该地址上处理
method请求方式: get和post
- get:
  - 地址栏: 请求参数都在地址后拼接path?name="张三"&password="123456"
  - 不安全
  - 效率高
  - get请求大小有限制, 不同浏览器有不同, 但是大约是2KB; 一般情况用于查询数据
- post:
  - 地址栏: 请求参数单独处理
  - 安全可靠些
  - 效率低
  - post请求大小理论上无限; 一般用于插入删除修改等操作
enctype: 表示是表单提交的类型
- 默认值: application/x-www-form-urlencoded 普通表单
- multipart/form-data 多部分表单 (一般用于文件上传)

5.2 input元素

作为表单中的重要元素, 可根据不同type值呈现为不同状态

单行文体框:
密码框:
单选按钮: 男女
多选框:
日期框:
时间框:
日期和时间框:
电子邮件输入:
数值输入:
文件上传:
隐藏域:
取值范围:
取色按钮:

表单提交按钮:
普通按钮:
重置按钮:
图片提交按钮:

5.3 select元素(下拉列表)

单选下拉列表: < select>< /select>
默认选中属性: selected

学历:
多选下拉列表属性: < select>< /select>
多选列表: multiple="multiple"

5.4 textarea元素(文本域)

多行文本框: < textarea cols="列" rows="行">< /textarea>

HTML 学习

5.5 表单初级验证

常用方式
- placeholder: 提示信息
- required: 非空判断
- pattern: 正则表达式 (网址: )
用户:

自定义邮箱:

5.6 综合案例

<h1>注册</h1>
<!--表单form
action: 表单提交的位置, 可以是网站, 也可以是请求处理地址
method: post, get 提交方式
    get: 可以在url中看到我们提交的信息, 不安全, 高效
    post: 比较安全
-->
<form action="1.我的第一个网页.html" method="get">

<!--    1. 文本输入框: text
        value="用户名" 默认初始值
        maxlength="8" 最长写入字符个数
        size="30"     文本框长度
        readonly      只读
        disabled      禁用
        hidden        隐藏
-->
    <p>用户:
        <input type="text" name="username" placeholder="请输入用户名" required>
    </p>

<!--    2. 密码框: password-->
    <p>密码:
        <input type="password" name="pwd" placeholder="请输入密码">
    </p>

<!--    3. 单选框: radio
        value: 单选框的值
        name: 表示组
        checked: 默认选项
-->
    <p>性别:
        <input type="radio" name="sex" value="male" checked>男
        <input type="radio" name="sex" value="female">女
    </p>

<!--    4. 多选框 checkbox
        checked: 默认选项
-->
    <p>爱好:
        <input type="checkbox" name="hobby" value="study">学习
        <input type="checkbox" name="hobby" value="music">音乐
        <input type="checkbox" name="hobby" value="movie" checked>电影
        <input type="checkbox" name="hobby" value="sport">运动
    </p>

<!--    5. 普通按钮 button-->
    <p>
        <input type="button" name="btn1" value="按钮">
    </p>

<!--    6. 图片按钮 image-->
    <p>
<!--        <input type="image" src="./resource/image/001.png">-->
    </p>

<!--    7. 文件域 file-->
    <p>
        <input type="file" name="files">
        <input type="button" name="upload" value="上传">
    </p>

<!--    8. 下拉框 select
        multiple: 多行显示
        size: 显示几行
        selected: 默认选项
-->
    <p>国家:
        <select name="country">
            <option value="US">美国</option>
            <option value="China" selected>中国</option>
            <option value="UK">英国</option>
            <option value="GM">德国</option>
        </select>
    </p>

<!--    9. 文本域 textarea
        cols: 列的数量
        rows: 行的数量
-->
        <p>
            <textarea name="textarea" cols="20" rows="5" placeholder="请输入内容"></textarea>
        </p>

<!--    10. 邮件 email-->
    <p>邮箱:
        <input type="email" name="email" placeholder="请输入邮箱">
    </p>

<!--    11. 网址 url-->
    <p>网址:
        <input type="url" name="url" placeholder="请输入网址">
    </p>

<!--    12. 数字 number-->
    <p>分数:
        <input type="number" name="number" max="100" min="0" step="1" placeholder="请输入分数">
    </p>

<!--    13. 滑块 range-->
    <p>音量:
        <input type="range" name="range" max="100" min="0" step="2">
    </p>

<!--    14. 搜索 search-->
    <p>搜索:
        <input type="search" name="search" placeholder="请输入要搜索的内容">
    </p>

<!--    15. 增强鼠标可用性-->
    <p>
        <label for="mark">点我输入留言: </label>
        <input type="text" id="mark" placeholder="请输入您的留言">
    </p>

<!--    16. 自定义邮箱
        https://c.runoob.com/front-end/854

-->
    <p>自定义邮箱:
        <input type="text" name="email" pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$" placeholder="请输入正确格式的邮箱">
    </p>

<!--    17. 提交按钮 submit-->
    <input type="submit" >

<!--    18. 重置按钮 reset-->
    <input type="reset" value="清空表单">

</form>

六. HTML框架标签

通过使用框架, 你可以在同一个浏览器窗口中显示不止一个页面, 每份HTML文档称为一个框架, 并且每个框架都独立于其他的框架
使用框架的缺点:
- 开发人员必须同时跟踪更多的HTML文档
- 很难打印整张页面

6.1 框架结构标签frameset

框架结构标签: 用于定义如何将窗口分割为框架
每个frameset定义了一系列行或列
rows/columns的值规定了每行或每列占据屏幕的面积
- < frameset rows="">< /frameset>
- < frameset columns="">< /frameset>

6.2 框架标签frame

每个frame引入一个html页面

6.3 基本的注意事项

HTML5不支持frameset标签
不能将body标签和frameset标签同时使用
假如一个框架有可见边框, 用户可以拖动边框来改变它的大小, 为了避免这种情况发生, 可以在< frame>标签中加入: noresize="noresize"

6.4 iframe(HTML5支持)

<!--iframe
src: 链接地址
name: 框架标识名
w-h: 宽度高度
-->
<iframe src="" name="baidu" frameborder="0" width="1000" height="800"></iframe>

七. HTML的其他标签和特殊字符

7.1 其他标签

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<!--该网页的描述-->
<meta http-equiv="descripton" content="this is my page">
<!--该网页的编码-->
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--href: 引入css文件的地址-->
<link rel="stylesheet" type="text/css" href="./style.css">
<!--src: js的文件地址-->
<script type="text/javascript" src=""></script>

7.2 特殊字符

占位符: 空格 空&nbsp;格
大于号: > &gt;
小于号: < &lt;
版权: 版权信息 &copy;HTML学习

手机扫一扫

移动阅读更方便

你可能感兴趣的文章

[kubernetes]二进制部署k8s集群

Vue源码学习(二):<templete>渲染第一步,模板解析

基于velero及minio实现etcd数据备份与恢复

8. RESTful案例

SpringSecurity简明教程

java与es8实战之五：SpringBoot应用中操作es8(带安全检查：https、账号密码、API Key)

一篇随笔学会CSS

1_Html

一. 引言

1.1 HTML概念

1.2 HTML5

1.3 W3C标准

二. HTML简介

2.1 什么是HTML

2.2 HTML能做什么

2.3 HTML书写规范

2.4 IDEA快捷键

三. HTML基本标签

3.1 结构标签

3.2 排版标签

3.3 块标签

3.4 基本文字标签

3.5 文本格式化标签

3.6 标题标签

h1标题(最大)

h2标题

h3标题

h4标题

h5标题

h6标题(最小)

3.7 列表标签(清单标签)

3.8 图形标签

3.9 链接标签

回到顶部

回到中部

3.10 表格标签

3.11 媒体标签

3.12 页面结构分析

网页主体

四. 综合案例

五. html表单标签

5.1 form元素常用属性

5.2 input元素

5.3 select元素(下拉列表)

5.4 textarea元素(文本域)

5.5 表单初级验证

5.6 综合案例

六. HTML框架标签

6.1 框架结构标签frameset

6.2 框架标签frame

6.3 基本的注意事项

6.4 iframe(HTML5支持)

七. HTML的其他标签和特殊字符

7.1 其他标签

7.2 特殊字符