Html1

一,HTML概述

网页开发需要学习的知识:
    html
    css
    javaScript
    
    两个框架
        VUE.js
        ElementUI UI user interface 用户界面


    HTML xml     可扩展标记语言-->存储数据    
    Markup Language标签语言都会提供各种标签


html (HyperText Markup Language)超文本标记语言
    文本:文字字符
    超文本:指的是网页内容
    标记:标签 标识 eg:买商品,商品上有标签,介绍了商品信息
    
    超文本标记语言中会提供许多不同功能的标签,使用这些标签来修饰我们这些网页的内容,通过浏览器运行解释网页,最终运行出我们想要的效果
    
    
    html语言就是一种标记语言,提供了许多的标签,不同的标签功能不同
                            网页就是通过这些标签描述出来的
                            最终有浏览器解释运行成我们看到的网页
   eg: <a href="地址">百度</a> 定义一个超链接
    

二,HTML基本语法

1.<!-- --> html注释样式

2.HTML基本样式

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body></body>
</html>

(1)<!DOCTYPE html>

声明html语言的版本信息 ,告诉浏览器以html5标准解释运行

(2)<html> </html>

骨架标签,根标签

所有标记语言都必须有一个根标签

html是网页中的根标签,所有内容都应该写在此标签中

(3)<head> </head>

头标签  主要对网页做设置:字符编码,标题,css样式,js脚本

包含了所有头部标签标签

头部区域的标签都有:<title>,<style>,<meta>,<link>,<script>

<title>:定义网页标题

<meta>:设置网页关键字,让搜索引擎查找

<meta charset="utf-8" />:网页字符集,需位于文档顶部

<link>标题处添加图标

(4)<body></body>

身体标签,用来写网页内容

3.标签

HTML中的标记指的就是标签

HTML使用标记标签来描述网页

(1)标签结构和写法

        1.闭合标签(双标签)
        2.自闭合标签:只有标签名,没有开始结束,完成一个特定的功能即可
        <标签名>
        <开始标签>标签体</结束标签>        闭合标签(双标签) 只对标签体内的内容进行修饰
        

(2)标签属性

        <标签名 属性=""  />完成一个特定的设置功能,没有标签体    自闭和标签(单标签)
        标签中可以有属性:可以标签属性改变变迁愿挨的显示风格
        <body text="red" bgcolor="green">
          属性写在标签的开始标签中
          一个标签可以有多个属性
          属性名 = "值"

三,基本常用标签

1,标题标签

<h1></h1>   <h2></h2>…<h6></h6>

共六种区别为从大到小,一个标签占一行

2,换行标签

<br/>

在前端代码中按enter键只能对代码进行换行,但向浏览器渲染时无法换行

所以使用<br/>换行(可被扫描识别)

3,段落标签

<p></p>p

一个<p>标签,代表一个独立段落,段落与段落之间有间隔

4,列表标签

(1)无序列表

<ul><li>列表项1</li><li>列表项2</li><li>列表项3</li><li>列表项4</li>
</ul>

(2)有序列表

<ol><li>列表项1</li><li>列表项2</li><li>列表项3</li><li>列表项4</li>
</ol>

通过给标签<ol>加属性type将其改为不同序列的有序标签

样式:<ol type=" ">

5,超链接

<a></a>

HTML使用超链接与网络上另一个文档相连,通俗的说就是使用超链接来访问其他网页资源

href 链接所要超链接地址

taeget 选择打开位置,_self在超链页面打开覆盖原本页面,_blank另起新窗口打开

6,图片链接

<img/>

注:图片的宽高一般不建议使用

7,转义字符

在HTML中预留了一些字符,这些字符不能再网页中直接使用

&lt;小于号
&gt;大于号
&nbsp;空格
&copy;版权(C)
&reg;注册商标(R)
&trade;商标(TM)

8,表格

(1)构成表格的标签

table标签:表格标签

tr标签:表格中的行

th标签:表格的表头(作为表头,其中数据会加粗,居中)

td标签:表格单元格

(2)表格的基本结构

<table>定义表格
<tr>定义表行
<th>定义表头</th>
</tr>
<tr>
<td>定义单元格</td>
</tr>
</table>

 (3)表格属性

width:定义宽
height:定义高
 cellpadding 只能写在table中 定义表格数据距表格边框距离   内边距
cellspacing 只能写在table中 定义不同单元格之间距离      外边距
align="内容水平方向对齐方式" left(默认) center right
valign="内容垂直方向对齐方式" top middle(默认) bottom
colspan="4" 合并列 从哪里额开始合并,在那列添加colspan="合并的数量" 记得删除多余的单元格
rowspan="4" 跨行合并单元格

例子:

eg1

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><!-- table 表示一个表格  可以设置宽和高cellpadding 只能写在table中 定义表格数据距表格边框距离   内边距cellspacing 只能写在table中 定义不同单元格之间距离      外边距tr    表示一行      设置行高th    表示一个单元格,还是表头,内容会加粗,并且居中td    表示一个单元格,align="内容水平方向对齐方式" left(默认) center rightvalign="内容垂直方向对齐方式" top middle(默认) bottom表格中的数据都只能写在单元格中--><table border="1" width="400" ><tr height="80" width="600"><th>姓名</th><th>java</th><th width="800">c</th><th>python</th></tr><tr><td>张三</td><td>50</td><td>80</td><td>90</td></tr><tr height="100" ><td align="center">张三</td><td valign="bottom">50</td><td align="center" valign="top">80</td><td>90</td></tr><tr><td>张三</td><td>50</td><td>80</td><td>90</td></tr></table></body>
</html>

eg2

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><!-- 快捷键  table>tr*4>td*4 创建一个4行4列的表格 --><!-- colspan="4" 合并列 从哪里额开始合并,在那列添加colspan="合并的数量" 记得删除多余的单元格  --><!-- rowspan="4" 跨行合并单元格  --><table border="1" width="400" height="300" ><tr><td colspan="4"></td></tr><tr><td></td><td></td><td></td><td rowspan="4"></td></tr><tr><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td></tr></table></body>
</html>

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

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

相关文章

一、I/O的相关概念

I/O的相关概念 1、I/O I/O即Input和Output&#xff0c;用户进程执行I/O操作&#xff0c;归结起来&#xff0c;也就是向操作系统发出请求&#xff0c;读请求就把数据填到缓冲区里&#xff0c;写数据就把缓冲区里数据排干&#xff0c;目的地可以是磁盘也可以是其他通道。进程通…

出现Invalid bound statement (not found)问题的原因可能有哪些

1.全局配置文件没配好&#xff1f; 检查全局配置文件application.properties或application.yml是否配置扫描mapper包的文件路径 #mybatis配置mapper文件路径 #mybatis.mapper-locationsclasspath:/mapper/*.xml #mybatis-plus配置mapper文件路径 mybatis-plus.mapper-locatio…

第十节:文本编辑

理论知识 文本编辑器的基本概念&#xff1a;文本编辑器是用于创建和编辑文本文件的工具。在 Linux 系统中&#xff0c;常见的文本编辑器有 vi、vim、nano 等。vi 和 vim 编辑器&#xff1a;vi 是一款经典的文本编辑器&#xff0c;vim 是 vi 的增强版&#xff0c;提供了更多的功…

部署一个自己的Spring Ai 服务(deepseek/通义千问)

Spring Boot 无缝接入 DeepSeek 和通义千问请求日志记录及其ip黑白名单 SpringBoot版本 3.2.0 JDK 版本为17 redis 3.2.0 mybatis 3.0.3 依赖引入 关键依赖 <dependency><groupId>org.springframework.ai</groupId><artifactId>spring-ai-openai-sp…

组装 (DIY) 一台显示器 (4K 屏支持 4 画面分屏 PBP 1080p x4)

首发日期 2025-04-26, 以下为原文内容: 家里的 PC 主机比较多, 如果同时开机, 显示器就不够用了. 因为穷, 窝租住的房间又很小, 放不下很多显示器. 所以, 窝希望买一台支持 分屏 功能的显示器. 最好是 4K 分辨率 (3840x2160) 的屏幕, 然后 4 分屏 (有 4 个 DP 或 HDMI 输入接口…

[Java入门]抽象类和接口

[Java入门]抽象类和接口 1. 抽象类1.1 抽象类的概念1.2 抽象类语法1.3 抽象类特性1.4 抽象类的作用 2. 接口2.1 接口的概念2.2 语法规则2.3 接口使用2.4 接口特性2.5 实现多个接口2.6 接口间的继承2.7 抽象类和接口的区别 3. Object类3.1 获取对象信息3.2 对象比较equals方法 1…

聚焦数字中国|AI赋能与安全守护:Coremail引领邮件办公智能化转型

4月28日&#xff0c;第八届数字中国建设峰会在福州拉开序幕。当天&#xff0c;数字中国新产品新技术发布会开讲&#xff0c;Coremail受邀亮相现场&#xff0c;与与会嘉宾分享AI在邮件产品领域的最新应用成果和实践经验。 Coremail首席客户代表刘子建以《AI赋能与安全守护&#…

Qt官方案例知识点总结(拖放操作——Drag And Drop Robot )

-------------------------------------------------------------------------------------------------------------------------------- QPixmap轮廓剪裁 去掉Pixmap的外围部分&#xff0c;如下&#xff1a; QPixmap pixmap("./img"); //调用createHeuristicMas…

【LLM】MOE混合专家大模型综述(重要模块原理)

note 当前的 MoE 架构就是一个用显存换训练时长/推理延迟的架构MoE 目前的架构基本集中在于将原先 GPT 每层的 FFN 复制多份作为 n 个 expert&#xff0c;并增加一个 router&#xff0c;用来计算每个 token 对应到哪个 FFN&#xff08;一般采用每个 token 固定指派 n 个 exper…

电子病历高质量语料库构建方法与架构项目(临床情景理解模块篇)

引言 随着人工智能技术在医疗健康领域的广泛应用,电子病历(Electronic Medical Records,EMR)作为临床医疗数据的重要载体,已成为医学研究和临床决策支持的关键资源。电子病历高质量语料库的构建为医疗人工智能模型的训练和应用提供了基础支撑,其中临床情境理解模块是连接…

大连理工大学选修课——机器学习笔记(1):概述

机器学习概述 机器学习的本质 机器学习是为了设计解决问题的算法。 为输入与输出建立某种映射&#xff1a; 类似于函数关系&#xff1a; Y f ( X ) Yf(X) Yf(X) 不同的映射方法体现了不同的思想。 相关概念 深度学习是机器学习的一个分支 深度学习是深层次化的神经网…

远程 Debugger 多用户环境下的用户隔离实践

远程 Debugger 多用户环境下的用户隔离实践 在现代分布式开发和云原生环境下&#xff0c;远程 Debugger 的应用愈发普遍。然而&#xff0c;随着多人协作和多租户场景的出现&#xff0c;**远程 Debugger 的“用户隔离”**变得至关重要。只有实现了良好的用户隔离&#xff0c;才…

毕业论文 | 基于C#开发的NMEA 0183协议上位机

以下是基于C#开发的NMEA 0183协议上位机完整实现方案,包含串口通信、数据解析与可视化功能: 基于C#开发的NMEA 0183协议上位机 一、项目结构二、核心代码实现1. 数据模型定义2. 串口通信管理3. NMEA协议解析核心4. 主界面实现(Windows Forms)三、界面设计关键元素(需在窗体…

Qt -DFS可视化

博客主页&#xff1a;【夜泉_ly】 本文专栏&#xff1a;【暂无】 欢迎点赞&#x1f44d;收藏⭐关注❤️ 目录 前言关于如何sleep实现思路Pixmapspixmaps.hpixmaps.cpp MapSquaremapsquare.hmapsquare.cpp dfsthreaddfsthread.hdfsthread.cpprun dfs其他 WidgetUnit其他 Qt -DFS…

RHCSA Linux 系统 文件系统权限

1. 文件的一般权限 &#xff08;1&#xff09;文件权限标识解读 drwxr - xr - x. 12 root root 144 Feb 17 16:51 usr ➤d&#xff1a;文件类型&#xff08;d 表示目录&#xff09; ➤rwx&#xff1a;文件所有者权限&#xff08;读 r&#xff0c;写 w&#xff0c;执行 x&am…

华为云IoT平台与MicroPython实战:从MQTT协议到物联网设备开发

目录 前言 1. 华为云 1.1. 创建实例 1.2. 创建产品 1.3. 编辑服务模型 1.4. 注册设备 1.4.1. 复制设备连接参数 1.5. 连接参考代码 2. micropython版-物联网 2.1. 环境搭建 2.2. 实现步骤 2.3. 示例代码 结语 前言 物联网&#xff08;IoT&#xff09;技术的快速发…

2025-04-30 AIGC-如何做短片视频

摘要: 2025-04-30 AIGC-如何做短片视频 如何做短片视频: 一、画图修图 1.保存视频&#xff08;无水保存&#xff09; 2.文案提取&#xff08;提取文案&#xff09; 3. DeepSeek(提示词&#xff09; 4.小梦Ai&#xff08;图片视频&#xff09; 5.修图Ai 6.扩图Ai 7.养生…

硬件工程师面试常见问题(10)

第四十六问&#xff1a;锁存器&#xff0c;触发器&#xff0c;寄存器三者的区别 触发器&#xff1a;能够存储一位二值信号的基本单元电路统称为 "触发器"。&#xff08;单位&#xff09; 锁存器&#xff1a;一位触发器只能传送或存储一位数据&#xff0c;而在实际工…

外部访问 Kubernetes 集群中 MQ 服务的方案

外部访问 Kubernetes 集群中 MQ 服务的方案 当您在 Kubernetes 集群中部署了消息队列服务&#xff08;如 RabbitMQ、Kafka、ActiveMQ 等&#xff09;后&#xff0c;以下是外部客户端访问这些服务的几种可靠方法&#xff1a; 一、基础访问方案 1. NodePort 方式暴露服务 # M…

论文笔记(八十二)Transformers without Normalization

Transformers without Normalization 文章概括Abstract1 引言2 背景&#xff1a;归一化层3 归一化层做什么&#xff1f;4 动态 Tanh &#xff08;Dynamic Tanh (DyT)&#xff09;5 实验6 分析6.1 DyT \text{DyT} DyT 的效率6.2 tanh \text{tanh} tanh 和 α α α 的消融实验…