当前位置: 首页 > news >正文

HTML标签之表单标签,web开发实例教程

标签语义化:

语义和默认样式的区别:

  • 默认样式是浏览器设定的一些常用tag的表现形式;
  • 语义化的主要目的就是让大家直观的认识标签和属性的用途和作用;

标签语义化作用:

  • 当只有HTML页面时,没有CSS,我们仍然可以很清晰的看懂页面的DOM结构
  • 团队维护,当团队来review代码或者重构时,增强代码的可读性,更利于维护
  • 有利于SEO,搜索引擎爬虫依赖于标签来确定上下文和各个关键字的权重
  • 提高用户体验,比如 title 和 alt 等用来解释内容信息

常用语义化的标签:

  • <header>头部标签,用来写网页最上方的公共头部,也就是页眉。
<header><h1>一级标题</h1><h2>二级标题</h2>
</header>
  • <nav>标签,用来写导航,一般写在<header>标签里面,内部用<ul>无序列表。
<nav>> #### [戳这里领取完整开源项目:【一线大厂前端面试题解析+核心总结学习笔记+Web真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)<ul><li></li><li></li><li></li></ul>
</nav>
  • <code>:code可以包裹html语句而不会被浏览器再去解析。

  • <pre><samp>:这是一段HTTP协议的内容描述,因为这段内容的换行是非常严格的,所以我们不需要浏览器帮我们做自动换行,因此我们使用了pre标签,表示这部分内容是预先排版过的,不需要浏览器进行排版。

  • <article>标签,当我们要写网页文章的主要内容时,要用到这个标签。

<article><h2>标题</h2><p>内容</p>
</article>
  • <address>标签,定义文档作者或拥有者的联系信息。

如果 <address> 元素位于<article>元素内部,则它表示该文章作者或拥有者的联系信息。

通常的做法是将 address 元素添加到网页的头部或底部。

  • <p>段落标签

知道了

作为段落,你就不会再使用<br/>来换行了,而且不需要<br/>来区分段落与段落。
<p></p>中的文字会自动换行,而且换行的效果优于<br/>

<p>段落内容</p>
  • <span>标签

<span>标签的语义为被用来组合文档中的行内元素

  • <b><em><strong>

<b>标签语义为“加粗”

<em>标签语义为“强调”

<strong>标签语义为“更强烈的强调” 而且em 默认用斜体表示,strong 用粗体表示。

总结

为了帮助大家更好温习重点知识、更高效的准备面试,特别整理了《前端工程师面试手册》电子稿文件。

内容包括html,css,JavaScript,ES6,计算机网络,浏览器,工程化,模块化,Node.js,框架,数据结构,性能优化,项目等等。

包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目,涵盖了初中级前端技术点。

前端面试题汇总

开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

JavaScript

性能

linux

相关文章:

HTML标签之表单标签,web开发实例教程

标签语义化&#xff1a; 语义和默认样式的区别&#xff1a; 默认样式是浏览器设定的一些常用tag的表现形式&#xff1b;语义化的主要目的就是让大家直观的认识标签和属性的用途和作用&#xff1b; 标签语义化作用&#xff1a; 当只有HTML页面时&#xff0c;没有CSS&#xf…...

数据库-第四/五章 数据库安全性和完整性【期末复习|考研复习】

前言 总结整理不易&#xff0c;希望大家点赞收藏。 给大家整理了一下计数据库系统概论中的重点概念&#xff0c;以供大家期末复习和考研复习的时候使用。 参考资料是王珊老师和萨师煊老师的数据库系统概论(第五版)。 文章目录 前言4 第四章 数据库安全性4.1 数据库安全性定义4.…...

网站维护页面404源码

网站维护页面404源码&#xff0c;源码由HTMLCSSJS组成&#xff0c;记事本打开源码文件可以进行内容文字之类的修改&#xff0c;双击html文件可以本地运行效果&#xff0c;也可以上传到服务器里面&#xff0c;重定向这个界面 下载地址 https://www.qqmu.com/2407.html...

CSS的文本样式属性值,web开发难点

什么是css块元素&#xff1f; 块级元素是独占一行显示的。它的兄弟元素必定不会与其在同一行中&#xff08;除非脱离了文档流&#xff09;。通俗点来说&#xff0c;就是块元素(block element)一般是其他元素的容器元素 戳这里领取完整开源项目&#xff1a;【一线大厂前端面试题…...

springboot+jsp汽车配件管理系统idea maven 项目lw

springbootweb汽车配件销售业绩管理系统服务于汽车配件公司业务,实现了客户管理&#xff0c;主要负责对客户相关数据的增删改查方面、渠道管理&#xff0c;主要对渠道信息也就是设备的供应商渠道信息进行管理、项目管理&#xff0c;主要是一些项目信息的记录与整理、销售数据管…...

计算机网络-网络安全(二)

1.应用层安全协议&#xff1a; S-HTTP或SHTTP&#xff08;Sec HTTP&#xff09;&#xff0c;安全超文本传输协议&#xff0c;是HTTP扩展&#xff0c;使用TCP的80端口。HTTPS&#xff1a;HTTPSSL&#xff0c;使用TCP的443端口。和TLS&#xff08;传输层安全标准&#xff09;是双…...

Flutter App代码混淆

Flutter 应用混淆 Flutter 应用的混淆非常简单&#xff0c;只需要在构建 release 版应用时结合使用 --obfuscate 和 --split-debug-info 这两个参数即可。 flutter build apk –obfuscate --split-debug-info 命令需要指定输出调试文件的位置&#xff0c;该命令会生成一个符号映…...

pandas中apply函数的坑——错误信息Must provide ‘func‘ or tuples of ‘(column, aggfunc)的解决办法

近期需要获取某网站上的文章标题&#xff0c;并对文章来源以及不同来源的文章数量进行分析。已通过爬虫完成对文章标题、日期和文章链接的爬取&#xff0c;并存入pandas中的dataframe中&#xff0c;准备进行下一步的分析。 该网站一般情况下&#xff0c;文章标题前两个字是信息…...

《操作系统真相还原》读书笔记二:环境搭建 xshell连接virtualbox

修改 sshd_config 使用 vi /etc/ssh/sshd_config命令进入sshd服务配置&#xff0c;键盘输入i进行编辑&#xff0c;将监听端口、监听地址前的 # 号去除&#xff0c;开启允许远程登录&#xff0c;开启使用用户名密码来作为连接验证。修改完成&#xff0c;按一下Esc&#xff0c;输…...

CSS盒模型居中方法,大学生必备

96道前端面试题 下面给大家分享96道前端面试题 1&#xff0c;一些开放性题目 自我介绍&#xff1a;除了基本个人信息以外&#xff0c;面试官更想听的是你与众不同的地方和你的优势。项目介绍如何看待前端开发&#xff1f;平时是如何学习前端开发的&#xff1f;未来三到五年的…...

【Golang星辰图】构建健壮应用的秘籍:探索Go语言中最强大的测试工具库

精进单元测试&#xff1a;探秘Go语言中流行的测试框架和工具 前言 提高软件质量和稳定性是每个开发人员的目标之一。而单元测试是保证代码质量的重要手段之一&#xff0c;可以帮助我们检查代码是否按预期工作&#xff0c;并提早发现潜在的bug。Go语言提供了丰富的测试框架和工…...

刷题笔记day27-回溯算法3

39. 组合总和 var path []int var tmp []int var result [][]int// 还是需要去重复&#xff0c;题目中要求的是至少一个数字备选的数量不同。 // 所以需要剪枝操作&#xff0c;右边的要比左边的> func combinationSum(candidates []int, target int) [][]int {// 组合问题pa…...

【项目】Boost 搜索引擎

文章目录 1.背景2.宏观原理3.相关技术与开发环境4. 实现原理1.下载2.加载与解析文件2.1获取指定目录下的所有网页文件2.2. 获取网页文件中的关键信息2.3. 对读取文件进行保存 3.索引3.1正排与倒排3.2获取正排和倒排索引3.3建立索引3.3.1正排索引3.3.2倒排索引 4.搜索4.1 初始化…...

vue3 (六)自定义指令

1.定义自定义指令&#xff1a; app.directive(pos,{mounted(el,bunding){el.style[bunding.arg] bunding.value px;}, updated(el,bunding){el.style[bunding.arg] bunding.value px;} }) app.directive(指令名,{ mounted(el,bunding){}, updated(el,bunding){} }) 如果只…...

vite、mode如果为production打包后 .env.production 中 VITE_API_DOMAIN变量作为API地址吗

Vite 是一个现代化的前端构建工具&#xff0c;它使用 .env 文件来管理不同环境下的环境变量。通过为不同的环境&#xff08;如开发环境、生产环境等&#xff09;设置不同的 .env 文件&#xff0c;你可以控制这些环境中的变量&#xff0c;这些变量在构建时会被注入到项目中 当你…...

静态时序分析:SDC约束命令set_fasle_path详解

相关阅读 静态时序分析https://blog.csdn.net/weixin_45791458/category_12567571.html?spm1001.2014.3001.5482 目录 指定建立/保持时间检查 指定上升/下降沿 指定时序路径起点 删除虚假路径 添加注释 简单使用 写在最后 在之前的文章中&#xff0c;我们讨论了如何使…...

浅谈马尔科夫链蒙特卡罗方法(MCMC)算法的理解

1.解决的问题 计算机怎么在任意给定的概率分布P上采样&#xff1f;首先可以想到把它拆成两步&#xff1a; &#xff08;1&#xff09;首先等概率的从采样区间里取一个待定样本x&#xff0c;并得到它的概率为p(x) &#xff08;2&#xff09;然后在均匀分布U[0,1]上取一个值&a…...

2403C++,C++20协程库

原文 基于C20协程的http库--cinatra cinatra是基于C20无栈协程实现的跨平台,仅头,高性能,易用的http/https库(http1.1),包括httpserver和httpclient,功能完备,不仅支持最普通的getpost等请求,还支持restfulapi,websocket,chunked,ranges,multipart,静态文件服务和反向代理等功…...

mybatis动态加载mapper.xml

mybatis动态加载mapper.xml mybatis动态加载mapper.xml、springboot mybatis动态加载mapper.xml 教程连接&#xff1a;https://blog.csdn.net/weixin_44480167/article/details/136356398...

安卓类加载机制

目录 一、ClassLoader介绍二、双亲委托机制三、类的加载过程 一、ClassLoader介绍 任何一个 Java 程序都是由一个或多个 class 文件组成&#xff0c;在程序运行时&#xff0c;需要将 class 文件加载到 JVM 中才可以使用&#xff0c;负责加载这些 class 文件的就是 Java 的类加…...

GitHub OCaml项目:C++后端突破与代码编译新变革

【导语&#xff1a;GitHub的OCaml项目迎来重要升级&#xff0c;开发者stedolan提交补丁为ocamlc添加新的C后端&#xff0c;改进运行时和FFI使用的非增量C代码&#xff0c;这一突破将为代码编译带来新的可能。】OCaml新添C后端&#xff1a;代码编译新途径开发者stedolan希望将2次…...

手把手教你用HuggingFace+BGE模型搭建本地向量检索系统(附FAISS实战代码)

从零构建基于BGE模型的本地语义搜索系统&#xff1a;代码级实践指南 在信息爆炸的时代&#xff0c;如何快速从海量文本中精准找到相关内容&#xff1f;语义搜索技术正成为解决这一痛点的利器。不同于传统的关键词匹配&#xff0c;语义搜索能理解查询背后的意图&#xff0c;找到…...

Ostrakon-VL扫描终端实战案例:连锁快餐店菜单图像结构化解析

Ostrakon-VL扫描终端实战案例&#xff1a;连锁快餐店菜单图像结构化解析 1. 项目背景与价值 在连锁快餐行业&#xff0c;菜单更新是日常运营的重要环节。传统方式需要人工录入新品信息、核对价格变动&#xff0c;这个过程既耗时又容易出错。我们基于Ostrakon-VL-8B多模态大模…...

从Windows玩家到Linux新手:我的Ubuntu 22.04双系统入坑实录与软件生态迁移心得

从Windows玩家到Linux新手&#xff1a;我的Ubuntu 22.04双系统入坑实录与软件生态迁移心得 第一次看到Ubuntu的紫色登录界面时&#xff0c;我盯着那个不断旋转的加载动画发了五分钟呆——作为用了十五年Windows的老用户&#xff0c;这个瞬间仿佛打开了新世界的大门。但兴奋感很…...

不用手动设置滤波参数,程序自动根据信号特征,匹配滤波参数,零基础也能抗干扰。

在智能仪器的世界里&#xff0c;我们经常面临一个尴尬的局面&#xff1a;实验室里算法跑得飞起&#xff0c;一到现场就被噪声淹没。今天&#xff0c;我将结合《智能仪器设计》中的自适应信号处理理念&#xff0c;带你手撸一个“傻瓜式”自适应滤波器。这个工具的目标很明确&…...

第21课:把 Qt 常用能力串成实战链路,打通文本、绘图、线程、网络与多媒体

本节路线图 为什么这节课看起来很散, → 先把程序的输入输出拿下: → 让界面真正活起来:`QP 兔兔建议 先顺着路线图跑一遍,再抄命令和代码,学习体验会轻松很多。 前两课我们已经把 Qt 的“界面底座”搭起来了,但真正做项目时,很多同学还是会卡在另一个问题上:界面会做了…...

Pixel Epic应用场景:律所尽调报告辅助生成+法律条文精准引用案例

Pixel Epic应用场景&#xff1a;律所尽调报告辅助生成法律条文精准引用案例 1. 法律行业的数字化挑战 法律尽职调查是并购交易、股权投资等商业活动中的关键环节。传统模式下&#xff0c;律师团队需要&#xff1a; 人工查阅数百页企业资料逐条核对法律法规手工编写数十页的尽…...

SEO 推广与传统广告推广有什么区别

SEO 推广与传统广告推广有什么区别 在当今的数字化时代&#xff0c;企业如何有效地推广自己的产品和服务成为了一个亟待解决的问题。两种常见的推广方式——SEO 推广与传统广告推广——各有优劣&#xff0c;企业需要根据自身的需求和市场环境进行选择。本文将详细探讨SEO推广和…...

MIT-BEVFusion LiDAR Encoder 保姆级拆解:从点云到BEV特征图,手把手带你过一遍代码

MIT-BEVFusion LiDAR Encoder 深度解析&#xff1a;从点云到BEV特征图的完整实现路径 当自动驾驶系统需要理解周围环境时&#xff0c;LiDAR点云数据的高效处理成为关键挑战。MIT-BEVFusion框架中的LiDAR编码器模块&#xff0c;通过创新的稀疏卷积架构&#xff0c;将无序的三维点…...

大模型预训练中的损失函数:从交叉熵到代码实现的全方位解析

大模型预训练中的损失函数&#xff1a;从交叉熵到代码实现的全方位解析 在深度学习领域&#xff0c;大语言模型的崛起彻底改变了自然语言处理的格局。这些庞然大物的核心驱动力之一&#xff0c;正是预训练阶段精心设计的损失函数。对于decoder-only架构的模型而言&#xff0c;交…...