【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;点对点&#…

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

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

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

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

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

为本地化准备营销材料涉及几个关键步骤&#xff0c;以确保内容在文化上合适、语言上准确&#xff0c;并与目标受众相关。以下是五个基本步骤&#xff1a; 进行市场调查 了解目标市场至关重要。进行深入研究&#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 模型评估与性能优…

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

简述&#xff1a;在 Element UI 中&#xff0c;Table组件是一个功能强大的数据展示工具&#xff0c;用于呈现结构化的数据列表。它提供了丰富的特性&#xff0c;使得数据展示不仅美观而且高效。而Pagination组件是一个用于实现数据分页显示的强大工具。它允许用户在大量数据中导…

【项目日记(四)】搜索引擎-Web模块

❣博主主页: 33的博客❣ ▶️文章专栏分类:项目日记◀️ &#x1f69a;我的代码仓库: 33的代码仓库&#x1f69a; &#x1faf5;&#x1faf5;&#x1faf5;关注我带你了解更多项目内容 目录 1.前言2.前端模块2.1页面设计2.2后端交互 3.部署到云服务器4.总结 1.前言 在前面的文…

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在商业和服务行业中的仿真

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

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图

本文由ScriptEcho平台提供技术支持 项目地址&#xff1a;传送门 基于Rough.js和GSAP创建交互式SVG图形卡片 应用场景 本代码适用于需要创建动态交互式SVG图形卡片的场景&#xff0c;例如网页设计、数据可视化和交互式艺术作品。 基本功能 该代码利用Rough.js和GSAP库&…

前端学习(五)CSS浮动与补白

目录&#xff1a; 内容&#xff1a; //设置左右浮动 .left{float:left; } .right{float:right; } /*必须设置不同浮动*/ //创建div <div> <dic class"left">左边</div> <div class"right">右边</div> </div> //设置浮…

地铁车厢火灾3D模拟逃生演习减少了资源损耗和风险

在消防安全领域&#xff0c;为了更好地提升安全实训效果&#xff0c;我们在VR安全培训领域打造了多款消防安全VR模拟实训系统&#xff0c;不仅实现了与现实世界无异的交互操作&#xff0c;更在虚拟空间中超越了现实的限制&#xff0c;模拟出那些现实中难以搭建的复杂场景。 利用…

mysql:部署MySQL 8.0 环境

mysql网址&#xff1a;MySQL 点击 MySQL Community Server 选择合适的版本 选择8.0版本 下载完成&#xff0c;点击mysql-installer-community-8.0.26.0.msi文件&#xff0c;打开安装向导。 选择自定义安装类型 打开“Select Products” 窗口&#xff0c;可以定制需要安装的产…

成都晨持绪:开一家抖音网店到底能不能赚钱

在数字化时代的浪潮中&#xff0c;抖音以其独特的魅力迅速占领了社交媒体的舞台。众多创业者纷纷把目光投向这个新兴平台&#xff0c;企图在短视频的海洋里找到属于自己的财富岛屿。但是&#xff0c;开一家抖音网店到底能不能赚钱呢? 我们要认识到&#xff0c;抖音作为一个流量…

lt6911UXC 国产原装 高性能HDMI2.0转MIPI DSI / CSI芯片方案 提供LT 开发资料包及在线软硬件技术支持!

1.说明 LT6911UXC是一款高性能HDMI2.0到MIPI DSI / CSI转换器&#xff0c;用于VR&#xff0c;智能电话&#xff0c;显示应用。 HDMI2.0输入支持高达6Gbps的数据速率&#xff0c;从而为4k 60Hz视频提供足够的带宽。还支持HDCP2.2进行数据解密。 对于MIPI DSI / CSI输出&#xf…

【路由交换技术】Cisco Packet Tracer基础入门教程(五)

这一期我们来学习端口聚合&#xff0c;这是针对交换机的技术 前言 不知道大家有没有注意到&#xff0c;我们之前的实验在交换机与交换机之间只用一条线连接&#xff0c;像这样 通过今天的学习&#xff0c;我们要用两条线来连接交换机&#xff0c;就像这样&#xff08;为了能…

人力资源中的人工智能:你应该知道的一切

人工智能已经成为行业讨论更广泛的突出话题。人力资源(HR)对于人力资源专业人士来说&#xff0c;了解这门课程也是如此。除了简要介绍什么是人工智能&#xff0c;以及你可能遇到的主要人工智能类型(或者你可能很快就会遇到它&#xff01;)此外&#xff0c;本文还将探讨人工智能…

并发控制-事务的调度、数据不一致问题(更新丢失、脏读、不可重复读)、非串行调度的的可串行化

一、引言 1、数据库管理系统DBMS的事务处理技术实现的另一个主要功能部分是并发控制机制。并发控制机制完成的功能就是对并发执行的事务进行控制&#xff0c;保证事务的隔离性&#xff0c;从而进一步保持数据库的一致性。 2、事务的并发控制就是对并发执行的不同事务中的数据…

Java基础:爬虫

1.本地爬虫 Pattern:表示正则表达式 Matcher:文本匹配器&#xff0c;作用按照正则表达式的规则去读取字符串&#xff0c;从头开始读取。在大串中去找符合匹配规则的子串。 1.2.获取Pattern对象 通过Pattern p Pattern.compile("正则表达式");获得 1.3.…