【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.rhkb.cn/news/371676.html

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

相关文章

iOS UITableView自带滑动手势和父视图添加滑动手势冲突响应机制探索

场景 我们有时候会遇到这样的一个交互场景&#xff1a;我们有一个UITableView 放在一个弹窗中&#xff0c;这个弹窗可以通过滑动进行展示和消失&#xff08;跟手滑动的方式&#xff09;&#xff0c;然后这个UITableView放在弹窗中&#xff0c;并且可以滚动&#xff0c;展示一些…

【大模型LLM面试合集】大语言模型基础_llm概念

1.llm概念 1.目前 主流的开源模型体系 有哪些&#xff1f; 目前主流的开源LLM&#xff08;语言模型&#xff09;模型体系包括以下几个&#xff1a; GPT&#xff08;Generative Pre-trained Transformer&#xff09;系列&#xff1a;由OpenAI发布的一系列基于Transformer架构…

在线白板工具大揭秘:为何它成为远程团队的必备神器?

一直觉得白板是个很好的工具&#xff0c;不管是学习还是工作&#xff0c;它都能够帮助我们更好地整理思路。 作为一名经常需要远程协作和创意脑暴的职场人&#xff0c;显然传统普通的白板工具已经不够用了。 在这个数字化时代&#xff0c;我们更需要一个电子白板&#xff0c;一…

水仙花数算法

一、水仙花的传说 希腊神话故事 传说希腊神话里&#xff0c;美少年纳西索斯&#xff08;Narcissus&#xff09;是希腊最俊美的男子&#xff0c;无数的少女对他一见倾心&#xff0c;可他却自负地拒绝了所有的人。这当中包括美丽的山中仙女伊可&#xff08;Echo&#xff09;。伊可…

设计模式-结构型-08-组合模式

文章目录 1、学校院系展示需求2、组合模式基本介绍3、组合模式示例3.1、 解决学校院系展示&#xff08;透明模式1&#xff09;3.2、高考的科目&#xff08;透明模式2&#xff09;3.3、高考的科目&#xff08;安全组合模式&#xff09; 4、JDK 源码分析5、注意事项和细节 1、学校…

手把手教学!金融行业Google UAC 3.0 广告到底该怎么投?

浅谈 Google UAC 通用应用广告系列&#xff08;即Universal App Campaigns&#xff0c;简称UAC&#xff09;是Google于2015年推出的一种旨在为移动应用&#xff08;Mobile App&#xff09;寻找更多新用户的广告形式。UAC可覆盖Google用户量最多的各款产品和服务&#xff0c;包…

快行线冷链——创新仓配、共赢未来 主题沙龙在京成功举办

2024年7月7日下午&#xff0c;由京营建联盟、北京市大兴区餐饮行业协会、北京快行线冷链物流联合主办的“创新仓配&#xff0c;共赢未来——相信拥抱的力量”主题沙龙活动在北京篝野城市露营空间隆重举行。本次活动定向邀请了餐饮老板、餐饮企业供应链负责人及冻品经销商和相关…

2024云安全责任共担模型报告

来源&#xff1a;华为&中国信通院 近期历史回顾&#xff1a; 2024年5月全国土地市场报告.pdf 2024云原生身份云 IDaaS 技术发展与应用白皮书.pdf 中国智能网联汽车自动驾驶仿真测试白皮书&#xff08;2023版&#xff09;.pdf 2024全球泛癌筛查行业发展情况报告.pdf 2024数…

2.5 C#视觉程序开发实例1----CamManager实现模拟相机采集图片

2.5 C#视觉程序开发实例1----CamManager实现模拟相机采集图片 1 目标效果视频 CamManager 2 CamManager读取本地文件时序 3 BD_Vision_Utility添加代码 3.0 导入链接库 BD_OperatorSets.dllSystem.Windows.Forms.dllOpencvSharp 3.1 导入VisionParam中创建的文件Util_FileO…

使用 pyecharts 渲染成图片程序报错: echarts is not defined问题处理

背景 之前写的使用 snapshot_selenium 来保存pyeacharts渲染成的网页截图&#xff0c;可以正常运行。程序搁置了半年&#xff0c;不知道动了电脑哪里&#xff0c;再次运行程序时&#xff0c;程序开始报错&#xff1a;JavascriptException: javascript error: echarts is not d…

【人工智能】-- 智能家居

个人主页&#xff1a;欢迎来到 Papicatch的博客 课设专栏 &#xff1a;学生成绩管理系统 专业知识专栏&#xff1a; 专业知识 文章目录 &#x1f349;引言 &#x1f349;基于深度卷积神经网络的表情识别 &#x1f348;流程图 &#x1f348;模型设计 &#x1f34d;网络架…

STM32自己从零开始实操08:STM32主控原理图

由于老师使用的各引脚分门别类的单片机原理图我没有找到&#xff0c;我使用是引脚按顺序摆放的&#xff0c;不方便一个模块一个模块截图展示&#xff0c;所以这部分使用老师的原理图。 一、电源 1.1电源的介绍 1.1.1数字电源和地&#xff08;VDD和VSS&#xff09; 数字电源…

STM32-TIM定时器

本内容基于江协科技STM32视频内容&#xff0c;整理而得。 文章目录 1. TIM1.1 TIM定时器1.2 定时器类型1.3 基本定时器1.4 通用定时器1.4 高级定时器1.5 定时中断基本结构1.6 预分频器时序1.7 计数器时序1.8 计数器无预装时序1.9 计数器有预装时序1.10 RCC时钟树 2. TIM库函数…

alibaba EasyExcel 简单导出数据到Excel

导入依赖 <dependency><groupId>com.alibaba</groupId><artifactId>easyexcel</artifactId><version>4.0.1</version> </dependency> 1、alibaba.excel.EasyExcel导出工具类 import com.alibaba.excel.EasyExcel; import …

Debezium报错处理系列之第111篇:Can‘t compare binlog filenames with different base names

Debezium报错处理系列之第111篇:Cant compare binlog filenames with different base names 一、完整报错二、错误原因三、解决方法Debezium从入门到精通系列之:研究Debezium技术遇到的各种错误解决方法汇总: Debezium从入门到精通系列之:百篇系列文章汇总之研究Debezium技…

智能充电(新能源电动车,电单车)云管理系统的定制解决方案

一 系统简介 智能充电&#xff08;新能源电动车&#xff0c;电单车&#xff09;云管理系统 是一套能够实现对充电站/桩的实时通讯、状态监控、故障检测、运营分析、数据统计、策略设置的智能化多任务管理系统。 二 平台概览 智能充电云管理系统 https://chongdianzhuang.itg…

Git 查看、新建、删除、切换分支

Git 是一个版本控制系统&#xff0c;软件开发者用它来跟踪应用程序的变化并进行项目协作。 分支的诞生便于开发人员在彼此独立的环境中进行开发工作。主分支&#xff08;通常是 main 或 master&#xff09;可以保持稳定&#xff0c;而新的功能或修复可以在单独的分支中进行开发…

react_后台管理_项目

目录 1.运行项目 2. 项目结构 ①项目顶部导航栏 ②项目左侧导航栏 ③主页面-路由切换区 本项目使用的是 reacttsscss 技术栈。 1.运行项目 在当前页面顶部下载本项目&#xff0c;解压后使用编辑器打开&#xff0c;然后再终端输入命令&#xff1a; npm i 下载依赖后&am…

idea删除分支并同步到gitLab以及gitLab上的分支删除

目录 idea删除分支并同步到gitLab 方法一&#xff08;推荐&#xff09; 方法二&#xff08;命令行&#xff09; gitLab上的分支删除 前言-与正文无关 ​ 生活远不止眼前的苦劳与奔波&#xff0c;它还充满了无数值得我们去体验和珍惜的美好事物。在这个快节奏的世界中&…

WPF UI InkCanvas 导师演示画板 演示 笔记 画笔 识别

<Grid><InkCanvas Name"inkCanvas"/><Button Content"识别" Click"Button_Click" VerticalAlignment"Bottom"/></Grid> 引用内库 Ink ink new Ink(); private void Button_Click(object sender, RoutedEvent…