【WEB前端】---HTML---结构---笔记

目录

1.标签---单标签和双标签

1.1单标签

1.2双标签

2.基本结构标签

2.1HTML标签

2.2文档头部标签

2.3文档标题标签

2.4文档的主题标签

3.常用的标题标签  (n∈[1,6])

4.段落标签

5.换行标签

6.文本格式化标签

6.1粗体

6.2倾斜

6.3删除线

6.4下划线

7.div和span标签

8.图片标签

9.路径=相对路径和绝对路径

9.1相对路径分类

9.2特点：

10.链接标签

10.1链接标签的属性

10.2链接分类

11.注释

12.特殊字符（常用）

13.表格

13.1表格的基本代码书写格式

13.2表格的属性

14.列表

 14.1无序列表

 14.2有序列表

  •  14.3自定义列表

    15.表单标签

    15.1表单基本书写格式

    15.2表单属性

    15.3表单元素（表单控件）

    15.3.1input表单控件的type属性的属性值如下所示

    15.3.2input控件的其他属性

    15.4标签

    15.5下拉标签---节约页面空间15.5.1基本书写格式15.6文本域标签

1.标签---单标签和双标签

1.1单标签

                ---<hr/>水平分割线、<input/>表单元素、<br/>换行标签等

1.2双标签

                ---<h1></h1>标题标签、<html></html>HTML标签等

2.基本结构标签

2.1HTML标签

                        ---<html></html>

2.2文档头部标签

                        ---<head></head>

2.3文档标题标签

                        ---<title></title>

2.4文档的主题标签

                        ---<body></body>

3.常用的标题标签<hn></hn>  (n∈[1,6])

<h1>标题一共六级可以选择</h1>

<h2>文字加粗并且一行显示</h2>

<h3>从h1到h6文字大小递减</h3>

<h4>随着文字大小粗细变化</h4>

<h5>语法书写要规范</h5>

<h6>具体效果刷新就可以看见了</h6>

4.段落标签<p></p>

<p>用于定义段落，可以将网页划分位若干个段落，文本在一个段落中会根据浏览器的窗口大小自动换行，段落与段落之间有空隙</p>

5.换行标签<br/>

换行标签是单标签，是用于强制换行的，只是简单的开启新的一行，没有行间距，段落之间会插入一些垂直的间距

6.文本格式化标签

6.1粗体

                ---<strong></strong>---更加推荐使用<strong>标签

                ---<b></b>

6.2倾斜

                ---<em></em>---推荐使用

                ---<i></i>

6.3删除线

                ---<del></del>---推荐使用

                ---<s></s>

6.4下划线

                ---<ins></ins>---推荐使用

                ---<u></u>

7.div和span标签

<div>标签用来布局，一行只能放一个<div>---大盒子

<span>标签用来布局，一行可以放多个<span>---小盒子

8.图片标签<img />

属性属性值说明
src图片路径

必须属性

alt文本替换文本，图像不能显示的时候显示的文字
title文本提示文本，鼠标悬停在图片上方的时候出现的文字
width像素图片的宽度
height像素图片的高度
border边框图片的边框样式

采用键值对的方式进行书写，可以写多个属性，属性与属性之间用空格分开

9.路径=相对路径和绝对路径

以引用文件的绝对位置为参考基础，而建立的目录路径就是相对路径

9.1相对路径分类

相对路径分类符号说明
同一级路径图像文件位于HTML文件同一级
下一级路径/图像文件位于HTML文件下一级
上一级路径./图像文件位于HTML文件上一级

9.2特点：

相对路径分类是图像相对于HTML文件的位置；

绝对路径是指目录下的绝对位置，通常是从盘符开始的；

相对路径是从这个项目所在的这个文件夹出发，去寻找目标文件

10.链接标签<a>

10.1链接标签的属性

<a href="跳转目标（也可以是#号（代表是空链接，会自动跳转到页面最顶端），也可以使用JavaScript:;(代表什么也不执行，点击的时候不会产生任何反应)，还可以使用' '(空字符串代表什么都不执行但是会刷新页面)）" target="目标窗口的打开方式（_self默认当前窗口或者_blank新窗口）"></a>

10.2链接分类

  • 外部链接：利用href="跳转的路径"直接跳转到外部链接页面
  • 内部链接：利用href="跳转的路径"直接跳转到当前项目文件夹内中的目标链接页面
  • 空链接：href="#"表示没有确定的跳转目标
  • 下载链接：href="文件/压缩包"，会自动下载此链接指向的内容
  • 网页元素链接：可以直接给当前网页中的元素（图像/表格/音频等）添加超链接
  • 锚点链接：通过href="#名字"的方式跳转到相关id名字所在的地方（起到一个快速定位的作用）

11.注释

<!-- 注释内容-->

12.特殊字符（常用）

符号说明
>

&gt;

<&lt;
&nbsp;

13.表格

13.1表格的基本代码书写格式

<table><thead><!--这里是表头部分--><tr><td>表头单元格，可以按需添加多个</td>...</tr></thead><tbody><!--这里是表格主题部分--><tr><td>表格主体的单元格，可以按需添加多个</td>...</tr><tr><td>表格主体的单元格，可以按需添加多个</td>...</tr>...</tbody>
</table>

13.2表格的属性

属性名属性值说明
alignleft  center  right规定表格相对周围元素的对齐方式
border如1(输入必须为整数)或者' '无边框规定表格的边框样式
cellpadding像素值规定单元格边沿与内容之间的边距
cellspacing像素值规定单元格与单元格之间的边距
width像素值规定表格的宽度

colspan

列数值跨列合并（最左侧为目标单元格）
rowspan行数值跨行合并（最上侧为目标单元格）

14.列表

 14.1无序列表<ul>

<ul><li>无序列表的列表项，无序列表中只能存放li标签，可以有若干个li标签</li>...
</ul>

 14.2有序列表<ol>

<ol><li>有序列表的列表项，无序列表中只能存放li标签，可以有若干个li标签</li>...
</ol>

 14.3自定义列表<dl>

<dl><dt>名词1</dt><dd>名词解释</dd>...
</\dl>

15.表单标签

15.1表单基本书写格式

<form><label>xxx</label><input />...
</form>

15.2表单属性

属性属性值作用
actionurl地址用于指定接收并且处理表单数据的服务器程序的url地址
methodget/post

用于设置表单的提交方式，其取值是get/post

name名称用于指定表单的名称，以区分同一个页面中的多个表单

15.3表单元素（表单控件）

15.3.1input表单控件的type属性的属性值如下所示

type的属性值描述
button可点击按钮
checkbox复选框
file上传文件
hidden隐藏
image

图像（可以直接用img标签）

password密码框
text文本框
radio单选按钮
reset重置按钮
submit提交按钮

15.3.2input控件的其他属性

属性属性值描述
maxlength正整数最大长度
name用户自定义名称定义input的名称
value用户自定义value值规定input的值
checkedchecked选项框处于选中状态

注意：name和value值主要是针对后台人员使用的；

多选框实现多选一则需要name值与单选框相同时；

checked主要针对的是单选框radio和复选框checkbox

15.4<label>标签

定义:为input元素添加标签（可以4扩大input元素的交互范围，同相关元素的id值相同时）

<form><label for="同id名字一样扩大交互范围">xxx</label><input type="" name=""  id="" />...
</form>

15.5下拉标签<select>---节约页面空间

15.5.1基本书写格式

<select><option>选项1</option>...
</select>

<select>标签中至少包含一对<option>标签，在<option>中定义selected="selected"时，则当前项即为默认选中项

15.6文本域标签<textarea>

<textarea rows="行数" cols="显示的字符数">xxxx文本书写区域
</textarea>

16.HTML5语义标签

<header>页眉
<nav>导航
<main>主体
<section>节
<aside>侧栏
<footer>页脚

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

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

相关文章

服务器工具集合推荐

服务器工具集合推荐

推荐一个朋友开源的服务器运维整合工具,目前的功能包括: ddns&#xff0c;rdp、ssh终端、ftp、http代理&#xff0c;支持在线文件编辑&#xff0c;文件管理&#xff0c;docker&#xff0c;进程&#xff0c;系统监控、wol唤醒&#xff0c;电脑远程开机&#xff0c;点对点&#…
阅读更多...
[Qt] Qt for android, gradle-8.3-bin.zip (No such file or directory)

[Qt] Qt for android, gradle-8.3-bin.zip (No such file or directory)

前言&#xff1a; android 工程需要 gradle 作为打包工具&#xff0c;Qt for android 如果想要打包 apk 同样需要使用 gradle&#xff0c;但是 包括 Android studio 在内的诸多 Android IDE 工具都没有自带的 gradle 工具&#xff0c;可能是因为 gradle 的版本迭代较快&#x…
阅读更多...
深度分析和对比本地大语言模型Ollama和LocalAI

深度分析和对比本地大语言模型Ollama和LocalAI

前言 在充满活力的人工智能&#xff08;AI&#xff09;世界中&#xff0c;开源工具已成为开发人员和组织利用LLM&#xff08;大型语言模型&#xff09;力量的重要资源。这些工具通过提供对高级LLM模型的访问权限&#xff0c;使各种用户能够构建创新和前沿的解决方案。在众多可…
阅读更多...
AI工具大盘点！打工人必备的几款效率神器！

AI工具大盘点！打工人必备的几款效率神器！

前言 在这个AI技术大放异彩的时代&#xff0c;找到合适的工具&#xff0c;可以让我们的工作效率翻倍。作为一名AI工具测评博主&#xff0c;我今天要向大家推荐几款我亲自体验并认为非常实用的AI工具。它们不仅能够提升你的工作效率&#xff0c;还能让你在职场上更加得心应手。…
阅读更多...
为本地化准备营销材料的几个步骤

为本地化准备营销材料的几个步骤

为本地化准备营销材料涉及几个关键步骤&#xff0c;以确保内容在文化上合适、语言上准确&#xff0c;并与目标受众相关。以下是五个基本步骤&#xff1a; 进行市场调查 了解目标市场至关重要。进行深入研究&#xff0c;以收集有关目标地区受众的文化细微差别、消费者行为、地…
阅读更多...
Python异步IO之协程

Python异步IO之协程

参考自仓库https://github.com/SparksFly8/Learning_Python/tree/master/coroutine 协程&#xff08;coroutine&#xff09;在多任务协作中体现的效率又极为的突出。Python中执行多任务还可以通过多进程或一个进程中的多线程来执行&#xff0c;但两者之中均存在一些缺点&#…
阅读更多...
【机器学习】机器学习与图像识别的融合应用与性能优化新探索

【机器学习】机器学习与图像识别的融合应用与性能优化新探索

文章目录 引言第一章&#xff1a;机器学习在图像识别中的应用1.1 数据预处理1.1.1 数据清洗1.1.2 数据归一化1.1.3 数据增强 1.2 模型选择1.2.1 卷积神经网络1.2.2 迁移学习1.2.3 混合模型 1.3 模型训练1.3.1 梯度下降1.3.2 随机梯度下降1.3.3 Adam优化器 1.4 模型评估与性能优…
阅读更多...
【软件测试】Python自动化测试框架：unittest测试用例编写及执行

【软件测试】Python自动化测试框架：unittest测试用例编写及执行

&#x1f345; 视频学习&#xff1a;文末有免费的配套视频可观看 &#x1f345; 点击文末小卡片&#xff0c;免费获取软件测试全套资料&#xff0c;资料在手&#xff0c;涨薪更快 本文将介绍 unittest 自动化测试用例编写及执行的相关内容&#xff0c;包括测试用例编写、测试用…
阅读更多...
Element中的表格组件Table和分页组件Pagination

Element中的表格组件Table和分页组件Pagination

简述&#xff1a;在 Element UI 中&#xff0c;Table组件是一个功能强大的数据展示工具&#xff0c;用于呈现结构化的数据列表。它提供了丰富的特性&#xff0c;使得数据展示不仅美观而且高效。而Pagination组件是一个用于实现数据分页显示的强大工具。它允许用户在大量数据中导…
阅读更多...
科普文：linux服务器性能调优之内核参数

科普文：linux服务器性能调优之内核参数

https://zhouxx.blog.csdn.net/article/details/140168148 在写上面这篇“科普文&#xff1a;Linux服务器性能调优概叙”文章时&#xff0c;由于篇幅原因&#xff0c;将部分内核参数独立出来。 内核参数文件位置&#xff1a;/etc/sysctrl.conf 内核修改和生效命令&#xff1a;s…
阅读更多...
【项目日记（四）】搜索引擎-Web模块

【项目日记（四）】搜索引擎-Web模块

❣博主主页: 33的博客❣ ▶️文章专栏分类:项目日记◀️ &#x1f69a;我的代码仓库: 33的代码仓库&#x1f69a; &#x1faf5;&#x1faf5;&#x1faf5;关注我带你了解更多项目内容 目录 1.前言2.前端模块2.1页面设计2.2后端交互 3.部署到云服务器4.总结 1.前言 在前面的文…
阅读更多...
【Symfony异步任务处理】掌握队列系统的高效之道

【Symfony异步任务处理】掌握队列系统的高效之道

标题&#xff1a;【Symfony异步任务处理】掌握队列系统的高效之道 在现代Web应用开发中&#xff0c;处理耗时的任务&#xff08;如发送邮件、处理文件上传等&#xff09;时&#xff0c;队列系统是一种非常有效的方式。Symfony作为一个功能丰富的PHP框架&#xff0c;提供了强大…
阅读更多...
c语言--字符串处理之分割strtok

c语言--字符串处理之分割strtok

strtok() char *strtok(char s[], const char *delim); 参数&#xff1a; s[]是原字符串&#xff0c;delim为分隔符 返回&#xff1a;字符串拆分后的首地址 第一次拆分&#xff0c;参1 传待拆分的原串。 第1 次拆分时&#xff0c;参1传 NULL. strtok案例解析&#xff1a; #i…
阅读更多...
什么是浪涌电压_浪涌电压的种类及保护器件的选型

什么是浪涌电压_浪涌电压的种类及保护器件的选型

一、浪涌电压的定义 浪涌电压&#xff0c;也称为浪涌电流&#xff0c;是指电路在遭雷击或在接通、断开电感负载或大型负载时产生的瞬时过电压或过电流。这种瞬变干扰通常发生在极短的时间内&#xff0c;如几百万分之一秒&#xff0c;但峰值电压可能极高&#xff0c;可能达到数…
阅读更多...
nginx.conf配置参数解析

nginx.conf配置参数解析

nginx配置文件解析 /usr/local/nginx/conf vim /etc/security/limits.conf #配置生效只能重新启动* soft nproc 65535 #能打开的进程最大数是软限制655335,65535是最大值 * hard nproc 65535 * soft nofile 65535 # 进程打开文件数的最大值65535 * hard nof…
阅读更多...
ExtendSim在商业和服务行业中的仿真

ExtendSim在商业和服务行业中的仿真

仿真使企业能够做出明智的、数据驱动的预测&#xff0c;从而指导决策、产生积极成果并建立竞争优势。 精益分析 使用 ExtendSim 中的精益分析方法对欧洲的供应链网络进行建模&#xff0c;一家制造商实现了对最终客户的服务水平提高了 98%&#xff0c;而且现在可以在库存减少约 …
阅读更多...
python 实现docx指定语言翻译(不丢失格式)

python 实现docx指定语言翻译(不丢失格式)

我这边有个需求需要把一份docx翻译成指定语言的文档并且保存&#xff0c;研究了下&#xff0c;记录。 首先先安装依赖 pip install python-docx1.1.2 googletrans4.0.0rc1 python-docx是用来读取docx的&#xff0c;googletrans使用来翻译的。 googletrans PyPI 这个是官方文…
阅读更多...
用Vue3和Rough.js绘制一个交互式3D图

用Vue3和Rough.js绘制一个交互式3D图

本文由ScriptEcho平台提供技术支持 项目地址&#xff1a;传送门 基于Rough.js和GSAP创建交互式SVG图形卡片 应用场景 本代码适用于需要创建动态交互式SVG图形卡片的场景&#xff0c;例如网页设计、数据可视化和交互式艺术作品。 基本功能 该代码利用Rough.js和GSAP库&…
阅读更多...
流批一体计算引擎-13-[Flink]RuntimeExecutionMode和水印策略Watermark Strategy

流批一体计算引擎-13-[Flink]RuntimeExecutionMode和水印策略Watermark Strategy

1 运行时执行模式RuntimeExecutionMode 数据流程序的运行时执行模式。除此之外，它还控制任务 调度、网络洗牌行为和时间语义。一些业务也将发生变化 它们根据配置的执行模式记录发射行为。 (1)RuntimeExecutionMode.STREAMING，管道将使用流语义执行。开始执行之前将部署所有…
阅读更多...
Android中android.fg线程和android.ui线程分别代表什么？

Android中android.fg线程和android.ui线程分别代表什么？

Android中android.fg线程和android.ui线程分别代表什么&#xff1f; android.fg线程&#xff08;FgThread&#xff09;&#xff1a; FgThread是Android系统中一个特殊的线程&#xff0c;其类定义大致为public final class FgThread extends ServiceThread。它主要用于提供一个…
阅读更多...
最新文章

Copyright @ 2022~2023