【Web前端开发】HTML基础

Web前端开发是用来直接给用户呈现一个一个的网页,主要包含实现用户的结构(HTML)、样式(CSS)、交互(JavaScript)。然而一个软件通常是由后端和前端完成的。可以查阅文档:HTML 教程 (w3school.com.cn)

1.HTML 

1.1HTML概念

HTML称为超文本标记语言

  • 超文本指:文本、声音,图片、视频、表格、链接等;
  • 标记指:由标签构成的语言。

1.2HTML结构

HTML基本结构如下: 

  • html标签是整个html文件中的根标签 
  • head标签是编写页面相关的属性
  • title标签是页面的标题
  • body标签是页面显示的内容

 1.3HTML基本标签

  •  标题标签<h1>~<h6>:借助标题标签,能够清晰地划分出页面内容的层次关系。

  • 段落标签<p>:是将每个段落区分开来
  • 换行标签<br>:两个换行标签相当于一个段落标签

  • 加粗标签strong / b:让字体变粗

  • 倾斜标签em / i:让字体变倾斜
  • 下划线标签ins / u:字体下边有一条线
  • 删除线标签del / s:字体被删除但是还是可以显现出来


  • 超链接标签a:
  1. href属性:点击跳转某个页面链接中,#代表占位符(也表示在当前页面刷新)
  2. target属性:默认在当前页面跳转_self,如果想要在新的页面打开就用_blank


  • 图片标签img:
  1.  src属性:指定图片路径,img标签必须搭配src使用
  2. alt属性:alt后面的信息表明图片加载失败后的提示信息
  3. title属性:当光标落在图片上时出现的提示信息
  4. width / height属性:修改图片大小
  5. border属性:给图片添加边框

  • 表格标签table:
  1. width / height属性:将表格中每一个小表格改成对应的width和height
  2. border属性:给表格添加边框
  3. cellspacing属性:表格中的边框默认为1px,该属性是将边框间隙进行调整
  4. align属性:将表格调至左、中、右任一位置(默认left,center,right)
  • 表格头标签thead:
  • 表格体标签tbody:
  • 表格中的行标签tr:
  • 表格中的列标签td:
  1. rowspan属性:合并行,从当前位置往下数几行合并
  2. colspan属性:合并列,从当前位置往下数几列合并


列表标签 

  • 有序列表标签ol:ol -》li
  1. type属性:1(默认数字编号),a(小写英文编号),A(大写英文编号),i(小写罗马编号),I(大写罗马编号)
  2. start属性:从某个位置编号开始
  • 无序列表标签ul:ul -》li
  1. type属性:disc(默认实心圆),square(实心方块),circle(空心圆)

表单标签

  • 表单域标签form:
  1. action属性:跳转至该链接
  • 表单控件标签input:
  1. type属性:其中的submit和reset标签必须在form标签内效果才能实现
  • 相关联标签label:
  1. for属性:for搭配着input中的id属性使用,如果要让两者相关必须要id和for相同值。例:如果我想要选择男的时候点击男也可以选中,那就需要给男这个字与input-radio加上相关联
  • 下拉菜单标签select:select -》option(设置默认值时用selected属性)
  • 文本域标签textarea:
  1. cols属性:设置列的默认值
  2. rows属性:设置行的默认值

div标签:独占一行

spanbiaoqian:不独占一行 

特殊符号

  1. &nbsp:空格。想要多少个空格就需要写多少遍
  2. &lt:小于号
  3. &gt:大于号
  4. &amp:按位与 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/904935.shtml

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

相关文章

MySQL 8.0 单节点部署与一主两从架构搭建实战

前言&#xff1a;在数据驱动的时代&#xff0c;数据库作为数据存储与管理的核心组件&#xff0c;其架构的选择与配置对系统的性能、可用性和扩展性至关重要。MySQL 作为一款广泛应用的开源关系型数据库&#xff0c;凭借其稳定的性能和丰富的功能&#xff0c;深受开发者和企业的…

数据库故障排查全攻略:从实战案例到体系化解决方案

一、引言&#xff1a;数据库故障为何是技术人必须攻克的 "心腹大患" 在数字化时代&#xff0c;数据库作为企业核心数据资产的载体&#xff0c;其稳定性直接决定业务连续性。据 Gartner 统计&#xff0c;企业每小时数据库 downtime 平均损失高达 56 万美元&#xff0…

牛客周赛round91

C 若序列为1 4 5 7 9 1 2 3&#xff0c;1 9一定大于1 1或1 4...所以只需要记录当前数之前数字的最大值&#xff0c;然后遍历取max即可&#xff0c;所以对于上面的序列有效的比较为1 9&#xff0c;2 9&#xff0c;3 9取max 代码 //求大于当前数的最大值&#xff0c;然后…

【MCAL】TC397+EB-tresos之I2c配置实战(同步、异步)

I2C总线是Philips公司在八十年代初推出的一种串行、半双工的总线&#xff0c;主要用于近距离、低速的芯片之间的通信。本篇文章首先从理论讲起&#xff0c;介绍了英飞凌TC3x系列芯片对应MCAL中对I2C驱动的定义与介绍&#xff0c;建议读者在阅读本篇文章之前对I2C有个简单的认识…

深拷贝与浅拷贝:理解 Python 中的对象复制机制

深拷贝与浅拷贝&#xff1a;理解 Python 中的对象复制机制 在 Python 编程中&#xff0c;对象的复制是一个常见的操作。然而&#xff0c;很多初学者在处理对象复制时会遇到困惑&#xff0c;尤其是在涉及到复杂数据结构&#xff08;如列表、字典、自定义对象等&#xff09;时。…

BeanPostProcessor和AOP

BeanPostProcessor Spring中有一个接口Oredr的getOrder()方法&#xff0c;这个方法返回值是一个int类型&#xff0c;Spring容器会根据这个方法的返回值 对容器的多个Processor对象从小到大排序&#xff0c;创建Bean时候依次执行他们的方法&#xff0c;也就是说getOrder()方法的…

拒绝服务攻击(DoS/DDoS/DRDoS)详解:洪水猛兽的防御之道

在数字时代&#xff0c;服务的可用性是衡量一个在线系统成功与否的关键指标之一。然而&#xff0c;存在一类被称为"拒绝服务攻击" (Denial of Service, DoS) 的网络攻击&#xff0c;其主要目的就是通过各种手段耗尽目标服务器或网络的资源&#xff0c;使其无法响应正…

小刚说C语言刷题—1078求恰好使s=1+1/2+1/3+…+1/n的值大于X时n的值

1.题目描述 求恰好使 s11/21/3⋯1/n 的值大于 X 时 n 的值。( 2≤x≤10 ) 输入 输入只有一行&#xff0c;包括 1个整数 X 。 输出 输出只有一行&#xff08;这意味着末尾有一个回车符号&#xff09;&#xff0c;包括 1 个整数。 样例 输入 2 输出 4 2.参考代码(C语言…

深度学习中的目标检测:从 PR 曲线到 AP

深度学习中的目标检测&#xff1a;从 PR 曲线到 AP 在目标检测任务中&#xff0c;评估模型的性能是非常重要的。通过使用不同的评估指标和标准&#xff0c;我们可以量化模型的准确性与效果。今天我们将重点讨论 PR 曲线&#xff08;Precision-Recall Curve&#xff09;、平均精…

MySQL 1366 - Incorrect string value:错误

MySQL 1366 - Incorrect string value:错误 错误如何发生发生原因&#xff1a; 解决方法第一种尝试第二种尝试 错误 如何发生 在给MySQL添加数据的时候发生了下面的错误 insert into sys_dept values(100, 0, 0, 若依科技, 0, 若依, 15888888888, ryqq.com, 0,…

[ctfshow web入门] web70

信息收集 使用cinclude("php://filter/convert.base64-encode/resourceindex.php");读取的index.php error_reporting和ini_set被禁用了&#xff0c;不必管他 error_reporting(0); ini_set(display_errors, 0); // 你们在炫技吗&#xff1f; if(isset($_POST[c])){…

Linux在web下http加密和配置虚拟主机及动态页面发布

web服务器的数据加密 1.简介&#xff1a;由于http协议以明文方式发送&#xff0c;不提供任何方式的数据加密&#xff0c;也不适合传输一些重要的信息&#xff0c;如银行卡号、密码等&#xff0c;解决该缺陷设计了安全套接字层超文本传输协议https&#xff1b; 2.https的握手流…

uni-app,小程序中的addPhoneContact,保存联系人到手机通讯录

文章目录 方法详解简介 基本语法参数说明基础用法使用示例平台差异说明注意事项最佳实践 方法详解 简介 addPhoneContact是uni-app框架提供的一个实用API&#xff0c;用于向系统通讯录添加联系人信息。这个方法在需要将应用内的联系人信息快速保存到用户设备通讯录的场景下非…

NHANES稀有指标推荐:HALP score

文章题目&#xff1a;Associations of HALP score with serum prostate-specific antigen and mortality in middle-aged and elderly individuals without prostate cancer DOI&#xff1a;10.3389/fonc.2024.1419310 中文标题&#xff1a;HALP 评分与无前列腺癌的中老年人血清…

【django.db.utils.OperationalError: unable to open database file】

解决platform.sh 环境下&#xff0c;无法打开数据库问题 场景 在platform.sh 执行python manage.py createsuperuser是提示 django.db.utils.OperationalError: unable to open database file 错误 原因 由于settings.py文件中 本地数据库配置在线上配置后&#xff0c;导致…

【前端分享】CSS实现3种翻页效果类型,附源码!

使用 css 可以实现多种翻页效果&#xff0c;比如书本翻页、卡片翻转等。以下是两种常见的翻页效果实现&#xff1a; 效果 1&#xff1a;书本翻页效果 通过 transform 和 rotateY 实现 3D 翻页效果。 html 结构 <divclass"book"> <divclass"page pa…

【部署满血Deepseek-R1/V3】大型语言模型部署实战:多机多卡DeepSeek-R1配置指南

大家好&#xff01;这里是迪小莫学AI&#xff0c;今天的文章是“”大型语言模型部署实战&#xff1a;多机多卡DeepSeek-R1配置指南“” 前言 随着大型语言模型的快速发展&#xff0c;如何高效部署这些模型成为技术团队面临的重要挑战。本文将分享基于DeepSeek-R1模型的多机多…

IPM IMI111T-026H 高效风扇控制板

概述&#xff1a; REF-MHA50WIMI111T 是一款专为风扇驱动设计的参考开发板&#xff0c;搭载了英飞凌的IMI111T-026H iMOTION™智能功率模块(IPM)。这个模块集成了运动控制引擎(MCE)、三相栅极驱动器和基于IGBT的功率级&#xff0c;全部封装在一个紧凑的DSO22封装中。REF-MHA50…

Linux 阻塞和非阻塞 I/O 简明指南

目录 声明 1. 阻塞和非阻塞简介 2. 等待队列 2.1 等待队列头 2.2 等待队列项 2.3 将队列项添加/移除等待队列头 2.4 等待唤醒 2.5 等待事件 3. 轮询 3.1 select函数 3.2 poll函数 3.3 epoll函数 4. Linux 驱动下的 poll 操作函数 声明 本博客所记录的关于正点原子…

互联网SQL面试题:用户会话时长分析

这是一个基于用户点击信息进行会话时长分析的案例&#xff0c;常见于互联网 App 使用分析。 问题描述 用户的访问记录存储在 user_access 表中&#xff0c;包含用户编号&#xff08;user_id&#xff09;以及访问时间&#xff08;access_time&#xff09;等信息。以下是一个示…