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

HTML(上)

1.web标准

主要包括结构(Structure)、表现(Presentation)和行为(Behavior)三个方面。

1.1 结构

结构用于对网页元素进行整理和分类,核心技术:HTML。
HTML (HyperText Markup Language):超文本标记语言,用于定义网页的内容和结构,使用标签来描述文本、图像、链接和其他元素,形成网页的骨架。

1.2 表现

表现用于设置网页元素的版式、颜色、大小等外观样式,核心技术:CSS。
CSS(Cascading Style Sheets):层叠样式表,用于控制网页的样式和布局。它将内容和样式分离,使网页的设计更灵活、更易于维护。CSS提供了各种属性来控制文本、颜色、字体、布局、响应式设计等方面。CSS 的层叠性允许多个样式表同时作用于同一个元素,并遵循一定的优先级规则。CSS的使用遵循 W3C 的规范,最新的版本CSS3引入了许多新的特性,例如Flexbox和Grid布局,使网页的布局更加灵活和强大。

1.3 行为

行为是指网页模型的定义及交互的编写,核心技术:Javascript。
JavaScript:是种脚本语言,用于为网页添加交互性和动态效果,可以响应用户的操作,例如点击、鼠标移动等,并动态地更新网页的内容。JS也用于处理AJAX请求、操作DOM(文档对象模型)、创建动画和特效等。

2.标签

2.1 标签分类

标签分类有:双标签(如:<html></html>)和单标签(如:<br />)

2.2 标签关系

标签关系分为:包含关系和并列关系。

2.3 基本结构标签

<html></html>根标签
<head></head>头部标签,必须包含<title></title>
<body></body>主体标签

2.4 常用标签

标题标签<h1></h1> ~ <h6></h6>   独占一行
段落标签<p></p>   段落间有较大空隙,如csdn编辑时的回车
换行标签<br />     换行标签无空隙,如csdn编辑时的shift+回车
加粗标签<b></b>和<strong></strong>
倾斜标签<i></i>和<em></em>
删除线标签<s></s>和<del></del>
下划线标签<u></u>和<ins></ins>
大布局标签<div></div>   一个div标签独占一行,行内可分割,放图片、文字等
小布局标签<span></span>   多个连续的span占同一行,跨距放置

图像标签<img src="图像URL" alt="无图片时文本" title="图片标题文本" width="500" height="500" border="15" />
①src为img的必须属性,指明图片路径;
②当路径图片不存在时,alt属性可补充文本说明;
③title属性为图片提示文本,鼠标放置图片上方时会显示该文字,一般指该图片内涵;
④width和height属性用于修改宽度和高度,一般情况修改一个即可,会等比例缩放;
⑤border属性为图片距离边框大小

2.5 其他标签

<!DOCTYPE html>文档类型声明标签,这里声明为html文档
<html lang="en">当前文档语言种类定义,en表英文、zh-CN表中文
<meta charset="UTF-8">字符编码为UTF-8

3. vscode插件推荐

Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code:中文翻译。

Auto Rename Tag:能自动同步重命名HTML或XML标签。当你修改开始标签时,结束标签也会自动更新,反之亦然,避免了手动修改两个标签时可能出现的错误。

open in browser:提供便捷的方式在不同的浏览器中打开当前文件,方便进行跨浏览器测试。

Live Server:支持实时刷新,当你保存代码更改时,浏览器会自动重新加载页面。

vscode-icons:图标主题插件,它会为你的 VS Code 文件资源管理器添加更清晰直观的图标。

Easy LESS:提供了 LESS 的语法高亮、代码补全和编译功能,方便你使用 LESS 编写 CSS。

会了吧:英文翻译软件,可查询当前代码文件含有的英文生词。

http://www.dtcms.com/a/275572.html

相关文章:

  • 基于Opencv的缺陷检测实战
  • 《目标检测模块实践手册:从原理到落地的尝试与分享》第一期
  • 服务器怎么跑Python项目?
  • 【408考研知识点全面讲解计算机学科专业基础综合(408)】——数据结构之排序
  • 无法打开windows安全中心解决方案
  • 从基础加热到智能生态跨越:艾芬达用创新重构行业价值边界!
  • 14. 请谈一下浏览器的强缓存和协商缓存
  • Django母婴商城项目实践(四)
  • 算法魅力-BFS解决最短路问题
  • 鸿蒙开发竖的线
  • Typecho集成PHPMailer实现邮件订阅功能完整指南
  • 如何查看服务器当前用户的权限
  • Windows X64环境下mysql5.6.51安装指南
  • 联邦学习客户端异构数据特征对齐:挑战、方法与应用
  • 如何防范金融系统中的SQL注入攻击
  • QWidget的属性
  • Java设计模式实战:备忘录模式与状态机模式的“状态管理”双雄
  • 基于MCP的CI/CD流水线:自动化部署到云平台的实践
  • 英语单词学习系统
  • 周末总结(2024/07/12)
  • 13. https 是绝对安全的吗
  • 代码审计-Struts2漏洞分析
  • 从LLM到VLM:视觉语言模型的核心技术与Python实现
  • React 组件中怎么做事件代理?它的原理是什么?
  • html-初级标签
  • JAX study notes[17]
  • Java从入门到精通!第四天(面向对象(一))
  • Unity VR手术模拟系统架构分析与数据流设计
  • 【设计模式】装饰(器)模式 透明装饰模式与半透明装饰模式
  • 前端MQTT入门指南:从零到实战的完整流程