当前位置: 首页 > 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 的类加…...

突破不可导策略的训练难题:零阶优化与强化学习的深度嵌合

强化学习&#xff08;Reinforcement Learning, RL&#xff09;是工业领域智能控制的重要方法。它的基本原理是将最优控制问题建模为马尔可夫决策过程&#xff0c;然后使用强化学习的Actor-Critic机制&#xff08;中文译作“知行互动”机制&#xff09;&#xff0c;逐步迭代求解…...

2025年能源电力系统与流体力学国际会议 (EPSFD 2025)

2025年能源电力系统与流体力学国际会议&#xff08;EPSFD 2025&#xff09;将于本年度在美丽的杭州盛大召开。作为全球能源、电力系统以及流体力学领域的顶级盛会&#xff0c;EPSFD 2025旨在为来自世界各地的科学家、工程师和研究人员提供一个展示最新研究成果、分享实践经验及…...

从深圳崛起的“机器之眼”:赴港乐动机器人的万亿赛道赶考路

进入2025年以来&#xff0c;尽管围绕人形机器人、具身智能等机器人赛道的质疑声不断&#xff0c;但全球市场热度依然高涨&#xff0c;入局者持续增加。 以国内市场为例&#xff0c;天眼查专业版数据显示&#xff0c;截至5月底&#xff0c;我国现存在业、存续状态的机器人相关企…...

基础测试工具使用经验

背景 vtune&#xff0c;perf, nsight system等基础测试工具&#xff0c;都是用过的&#xff0c;但是没有记录&#xff0c;都逐渐忘了。所以写这篇博客总结记录一下&#xff0c;只要以后发现新的用法&#xff0c;就记得来编辑补充一下 perf 比较基础的用法&#xff1a; 先改这…...

Java 加密常用的各种算法及其选择

在数字化时代&#xff0c;数据安全至关重要&#xff0c;Java 作为广泛应用的编程语言&#xff0c;提供了丰富的加密算法来保障数据的保密性、完整性和真实性。了解这些常用加密算法及其适用场景&#xff0c;有助于开发者在不同的业务需求中做出正确的选择。​ 一、对称加密算法…...

HBuilderX安装(uni-app和小程序开发)

下载HBuilderX 访问官方网站&#xff1a;https://www.dcloud.io/hbuilderx.html 根据您的操作系统选择合适版本&#xff1a; Windows版&#xff08;推荐下载标准版&#xff09; Windows系统安装步骤 运行安装程序&#xff1a; 双击下载的.exe安装文件 如果出现安全提示&…...

从零实现STL哈希容器:unordered_map/unordered_set封装详解

本篇文章是对C学习的STL哈希容器自主实现部分的学习分享 希望也能为你带来些帮助~ 那咱们废话不多说&#xff0c;直接开始吧&#xff01; 一、源码结构分析 1. SGISTL30实现剖析 // hash_set核心结构 template <class Value, class HashFcn, ...> class hash_set {ty…...

tree 树组件大数据卡顿问题优化

问题背景 项目中有用到树组件用来做文件目录&#xff0c;但是由于这个树组件的节点越来越多&#xff0c;导致页面在滚动这个树组件的时候浏览器就很容易卡死。这种问题基本上都是因为dom节点太多&#xff0c;导致的浏览器卡顿&#xff0c;这里很明显就需要用到虚拟列表的技术&…...

视觉slam十四讲实践部分记录——ch2、ch3

ch2 一、使用g++编译.cpp为可执行文件并运行(P30) g++ helloSLAM.cpp ./a.out运行 二、使用cmake编译 mkdir build cd build cmake .. makeCMakeCache.txt 文件仍然指向旧的目录。这表明在源代码目录中可能还存在旧的 CMakeCache.txt 文件,或者在构建过程中仍然引用了旧的路…...

人工智能(大型语言模型 LLMs)对不同学科的影响以及由此产生的新学习方式

今天是关于AI如何在教学中增强学生的学习体验&#xff0c;我把重要信息标红了。人文学科的价值被低估了 ⬇️ 转型与必要性 人工智能正在深刻地改变教育&#xff0c;这并非炒作&#xff0c;而是已经发生的巨大变革。教育机构和教育者不能忽视它&#xff0c;试图简单地禁止学生使…...