程序员经验分享-hwhale

一，HTML&CSS

2023-05-16

▲一个网页是由三部分组成，分别是：

  • 结构：对应的是 HTML 语言
  • 表现：对应的是 CSS 语言
  • 行为：对应的是 JavaScript 语言

1.HTML

1）文件结构：

①文件类型说明：

HTML文件中第一行的内容，用来告诉浏览器当前HTML文档的基本信息，其中最重要的就是当前HTML文档遵循的语法标准。

HTML5版本的文档类型声明是：

<!DOCTYPE html>

②结构标签：

 ③注解：

HTML注释的写法是：  

<!-- 注释内容 -->

2）HTML语法规则：

  • 根标签有且只能有一个
  • 无论是双标签还是单标签都必须正确关闭
  • 标签可以嵌套但不能交叉嵌套
  • 注释不能嵌套
  • 属性必须有值，值必须加引号，单引号或双引号均可
  • 标签名不区分大小写但建议使用小写

3)HTML的常用标签：

注意：在上图页面中版权所有里有特殊字符，需要使用转义字符。有如下转义字符：

 

img：定义图片

  • src：规定显示图像的 URL（统一资源定位符）
  • height：定义图像的高度
  • width：定义图像的宽度

audio：定义音频。支持的音频格式：MP3、WAV、OGG

  • src：规定音频的 URL
  • controls：显示播放控件

video：定义视频。支持的音频格式：MP4, WebM、OGG

  • src：规定视频的 URL
  • controls：显示播放控件 尺寸单位：

height属性和width属性有两种设置方式：

  • 像素：单位是px
  • 百分比。占父标签的百分比。例如宽度设置为 50%，意思就是占它的父标签宽度的一般（50%）

资源路径： 图片，音频，视频标签都有src属性，而src是用来指定对应的图片，音频，视频文件的路径。此处的图片，音频，视频就称 为资源。资源路径有如下两种设置方式：

  • 绝对路径：完整路径 这里的绝对路径是网络中的绝对路径。 格式为： 协议://ip地址:端口号/资源名称。 如： 这里src属性的值就是网络中的绝对路径。
  • 相对路径：相对位置关系 找页面和其他资源的相对路径。

 ./ 表示当前路径

../ 表示上一级路径

../../ 表示上两级路径 

ul标签: 无序列表
ol标签: 有序列表
li标签: 列表项

a标签: 超链接标签:
​    target: 打开方式
​    href: 指定要跳转的链接地址

table标签: table > tr > td
tr标签: 行
td标签: 列
​    合并行: rowspan
​    合并列: colspan

form 标签: 表单标签,主要是用来向服务器提交数据
    method: 提交方式 get post
    action : 提交的路径 

input 标签:
type:
​    password: 密码框
​    text: 文本
​    submit: 提交
​    button: 普通的按钮
​​    reset: 重置按钮
​​    radio: 单选按钮 设置name属性让它们是一组
​​    checkbox: 复选按钮 

★HTML的块标签

  1. div标签: 默认占一行,自动换行
  2. span标签: 内容显示在同一行

 2.css

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

html

amp

css

一，HTML&CSS 的相关文章

  • 如何使用纯html5连接服务器端数据库？

    我们可以使用纯 html5 访问服务器端数据库 即不使用 PHP ASP 或任何其他后端语言 吗 我们可以使用Web sql数据库 但它存储在客户端 我需要访问服务器端数据库 可能是 mysql 或任何其他 HTML5 只是一个静态文档 因

  • 在 Dash 中使用单选项目在图表之间切换

    我是 Dash 新手 我想制作一个带有在两个图表之间切换的单选项目的应用程序 但我不知道该怎么做 任何帮助将不胜感激 我已经写了一段代码 但我不知道我是否接近 如果可能的话 我想在最后制作的散点图和散点图2之间进行交换 import num

  • 使用 React Router 路由到另一个组件时 CSS 不会改变

    当我使用以下命令将我的应用程序路由到另一个组件时反应路由器 DOM https www npmjs com package react router dom CSS 不会改变 这是演示代码的简约版本 App js import React

  • 当不止一位父母有独生子女时，独生子女

    第一次发帖 当前学生正在学习 CSS 伪选择器 问 如果一个元素是两个或多个不同父母的独生子 那么如何仅对其中一个父母使用独生子 背景 我正在 CSS Diner 上独生子女课程 布局如下 苹果放在盘子里 泡菜放在盘子里 泡菜放在便当上 大

  • 如何以编程方式将图片上传到 Facebook？

    好的 这是我的第一个问题 如何允许我网站上的访问者在他们的 Facebook 新闻源上分享我的照片 https webapps stackexchange com questions 10140 how do i allow visitor

  • 选择最后 3 个子元素

    我知道你可以选择最后一个孩子 last child或某个孩子 nth child 如果您知道他们的位置 号码 我需要的是选择最后 3 个子元素 而不知道可能有多少个子元素 我知道有一种东西叫做 nth last child但我无法真正理解它

  • 删除通过pandas创建的html表格的边框

    我正在使用 python 脚本在网页上显示数据框 我用了df to html将我的数据框转换为 HTML 但是 默认情况下 它将边框设置为 0 我尝试通过自定义 css 模板来覆盖它 但它不起作用 这是我的熊猫代码 ricSubscript

  • 查看 chrome 开发者工具中的更改差异

    devtools 可以显示原始文件和当前修改之间的差异吗 或者对于 CSS 来说是修改后的选择器及其新值的列表 我知道 本地修改 每次更改的历史 但不是原始的 当前 映射到工作区 将修改后的文件保存到其源中 源地图 请参阅预处理源 SCSS

  • 更新标记文本谷歌地图API

    因此 我在我的网站上使用 Google 地图 API 并且希望标记文本等于另一个 html 元素的值 这里有人知道如何更新 google 地图 API 中标记的文本属性的值吗 这是我关于该问题的代码 var map marker var i

  • 如何在 .tsx 打字稿中包含 .css 文件？

    如何在 tsx 中包含 css 文件以及如何使用它 即我如何渲染静态文件 import as React from react import Header from header import home css export class H

  • 如何使用 !important 使用 jquery 覆盖内联样式？

    我有一个 p style color red important sample text here p 然后我想在 JQuery 中覆盖该样式 我该怎么做 using important在 CSS 中显然行不通 但还是尝试了 我在想我是否可

  • 为 HTML5 Django Web 应用程序实现实时通知系统

    我目前正在开发一个由 Django apache 提供服务的 HTML5 Web 应用程序 该应用程序的目标是监视多个设备 所有客户端逻辑都是用 Angular 编写的 所有数据都来自对后端进行的基于 JSON 的类似 REST 的调用 我

  • Reactjs 中的嵌套注释

    我有以下 json comments id 1 comment text asdasdadasdsadsadadsa author adsfasdasdsad post id 1 ancestry null archived false c

  • 如何在CSS中的图像中添加渐变/滤镜

    我这里有一张图片 我想复制 theverge com 网站中的 css 样式 见下图 我将在我的博客 主页 中使用它 因为我试图复制网站 theverge com 的内容 这就像在半透明渐变和特色图像上显示帖子标题和作者姓名 请帮忙 这是我

  • CSS 样式的段落，带有段落编号和旁注

    我想在网上发布一段带有段落编号和旁注的文本 我正在使用 哈克贝利 费恩历险记 作为测试 参见http jsfiddle net 29Mdt http jsfiddle net 29Mdt 我希望将段落编号放在左侧边距中 将旁注放在右侧边距中

  • 整理 CSS 的最佳方法是什么？ [关闭]

    Closed 这个问题是基于意见的 help closed questions 目前不接受答案 我正在整理一个以前由不同的人修改过的网站 这是我拥有的页面的骨架 测试 html http pastry se 94064 nav css ht

  • 向 CSS 网格系统（如 960.gs）添加填充

    我正在构建一个使用流行的 960 gs 16 列网格系统的网站 这是设计相关部分的屏幕截图 网格列覆盖在顶部 问题是白色的 现在流行 框 由于它有白色背景 我想要在盒子内添加一些填充物 很简单 我添加了一个 div 在父级内部并对其进行适当

  • 如何在上传图像文件时禁用捕获（在ipad上使用safari）

    我想在 ipad 上使用 safari 上传图像 这是我的 html 代码

  • 如何使用 JavaScript 禁用 HTML 按钮？

    我读到过 您可以通过简单地附加来禁用 使其物理上不可点击 HTML 按钮disable添加到其标签 但不作为属性 如下所示

  • jQuery / Javascript - 检测 WooCommerce 商店通知 html 是否可见

    我正在寻找一种方法来确定使用 JavaScript jQuery 是否显示 WooCommerce 商店通知 商店通知的 HTML 看起来像这样 p class woocommerce store notice demo store sty

随机推荐

  • pycharm下的vc2没有代码提示（不用改文件）

    我第一次遇到cv2没有代码提示的时候也是一脸懵逼 xff0c 在网上搜索了各种解决办法 包括但不限于修改 init py文件 xff0c 复制文件 xff0c 降低opencv的版本等 xff0c 都没有用 但是最后还是参考网上建议以及自己

  • delete和delete[]的区别

    对于简单类型 简单类型像 int char int long struct等 由于对象是没有析构函数的 所以delete和delete 是一样的 int arr 61 new int 10 delete arr delete arr 两种方

  • Result Maps collection already contains value for…BaseResultMap

    异常信息 Result Maps collection already contains value for BaseResultMap 假如使用generatorSqlmapCustom逆向工程生成代码 xff0c 即生成dao文件和ma

  • Debian 11 软件最大化占不满屏幕

    原来是自己不知何时手长把 Workspace margin 给设置了 xff0c 导致软件最大会占不满全屏 就是设置 gt Workspace gt margins 把 17 改成 0 就好了 曾一度难受的想重装系统 xff0c 原来是这么

  • static静态成员

    静态成员包括 xff1a 静态成员变量和静态成员函数 一 静态成员变量 静态成员变量的特点 所有对象都共享一份数据 编译阶段就分配内存 只能在类内声明 xff0c 类外初始化 静态成员变量也是有访问权限的 1 验证 所有对象都共享一份数据

  • matlab如何删除矩阵某行或列？

    要删除矩阵某一行或某一列 xff0c 只需要将某一行或某一列赋予一个空矩阵即可 例如 xff1a clc clear close all x 61 eye 4 先创建一个4 4矩阵 xff1a x 61 eye 4 xff0c 得到 之后输

  • Excel导出 POI 响应头设置 Content-Type: application/vnd.ms-excel 异常解决方法

    386条消息 Excel导出 POI 响应头设置 Content Type application vnd ms excel 异常解决方法 刘涛 的博客 CSDN博客 application vnd ms excel charset 61

  • Android音视频技术之MediaPlayer视频窗口尺寸适配

    作者 xff1a JulyYu 前言 使用MediaPlayer播放能力后再视频播放上还有一个问题需要解决 xff0c 那就是适配尺寸适配 默认情况使用SurfaceView播放视频可能会出现视频被拉伸或是压缩的情况 MediaPlayer

  • Linux系统中管理文件的五个关键命令

    1 mkdir 创建目录 xff1a 此命令可以创建一个或多个目录或子目录 但是 xff0c 当目录已经存在或者在不存在的目录中创建子目录 xff0c mkdir命令就会失败并出现错误 mkdir p命令将会为子目录创建缺失的父目录 2 c

  • Linux——总复习1

    1 要注意自己处于当前那个目录位置 2 将file1的前五行 后三行重定向 附加到file2 输出重定向 head 5 file1 gt file2 tail 3 file1 gt gt file2 3 ls与cat区别 ls 列出目录的目

  • Linux——运行基本容器

    1 安装容器管理 使用yum命令安装container tools模块 包括工具podman和skopeo yum module install container tools 2 选择容器镜像和注册表 xff08 1 xff09 容器注册

  • Linux——查找并管理容器镜像

    1 配置容器注册表 xff08 1 xff09 posman使用主机系统上的registries conf文件来获取有关它可以使用的容器注册表的信息 文件中 registries insecure 部分中列出了不安全的注册表 xff08 2

  • Linux——RHEL8的启动过程

    xff08 1 xff09 接通电源 xff0c 系统固件运行开机自检 xff0c 并初始化部分硬件 xff08 2 xff09 系统固件搜索可启动设备 xff08 3 xff09 系统固件从磁盘读取启动加载器 xff0c 将系统控制权交给

  • Ansible——介绍ansible

    1 什么是ansible xff1f ansible是一款开源自动化平台 xff0c 基于python开发 xff0c 可以多节点发布 远程任务执行的自动化引擎 xff0c 可以实现批量系统配置 批量程序部署 批量运行命令等 2 ansib

  • WSL2 Ubuntu Can‘t open display解决方法

    使用MobaXterm开启Ubuntu后 xff0c ncview打开文件时报错 xff1a MoTTY X11 proxy Unsupported authorisation protocol Error Can 39 t open di

  • Ansible——部署ansible

    1 ansible清单 清单 xff1a 定义ansible将要管理的一批主机 xff0c 可以通过在静态文本文件中定义或外部来源获取信息的脚本来动态确定 xff0c 因此 xff0c 分为静态主机清单 xff08 包括INI或YAML样式

  • nltk安装出错，nltk_data语料库下载

    首先 xff0c 安装nltk要有nltk库和nltk数据包 xff0c 下载方法网上也很全面 但本文是在在使用nltk中的语料库omw 1 4 主要用于词性还原 xff0c 无法找到对应文件 环境 xff1a pycharm 3 1 An

  • Ubuntu ver.22.04.2 root用户登录

    ps xff1a 因为站内的多种方法需要的文件 xff0c 我的白板机没有 xff0c 于是提供下自己的解决思路 补充 xff1a 一种可能的方法 xff1a 打开终端 xff0c 键入sudo i 回车 xff0c 并输入当前账户的密码

  • go语言中time包基础内容

    目录 一 介绍简单的几个时间UTC CST CDT 二 获取时间的函数 三 时间的加 减 等 四 判断两时间发生前后 五 周期性定时器 time Tick 时间间隔 六 时间也有格式化 七 时间字符串格式的解析 八 时区 xff08 tim

  • 一，HTML&CSS

    一个网页是由三部分组成 xff0c 分别是 xff1a 结构 xff1a 对应的是 HTML 语言表现 xff1a 对应的是 CSS 语言行为 xff1a 对应的是 JavaScript 语言 1 HTML 1 xff09 文件结构 xff

热门标签