首页 > 其他分享 >web 第一章对于html总结

web 第一章对于html总结

时间:2024-04-08 21:13:32浏览次数:24  
标签:web 标签 元素 第一章 html 用于 按钮 input 属性

1.2.2渲染引擎(了解)

渲染引擎(浏览器内核):浏览器中专门对代码进行解析渲染的部分 浏览器出品的公司不同,内在的揎染引也是不同的:

浏览器内核不一样,渲染方式就会不同 怎么做到统一的打开页面

解决就是要有一个相同的web标准

1.3.2Web标准的构成

Web标准中分成三个构成: 构成 语言 说明 结构 HTML 页面元素和内容 表现 css(外观) 网页元素的外观和位置等页面样式《如:颜色、大小等) 行为 JavaScript(动一动) 网页模型的定义与页面交互

用哪种语言来表示?

HTML

(Hyper Text Markup Language)中文译为:超文本标记语言 人写的给浏览器看的,就要遵循html语法

 

image-20240218140708450

开发工具有很多:Visual Studio Code、Webstorm、Sublime、Dreamweaver、Hbuilder

vscode中新建文件的时候记得加上后缀名, !之后使用tab补齐后 工具会自动呈现骨架的模型

 

html语法

注释的快捷键: 浏览器无法渲染注释 在VS Code中:ctrl+/

 

实现body内容的换行 br

/// <hr>水平分割线

文本格式化修饰标签

 

 

标签说明
b 粗体
strong 强调文本
u/ins 下划线
i /em 斜体
sup 上标
sub 下标
del/s 删除线

更加重要的用后者 推荐: strong、ins、em、del,表示的强调语义更强烈!

 

图片标签的介绍

场景:在网页中显示图片 代a码:<img src="" alt=""> src叫属性名,"里面是属性值" (一起叫标签属性) 特点: 属性名:alt 属性值:替换文本 当图片加载失败时,才显示alt的文本

属性值: src 规定显示图像的URL

align:规定如何根据周围的文本来排列图像(不推荐)

height:定义图像的高度

titie:光标停留在图片,显示提示文字,属性(鼠标停留文本)

width:设置图像宽度

border:设置图像周围的边框

图片标签的title属性,当鼠标悬停的时候显示的文本 eg:

 

路径

/// ./大多用于表示当前目录文件 ,也就是相对路径开始寻找文件文件夹 ../用于表示上一级别的目录

 

音频的介绍

场景:在页面插入音频

代a码:<audio src="./music.mp3" controls></audio>

常见的属性

属性名功能
src 音频的路径
control 显示播放的控件
autoplay 自动播放(大多浏览器不支持)
loop 循环播放

注意点: 音频标签目前支持三种格式:MP3、Wav、Ogg

 

视频的介绍

场景:在页面中插入视频 代码:<video src=",/video.mp4" controls</video>

常见的属性:

属性名功能
src 视频的路径
control 显示播放的控件
autoplay 自动播放(大多浏览器不支持)
loop 循环播放

注意点: 视频标签目前支持三种格式 MP4 Wav、Ogg

 

列表标签

去掉列表自带符号不管有序 无序

设置css: list-style:none

 

无序列表

简单书写:ul>li>a(标签)直接生成简单的列表格式

场景:在网页中表示一组无顺序之分的列表,如:新闻列表。 标签组成:

标签名说明
ul 表示无序列表的整体,用于包裹标签
li 表示无序列表的每一项,用于包含每一行的内容

显示特点: 列表的每一项前默认显示圆点标识 注意点: ul标签中只允许包含li标签 li标签可以包含任意内容

 

有序列表

 

场景:在网页中表示一组有顺序之分的列表,如:排行榜。 标签组成:

标签名说明
ol 表示有序列表的整体,用于包裹标签
li 表示有序列表的每一项,用于包含每一行的内容

显示特点: 列表的每一项前默认显示序号标识 注意点: ol标签中只允许包含li标签 li标签可以包含任意内容

 

自定义列表

dl>dt>dd

场景:在网页的底部导航中通常会使用自定义列表实现。 标签组成:

标签名说明
dl 表示自定义列表的整体,用于包裹dt/dd标签
dt 表示自定义列表的主题 (dt当作块级标签)
dd 表示自定义列表的针对主题的每一项内容

显示特点: dd前会默认显示缩进效果 注意点: dl标签中只允许包含dt/dd标签

dt/dd标签可以包含任意内容

 

表格标签

 

表格的基本标签

场景:在网页中以行+列的单元格的方式整齐展示和数据,如:学生成绩表 基本标签:

标签名说明
table 表格整体,可用于包裹多个tr
tr 表格每行,可用于包裹td
td 表格单元格,可用于包裹内容

注意点:table>tr>td

 

表格要有相关的属性:

场景:设置表格基本展示效果 常见相关属性:

属性名属性值效果
border 数字 边框宽度
width 数字 表格宽度
height 数字 表格高度

注意点: 实际开发时针对于样式效果推荐用CSS设置

<table border="1" width="400" height="600">
  <tr>
      <td>姓名</td>
      <td>成绩</td>
      <td>评语</td>            
  </tr>
  <tr>
      <td>小哥哥</td>
      <td>100分</td>
      <td>优秀</td>
  </tr>
</table>

 

 

表格标题和表头单元格标签

场景:在表格中表示整体大标题和一列小标题 其他标签:

标签名名称说明
caption 表格大标题 表示表格整体大标题,默认在表格整体顶部居中位置显示
th 表头单元格 表示一列小标题,通常用于表格第一行,默认内部文字加粗并居中显示

注意点: caption标签书写在table标签内部

th标签书写在tr标签内部(th替换td标签)

示例:

学生成绩表
姓名成绩评语
张三 100分 优秀
李四 100分 优秀
王五 100分 优秀
赵六 100分 优秀

</table>

表格的结构标签(了解)

:为了使代码具有 易读懂性

场景:让表格的内容结构分组,突出表格的不同部分(头部、主体、底部),使语义更加清晰 结构标签:

标签名名称
thead 表格头部
tbody 表格主体
tfoot 表格底部

注意点: 表格结构标签内部用于包裹tr标签 表格的结构标签可以省略

 

合并单元格

场景:将水平或垂直多个单元格合并成一个单元格

包上不包下,包左不包右

注意点: 只有同一个结构标签中的单元格才能合并,不能跨结构标签合并(不能跨:thead、tbody、tfoot)

.给保留的单元格设置:跨行合并(rowspan)或者跨列合并(colspan)

属性名属性值说明
rowspan 合并单元格的个数 跨行合并,将多行的单元格垂直合并
colspan 合并单元格的个数 跨列合并,将多列的单元格水平合并

image-20240220143552738

 

超链接:

属性:target=“_blank”在新窗口打开

<a href="#" targrnt="_blank">超链接</a>

target="_self" 覆盖原窗口打开

<a href="#" target="_self">超链接</a> 

可以在后面插入一张图片,在新窗口显示

www.xinlang.comcon

锚点介绍

超链接<a>标签在HTML中可以用于创建锚点。通过在链接的href属性中指定目标元素的id,可以实现页面内部的跳转。

         <a href="#锚点名称"></a>
      eg: <a href="#setion1">跳转到第一部分</a>
      <div id="setion1">第一部分的内容</div>
        1.创建目标位置的锚点名称
          <a name="锚点名称"></a>
          2.创建锚点连接
          <a href="#锚点名称">链接文本</a>
   
      实例:
      <a href="#item1">节气的第一个类型</a>
      <a name="item1">节气的第一个类型</a>
       
          <!-- 创建目标第一个位置的锚点 -->
  <a name="item1">第一个标题</a>
  <br>
  <a href="item1">第一个标题</a>
  <!-- 这是起点处的菜单类似于导航栏作用 -->
  <a name="menu"></a>
  <!-- 从结尾处跳回导航栏 -->
  <a href="#menu">回到菜单</a>

 

 

表单标签

通常用于登录 注册等功能

input:系列标签的基本介绍

input标签可以通过type属性值的不同,展示不同效果

场景:在网页中显示收集用户信息的表单效果,如:登录页、注册页 标签名:input input标签可以通过type属性值的不同,展示不同效果 type属性值:

标签名type属性值说明
input text 文本框,用于输入单行文本
input password 密码框,用于输入密码
input radio 单选框,用于多选一
input checkbox 多选框,用于多选多
input file 文件选择,用于之后上传文件
input submit 提交按钮,用于提交
input reset 重置按钮,用于重置
input button 普通按钮,默认无功能,之后配合s添加功能

radio(一个单选框后面跟显示的文字)在几个之间选中一个 checkbox可以同时勾选多个

表单占位符:

属性:提示用户输入内容的文本

<input type="text"placeholder:="请输入用户名">

input系列的标签-单选框radio

很抽象最好多理解几次

解决了radio两个单选框无法只选择一个选项的问题,多的name属性值虽然可以随便填,最好见名知意。name分组用于单选

checked的默认选中,就是打开网站的瞬间自动默认选中,节约用户时间成本

eg:<input type="radio"name="sex">男<input type="radio">女

场景:在网页中显示多选一的单选表单控件 type属性值:radio 常用属性:

属性名说明
name 分组。有相同name属性值的单选框为一组,一组中同时只能有一个被选中
checked 默认选中

注意点: name属性对于单选框有分组功能 有相同name属性值的单选框为一组,一组中只能同时有一个被选中

 

上传多个文件

input系列标签-文件选择

场景:在网页中显示文件选择的表单控件 type属性值:file 常用属性:

属性名说明
multiple 多文件选择

input系列标签-按钮

要实现按钮需要把表单的信息都放入form

场景:在网页中显示不同功能的按钮表单控件 type属性值:

标签名type属性值说明
input submit 提交按钮 点击之后提交数据给后端服务器
input reset 重置按钮。点击之后恢复表单默认值
input button 普通按钮。默认无功能,之后配合JS添加功能

注意点: 如果需要实现以上按钮功能,需要配合form标签使用 form使用方法:用form标签把表单标签一起包裹起来即可

如下示例:

用户名: 

密码: 

 ​ ​​
​ 

属性value 就是使用value修改按钮的名字

 

button:按钮标签

高概率会使用button的自定义按钮功能

场景:在网页中显示用户点击的按钮 标签名:button type属性值(同input的按钮系列):

标签名type属性值说明
button submit 提交按钮。点击之后提交数据给后端服务器
button reset 重置按钮。点击之后恢复表单默认值
button button 普通按钮。默认无功能,之后配合s添加功能

注意点: 谷歌浏览器中button默认是提交按钮 button标签是双标签,更便于包裹其他内容:文字、图片等

如下示例

<!-- 自定义按钮名称 -->

select下拉菜单标签

场景:在网页提供多个选择项的下拉菜单表单控件 标签组成: select标签:下拉菜单的整体 option标签:下拉菜单的每一项 常见属性: selected:下拉菜单的默认选中

 

textarea文本域标签

场景:在网页中提供可输入多行文本的表单控件 标签名:textarea 常见属性: cols:规定了文本域内可见宽度 rows:规定了文本域内可见行数 注意点: 右下角可以拖拽改变大小 实际开发时针对于样式效果推荐用CSS设置

 

lable标签:用于不点击所选框也可以勾选的便捷

场景:常用于绑定内容与表单标签的关系 标签名:label 使用方法①: 1.使用label标签把内容(如:文本)包裹起来 2. 在表单标签上添加id属性 3. 在label标签的for属性中设置对应的id属性值 使用方法②: 1. 直接使用label标签把内容(如:文本)和表单标签一起包裹起来 2. 需要把label标签的for属性删除即可

如下示例:两种方法

性别: <input type="radio"name="sex"id="nan"><label for="nan">男</1 <label><input type="radio"name="sex">/label>

image-20240220162217078

 

语义化标签

多个span会显示在同一行 不会像p标签独占一行

div标签通常是用来划分区块放置大量元素

没有语义的布局标签div

 

span和nav导航栏目

 

块级标签article

场景:实际开发网页时会大量频繁的使用到div和span这两个没语义的布局标签 div标签:一行只显示一个(独占一行) span标签:一行可以显示多个 注明:写行内块span无法生效css中的style居中效果

构建网页写入时通常写入header和footer等增强网页的可读性

header标签:用于定义文档区域的页眉,可以作为介绍内容或导航链接的内容 ,通常可以定义多个header

nav标签:用于定义导航链接的区域。

article标签:用于定于独立的内容,标签定义的内容必须有意义 独立与文档的其余部分。通常内含多个section部分

通常包含文章 ,故事,评论

setion标签:用于定义文档中的节(section)如章节,页眉,页脚,文档中的其他部分

footer标签:用于定义文档或文档部分区域的页脚。页脚通常包含文档的作者信息,版权信息等

aside标签:用于定义在包含在article中作为主要内容的附属信息内容 eg:当前文章的相关资料名词解释等,aside中也会放入article

分组标签

figure:figure标签用于规定独立的内容(图像,图表,照片,代码),figcaption标签用于定义figure元素的标题,一般情况下fig caption应该是第一个元素 通常用于图片上下方的小文字

 

用于图片下写入文本

 

页面交互标签:

details和summary标签通常是收纳信息哦

details标签通常选择和summary标签嵌套使用,summary通常作为details标签的第一个子元素,用于定义details标签的标题。

使用概述:会呈现收纳信息,

 

progress标签:用于定义运行中的任务进度,进度可以是不确定的,只确定任务进行中。不知道具体进度

属性描述
max 规定需要完成的值
value 规定进程的当前值

eg:

<body> <!-- progress表示任务正在进行,但是不知道完成了多少 --> progress:标签用法一:任务正在进行时 <progress></progress> progress:标签用法二:表示任务已经完成的任务量 已经修满的学分: <progress value="45" max="100"></progress> </body>

meter标签:也称之为度量衡,该标签用于已知最大值和最小值的度量衡。进度通常根据value和max的比值显示。例如:磁盘的使用量

属性描述
high 定义被界定为高的值的范围
low 定义被界定为低的值的范围
max 定义最大值,默认是1
min 定义最小值,默认是0
title 光标移动到进度条上显示提示文字
value 定义度量的值
optimum 定义最佳值,如果该值高于high属性对应的值,则意味着值越高越好。如果该值低于1ow属性对应的值,则意味着值越低越好

optimum属性的值决定进度条的颜色,绿色最佳,黄色二者之间,红色最差

 

层次语义标签:

time标签:用于定义时间或日期,通常不会在浏览器显示效果。但是,该标签能以机器可读的方式对日期和时间进行编码,主要用于机器识别。这样,用户可以将事件提醒添加到日程表中,搜索引擎也能生成更智能的搜索结果。 属性:

属性描述
datetime 定义具体时间(如15:00)或日期(如2010-10-10),否则,由标签的内容给定日期/时间
pubdate 定义<time>标签中的日期/时间的发布目期,一般情况下,值为pubdate

mark标签: 标签用于定义带有记号的文本,它能够实现高亮显示某些字符,从而引起用户的注意

cite标签:标签用于定义作品(如书籍、歌曲、电影、电视节目、绘画、雕塑等)的标题,但是,人名不属于作品的标题。<cite>标签定义的文本以斜体字方式显示。

全局属性

全局属性是在任何元素中都可以使用的属性

draggable属性

规定元素是否能被拖动。该属性有两个值:true和false,默认值为false。当属性值为true时,表示该元素被选中后可以进行拖动操作;当属性为false时,表示该元素被选中后不能进行拖动操作。

hidden属性:

属性是布尔属性,用于规定元素是否可见。在HML5中,只要hidden属性存在,不论真 属性值是什么,都能隐藏元素。但是,CSS样式可以覆盖hidden属性的隐藏效果。若用JavaScript代码控制元素是否可见,当hidden属性值为true时,则显示;当hidden属性值为false时,则隐藏。

spellcheck属性: spellcheck属性规定是否对元素的输入内容进行拼写和语法检查。一般情况下,可以对以下内容进行拼写检查:input元素中的文本值(非密码)、textarea元素中的文本、可编辑元素中的文本等,该属性有两个值:true和false,默认值为true。当属性值为true时,检查拼写和语法;当属性值为false时,不进行检查。

 

contenteditable属性: contenteditable属性规定是否可以编辑元素的内容,使用前提是该元素必须获得鼠标焦点且不是只读的。该属性有两个值:mue和false,默认值为false。当属性值为true时,表示内容可编辑:当属性值为false时,表示内容不可编辑。

 

 

字符实体

能通过字符实体在网页中显示特殊符号

常见的字符实体

场景:在网页中展示特殊符号效果时,需要使用字符实体替代 结构:&英文; 常见字符实体:通常是&nbsp的空格,&it小于号 ,&gt大于号 &ldquo:双引号

image-20240304165458690

 

设置单个字体之间的间距

在css中设置属性: letter-spacing: 10px;

 

Elements/查看器 用途: 可用于页面结构分析,也可用于自动化脚本的元素定位;或者页面元素分析(元素大小,元素布局等)。 前端页面-html页面,标签语言。 1、查看元素的代码: 点击左上角的箭头图标(或按快捷键Ctrl+Sit+C)进入选择元素模式,然后从页面中选择需要查看的元素,然后可以 在开发者工具元素(Elements)一栏中定位到该元素源代码的具体位置。 2.查看元素的属性: 定位到元素的源代码之后,可以从源代码中读出该元素的属性。如class、src、width等属性的值。 3、修改元素的代码与属性: 点击元素,然查看右键菜单,可以看到chrome提供的可对元素进行的操作:选择Edit as HTML选项时,元素进入编辑模 式,可以对元素的代码进行任意的修改。 当然,这个修改也仅对当前的页面渲染生效,不会修改服务器的源代码,所以这个功能也是作为调试页面效果而使用。

 

 

标签:web,标签,元素,第一章,html,用于,按钮,input,属性
From: https://www.cnblogs.com/zyaaaa1/p/18122574

相关文章

  • 在Windows中用RailDrive挂载WebDAV网盘
    摘要RailDrive官网:https://www.raidrive.com/用RailDrive能把WebDAV网盘挂载成和本地硬盘一样。示例登入NextCloud后,在“文件”模块的左下角,有“文件设置”4个字:点击后,在对话框底部能得到我们需要的URL:在Windows11中安装完RailDrive后,屏幕托盘区有图标:在上图点“添加”......
  • 【javaWeb &第十二篇】MybatisPlus
    MybatisPlus详细学习快速入门MybatisPlus特性标准数据层开发分页查询按条件查询查询投影DQL编程控制DML编程控制逻辑删除乐观锁代码生成器快速入门MybatisPlus是基于Mybatis框架基础上开发的增强型工具,旨在简化开发,提高效率官方地址:http://mp.baomidou.com/开......
  • 说说对WebSocket的理解?应用场景?
    一、是什么WebSocket,是一种网络传输协议,位于OSI模型的应用层。可在单个TCP连接上进行全双工通信,能更好的节省服务器资源和带宽并达到实时通迅客户端和服务器只需要完成一次握手,两者之间就可以创建持久性的连接,并进行双向数据传输从上图可见,websocket服务器与客户端通过握手连......
  • stable-diffusion-webui怎么样增加自己训练的LoRA模型?
    不怕笑话,我曾经为了找这个功能,居然搞了半天时间,结果还没有搞定。后来再不断地研究各种教程,就是没有发现这个功能,无意间发现有一个人贴了一张图片,他只是介绍放到这个目录,他没有告诉我这个目录怎么样来的,因为我在同样的位置上没有这个目录。这样我训练出来的LoRA模型居然测试......
  • [网络安全自学篇] 一.入门笔记之看雪Web安全学习及异或解密示例
    文章目录一.工具&术语1.网安术语2.常用工具3.推荐文章二.常见攻击1.SQL注入2.XSS跨站3.越权漏洞4.CSRF跨站请求伪造5.支付漏洞三.音乐异或解密示例四.总结一.工具&术语1.网安术语常见安全网站及论坛:看雪(https://bbs.pediy.com/)安全客(https://www.anquanke.com)fre......
  • 06-SpringBootWeb快速入门
        ......
  • 苍穹外卖10(Spring Task定时任务,WebSocket双向通信,订单状态定时处理,来电提醒,客户催单)
    目录一、SpringTask1.介绍2.入门1使用步骤2使用示例3.详解1@Scheduled注解2cron表达式1cron表达式6个域2各个域的取值说明4.小结二、订单状态定时处理1.需求分析1问题分析2功能需求2.代码开发1修改引导类加@EnableScheduling2创建OrderTask......
  • web渗透-SSH私钥泄露
    发现主机netdiscover-r192.168.164.0扫描端口看到开放80和31337端口都为http服务 浏览器访问测试查看80端口和31337端口网页和源代码并无发现有用信息 目录扫描 扫描出80端口并无有用信息扫描31337端口发现敏感文件robots.txt和目录.ssh 访问敏感文件和目......
  • 并发工具类:ExecutorService、Future、CountDownLatch与Semaphore(第一章)
    目录一、引言ExecutorService与Future:优雅的任务提交与结果获取CountDownLatch:精确的线程同步点Semaphore:资源访问的流量控制器总结二、ExecutorService定义与接口概述生命周期管理高级特性与最佳实践使用ExecutorService时的常见注意事项与最佳实践建议一、引言......
  • Java内存模型与可见性:volatile关键字、内存屏障与原子操作 第一章
    目录一、引言1.1定义Java内存模型(JMM)及其在并发编程中的重要性1.2简述可见性问题及其对程序正确性的影响二、Java内存模型概述2.1JMM的基本概念:主内存、工作内存、数据同步与一致性保证2.2JMM的特性:原子性、可见性、有序性2.3并发环境下常见的内存可见性问题示例......