前端开发_HTML

简介

CSS用于美化内容

HTML用于摆放内容

可以理解为HTML是基础，CSS是工具

HTML定义

HTML 超文本标记语言——HyperText Markup Language

超文本——链接

标记——标签，即带尖括号的文本

标签语法

双标签

  • 开始标签： <xxx> 即尖括号+标签文字
  • 结束标签：</xxx> 即尖括号中+‘/’+标签文字

开始标签和结束标签中文字需要相同

标签成对出现

单标签

只有开始标签，没有结束标签

例如：<br>、<hr>

标签关系

标签的书写位置和标签的关系相关

父子关系嵌套，兄弟关系并列

体现在代码格式上：

  • 父子关系：子级标签换行且缩进（Tab键）
  • 兄弟关系：兄弟标签换行要对齐

注释

使用<!--...-->在文档中插入注释，注释不会在文档中显示

VS Code中使用Ctrl+/即可快速添加注释

基本骨架

<html>整个网页的所有内容都在其中书写
</html>

<html><head>网页头部</head><body>网页主体内容</body>
</html>

<html><head><title>网页标题</title></head></html>

在这里插入图片描述

上述看到的CSDN - 专业开发者社区就是网页标题

如果使用VS Code进行html开发的话，使用!+Enter/Tab即可快速生成如下基本骨架

在这里插入图片描述

标签分类

标题标签

使用<h1>-<h6>(双标签)即可在页面中添加标题

<html><body><h1>章节标题</h1><h2>次标题</h2></body>
</html>

在这里插入图片描述

显示特点：

  • 文字加粗
  • 字号逐渐减小
  • 独占一行（换行）

一般用于新闻标题、文章标题、网页区域名称等

h1在一个网页中只能使用一次（用来放新闻标题或者网页LOGO）

h2-h6没有使用次数的限制

段落标签

<p>(双标签)，用于将文章分段

显示特点：

  • 独占一行
  • 段落之间存在间隙

换行和水平线标签

换行：<br>(单标签)

水平线：<hr>(单标签)

文本格式化标签

为文本添加特殊格式，以突出重点。常见的文本格式：加粗、倾斜、下划线、删除线等

标签名效果
strong加粗
b加粗
em倾斜
i倾斜
ins下划线
u下划线
del删除线
s删除线

strong、em、ins、del标签自带强调含义

图像标签

作用：在网页中插入图片

<img src="图片的 URL">

src用于指定图像的位置和名称，是<img>的必须属性

URL可以是服务器本地路径，也可以是其他服务器的资源路径

  • 相对路径：从当前文件位置出发查找目标文件

    • 文件夹名字/ 表示进入某个文件夹里面

    • ./ 表示当前文件所在文件夹

    • ../ 表示当前文件的上一级文件夹

  • 绝对路径：从盘符出发查找目标文件

img标签还有以下一些属性：

属性作用说明
alt替换文本图片无法显示的时候显示的文字
title提示文本鼠标悬停在图片上面的时候显示的文字
width图片宽度值为数字，没有单位
height图片高度值为数字，没有单位

示例：<img src= "./cat.jpg" alt= "替换文本" title= "提示文本">

属性名=“属性值”

属性写在尖括号里面，标签名后面，标签名和属性之间用空格隔开，不区分先后顺序

音频标签

<audio src="音频的 URL"></audio>

常见属性：

属性作用特殊说明
src(必须属性)音频URL支持格式：MP3、Ogg、Wav
controls显示音频控制面板
loop循环播放
autoplay自动播放浏览器一般禁用自动播放

视频标签

<video src="视频的 URL"></video>

常见属性：

属性作用特殊说明
src(必须属性)音频URL支持格式：MP4、Ogg、WebM
controls显示音频控制面板
loop循环播放
muted静音播放
autoplay自动播放浏览器支持在静音状态自动播放

超链接标签

作用：点击跳转到其他页面。

示例：<a href="https://www.baidu.com">跳转到百度</a>

href是跳转地址，是超链接的必须属性

超链接默认在当前窗口跳转页面，添加 target=“_blank” 实现新窗口打开页面。

列表

无序列表

作用：布局排列整齐的不需要规定顺序的区域。

标签：ul 嵌套 li，ul 是无序列表，li 是列表条目。

<ul><li>第一项</li><li>第二项</li><li>第三项</li> ……
</ul>

在这里插入图片描述

ul 标签里面只能包裹 li 标签

li 标签里面可以包裹任何内容

有序列表

作用：布局排列整齐的需要规定顺序的区域。

标签：ol 嵌套 li，ol 是有序列表，li 是列表条目

<ol><li>第一项</li><li>第二项</li><li>第三项</li> ……
</ol>

在这里插入图片描述

ol 标签里面只能包裹 li 标签

li 标签里面可以包裹任何内容

定义列表

标签：dl 嵌套 dt 和 dd

dl 是定义列表，dt 是定义列表的标题，dd 是定义列表的描述 / 详情。

<dl><dt>列表标题</dt><dd>列表描述 / 详情</dd> ……
</dl>

在这里插入图片描述

dl 里面只能包含dt 和 dd

dt 和 dd 里面可以包含任何内容

表格

网页中的表格与 Excel 表格类似，用来展示数据。

标签：table 嵌套 tr，tr 嵌套 td / th。

标签名说明
table表格
tr行
th表头单元格
td内容单元格

示例：

		<table><tr><th>姓名</th><th>语文</th><th>数学</th><th>总分</th></tr><tr><td>张三</td><td>99</td><td>100</td><td>199</td></tr><tr><td>李四</td><td>98</td><td>100</td><td>198</td></tr><tr><td>总结</td><td>全市第一</td><td>全市第一</td><td>全市第一</td></tr></table>

在这里插入图片描述

网页中表格默认没有边框线，加上border="1"属性即可为表格添加边框线

在这里插入图片描述

用表格结构标签把内容划分区域，让表格结构更清晰，语义更清晰。

标签名说明特殊说明
thead表格头部表格头部内容
tbody表格主体主要内容区域
tfoot表格底部汇总信息区域

修改后的语句如下：

		<table border="1"><thead><tr><th>姓名</th><th>语文</th><th>数学</th><th>总分</th></tr></thead><tbody><tr><td>张三</td><td>99</td><td>100</td><td>199</td></tr><tr><td>李四</td><td>98</td><td>100</td><td>198</td></tr></tbody><tfoot><tr><td>总结</td><td>全市第一</td><td>全市第一</td><td>全市第一</td></tr></tfoot></table>

但实际效果并无区别，因此表结构标签也可省略

合并单元格

合并单元格的步骤：

  1. 明确合并的目标

  2. 保留最左最上的单元格，添加属性（取值是数字，表示需要合并的单元格数量）

    • 跨行合并，保留最上单元格，添加属性 rowspan

    • 跨列合并，保留最左单元格，添加属性 colspan

  3. 删除其他单元格

示例：

		<table border="1"><tr><th>姓名</th><th>语文</th><th>数学</th><th>总分</th></tr><tr><td>张三</td><td>99</td><td rowspan="2">100</td><td>199</td></tr><tr><td>李四</td><td>98</td><td>198</td></tr><tr><td>总结</td><td colspan="3">全市第一</td></tr></table>

在这里插入图片描述

表单

作用：收集用户信息。

使用场景：

  • 登录页面
  • 注册页面
  • 搜索区域

input

input (单标签)标签 type 属性值不同，则功能不同。

<input type="..." >

type属性值说明
text文本框，用于输入单行文本
password密码框
radio单选框
checkbox多选框
file上传文件

占位文本：placeholder属性，文本框和密码框都可以使用

<input type="..." placeholder="提示信息">

在这里插入图片描述

radio

常用属性：

属性名作用特殊说明
name控件名称控件分组，同组只能选中一个(单选功能)
checked默认选中属性名和属性值相同，简写为一个单词

示例：

<input type="radio" name="gender" checked> 男
<input type="radio" name="gender"> 女
file

默认情况下，文件上传表单控件只能上传一个文件，添加multiple属性可以实现文件多选功能

示例：

<input type="file" multiple>
checkbox

复选框：默认选中同样使用checked属性

<input type="checkbox" checked>

下拉菜单

标签：select 嵌套 option，select 是下拉菜单整体，option是下拉菜单的每一项。

示例代码：

		<select><option>北京</option><option>上海</option><option>广州</option><option>深圳</option><option selected>武汉</option></select>

在这里插入图片描述

默认显示第一项，selected属性实现默认选中功能

文本域

多行输入文本的表单控件

标签：textarea，双标签。

<textarea>默认提示文字</textarea>

实际开发中用CSS设置文本域的尺寸以及禁用右下角的拖拽功能

label

label标签，双标签，网页中用作某个标签的说明文本

可以用label标签绑定文字和表单控件的关系，增大表单控件的点击范围。

  1. label 标签只包裹内容，不包裹表单控件

    设置 label 标签的 for 属性值 和表单控件的 id 属性值相同

    <input type="radio" id="man">
<label for="man">男</label>

  2. 使用 label 标签包裹文字和表单控件，不需要属性

    <label><input type="radio"> 女</label>

支持 label 标签增大点击范围的表单控件：文本框、密码框、上传文件、单选框、多选框、下拉菜单、文本域等等

button

按钮

<button type="xxx">按钮</button>

type属性值：

type属性值说明
submit提交按钮，点击后可以提交数据到后台(默认功能)
reset重置按钮，点击后将表单控件恢复默认
button普通按钮，默认没有功能，一般配合JavaScript使用

按钮需配合 form 标签（表单区域）才能实现对应的功能。

示例：

		<form><input type="radio" checked name="gender"> 男<input type="radio" name="gender"> 女<button type="reset">重置</button></form>

在这里插入图片描述

语义化

无语义的布局标签

  • div：独占一行
  • span：不换行

可以理解为div自带结束换行，span没有结束换行

有语义的布局标签

标签名语义
header网页头部
nav网页导航
footer网页底部
aside网页侧边栏
section网页区块
article网页文章

字符实体

作用：在网页中显示预留字符。

显示结果描述实体名称
空格&nbsp
<小于号&lt;
>大于号&gt;

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/205465.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

vue el-table表格中每行上传文件（上传简历）操作

vue el-table表格中每行上传文件（上传简历）操作

1、HTML中 <el-table :data"formInfo.userListDto" border stripe max-height"400"><el-table-column type"index" label"序号" width"50"> </el-table-column><el-table-column prop"realName&q…
阅读更多...
鸿蒙4.0开发笔记之ArkTS装饰器语法基础@Extend扩展组件样式与stateStyles多态样式（十一）

鸿蒙4.0开发笔记之ArkTS装饰器语法基础@Extend扩展组件样式与stateStyles多态样式（十一）

一、Extend扩展组件样式 1、作用 前文提到可以使用Styles用于样式的扩展&#xff0c;在Styles的基础上&#xff0c;ArkTS语法还提供了Extend&#xff0c;⽤于扩展原生组件样式&#xff0c;包括Text、Button等等。 2、定义语法 Extend(UIComponentName) function functionNam…
阅读更多...
在PyCharm中配置PyQt5环境

在PyCharm中配置PyQt5环境

在PyCharm中配置PyQt5环境 文章目录 1.安装第三方库2.PyQt5设计器3.PyUIC转换工具 &#x1f339;꧔ꦿ&#x1f339;꧔ꦿ&#x1f339;꧔ꦿ&#x1f339;꧔ꦿ&#x1f339;꧔ꦿ&#x1f339;꧔ꦿ&#x1f339;꧔ꦿ&#x1f339;꧔ꦿ&#x1f339;꧔ꦿ&#x1f339;꧔ꦿ&#x1…
阅读更多...
【AI认证笔记】NO.2人工智能的发展

【AI认证笔记】NO.2人工智能的发展

目录 一、人工智能的发展里程碑 二、当前人工智能的发展特点 1.人工智能进入高速发展阶段 2.人工智能元年 三、人工智能高速发展的三大引擎 1.算法突破 2.算力飞跃 3.数据井喷 四、AI的机遇 五、AI人才的缺口 六、行业AI 人工智能算法&#xff0c;万物互联&#xff…
阅读更多...
ky10 server x86 安装、更新openssl3.1.4（在线编译安装、离线安装）

ky10 server x86 安装、更新openssl3.1.4（在线编译安装、离线安装）

查看openssl版本 openssl version 离线编译安装升级 #!/bin/shOPENSSLVER3.1.4OPENSSL_Vopenssl versionecho "当前OpenSSL 版本 ${OPENSSL_V}" #------------------------------------------------ #wget https://www.openssl.org/source/openssl-3.1.4.tar.gzech…
阅读更多...
异步操作的方法

异步操作的方法

在高级语言中已经有了异步的原语言&#xff0c;而在C 中的最好的方式就是 libevent 的方式,我这还是相当认同的&#xff0c;高级语言就不需要在苦哈哈的&#xff0c;事件转圈了&#xff0c;但是原理还是以事件为基础的 一句话就是在一个循环中等着他执行完,这个循环中有很多其他…
阅读更多...
XML映射文件

XML映射文件

<?xml version"1.0" encoding"UTF-8" ?> <!DOCTYPE mapperPUBLIC "-//mybatis.org//DTD Mapper 3.0//EN""http://mybatis.org/dtd/mybatis-3-mapper.dtd"> <mapper namespace"org.mybatis.example.BlogMapper&q…
阅读更多...
电子学会C/C++编程等级考试2021年06月（二级）真题解析

电子学会C/C++编程等级考试2021年06月（二级）真题解析

C/C++等级考试（1~8级）全部真题・点这里 第1题：数字放大 给定一个整数序列以及放大倍数x，将序列中每个整数放大x倍后输出。 时间限制：1000 内存限制：65536输入 包含三行： 第一行为N，表示整数序列的长度(N ≤ 100); 第二行为N个整数(不超过整型范围)，整数之间以一个空格…
阅读更多...
Python三百行代码实现一简约个人博客网站(全网最小巧)

Python三百行代码实现一简约个人博客网站(全网最小巧)

这是全互联网最小巧的博客&#xff0c;没有比这更小的了。虽然小巧&#xff0c;但功能一点儿也不弱&#xff0c;支持文章的分页展示&#xff0c;文章表格&#xff0c;图片和代码语法高亮。文章无限制分类&#xff0c;访问量统计&#xff0c;按时间和按点击量排序&#xff0c;展…
阅读更多...
【matlab程序】南海土台风画法

【matlab程序】南海土台风画法

【matlab程序】南海土台风画法 图片 往期推荐 图片 【python海洋专题一】查看数据nc文件的属性并输出属性到txt文件 【python海洋专题二】读取水深nc文件并水深地形图 【python海洋专题三】图像修饰之画布和坐标轴 【Python海洋专题四】之水深地图图像修饰 【Python海洋专…
阅读更多...
将图像的rgb数据转成DICOM医学图像格式

将图像的rgb数据转成DICOM医学图像格式

dcmtk官方文档&#xff1a;https://support.dcmtk.org/docs/ dcmtk最新源码下载&#xff1a;https://www.dcmtk.org/en/dcmtk/dcmtk-software-development/ dcmtk旧版本源码下载&#xff1a;https://dicom.offis.de/download/dcmtk/ 用DCMTK库实现将图像转成dcm格式 dcmtk库的…
阅读更多...
三.排序与分页

三.排序与分页

目录 一.排序数据二.分页 一.排序数据 1.排序规则 使用ORDER BY 子句排序 ASC&#xff08;ascend&#xff09;升序DESC&#xff08;descend&#xff09;降序 ORDER BY 子句在SELECT语句的结尾 2.单列排序 SELECT last_name, job_id, department_id, hire_date FROM e…
阅读更多...
Linux(CentOS7)上安装mysql

Linux(CentOS7)上安装mysql

在CentOS中默认安装有MariaDB&#xff08;MySQL的一个分支&#xff09;&#xff0c;可先移除/卸载MariaDB。 yum remove mariadb // 查看是否存在mariadb rpm -qa|grep -i mariadb // 卸载 mariadb rpm -e --nodeps rpm -qa|grep mariadb yum安装 下载rpm // 5.6版本 wge…
阅读更多...
zookeeper集群+kafka集群:

zookeeper集群+kafka集群:

kafka3.0之前依赖于zookeeper。 zookeeper开源&#xff0c;分布式的架构。提供协调服务&#xff08;Apache项目&#xff09; 基于观察者模式涉及的分布式服务管理架构。 存储和管理数据。分布式节点上的服务接受观察者的注册。一旦分布式节点上的数据发生变化&#xff0c;由zoo…
阅读更多...
7、信息收集(2)

7、信息收集(2)

文章目录 一、指纹识别1、Nmap工具2、Wafw00f工具 二、使用Maltego进行情报收集 一、指纹识别 1、Nmap工具 命令一&#xff1a;nmap -sS -sV <ip>&#xff0c;使用TCP SYN的方式&#xff0c;扫描目标主机上常规端口运行的服务版本。 -sS&#xff1a;指定使用TCP SYN的方…
阅读更多...
k8s中批量处理Pod应用的Job和CronJob控制器介绍

k8s中批量处理Pod应用的Job和CronJob控制器介绍

目录 一.Job控制器 1.简介 2.Jobs较完整解释 3.示例演示 4.注意&#xff1a;如上例的话&#xff0c;执行“kubectl delete -f myJob.yaml”就可以将job删掉 二.CronJob&#xff08;简写为cj&#xff09; 1.简介 2.CronJob较完整解释 3.案例演示 4.如上例的话&#xf…
阅读更多...
C#，《小白学程序》第三课：类class，类的数组及类数组的排序

C#，《小白学程序》第三课：类class，类的数组及类数组的排序

类class把数值与功能巧妙的进行了结合&#xff0c;是编程技术的主要进步。 下面的程序你可以确立 分数 与 姓名 之间关系&#xff0c;并排序。 1 文本格式 /// <summary> /// 同学信息类 /// </summary> public class Classmate { /// <summary> /…
阅读更多...
注册Zoho Mail邮箱：优势与使用体验

注册Zoho Mail邮箱：优势与使用体验

如何注册Zoho Mail邮箱&#xff1f;要注册Zoho Mail邮箱&#xff0c;首先打开浏览器&#xff0c;访问Zoho Mail官网&#xff0c;点击页面右上角的“创建帐户”按钮。接下来&#xff0c;按照提示输入你的姓名、生日和性别&#xff0c;以及一个有效的手机号码或电子邮件地址。然后…
阅读更多...
20231122给RK3399的挖掘机开发板适配Android12

20231122给RK3399的挖掘机开发板适配Android12

20231122给RK3399的挖掘机开发板适配Android12 2023/11/22 9:30 主要步骤&#xff1a; rootrootrootroot-X99-Turbo:~$ tar --use-compress-programpigz -xvpf rk356x_android12_220722.tgz rootrootrootroot-X99-Turbo:~$ cd rk_android12_220722/ rootrootrootroot-X99-Tur…
阅读更多...
【学习记录】从0开始的Linux学习之旅——驱动模块编译与加载

【学习记录】从0开始的Linux学习之旅——驱动模块编译与加载

一、概述 Linux操作系统通常是基于Linux内核&#xff0c;并结合GNU项目中的工具和应用程序而成。Linux操作系统支持多用户、多任务和多线程&#xff0c;具有强大的网络功能和良好的兼容性。本文主要讲述如何编译及加载linux驱动模块。 二、概念及原理 应用程序通过系统调用与内…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023