前端基础知识

一、脚本script

定义：脚本简单地说就是一条条的文字命令，这些文字命令是可以看到的，脚本程序在执行时，是由系统的一个解释器，将其一条条的翻译成机器可识别的指令，并按程序顺序执行

作用：可以由应用程序临时调用并执行，各类脚本被广泛地应用于网页设计中，因为脚本不仅可以减小网页的规模和提高网页浏览速度，而且可以丰富网页的表现，如动画，声音

例子：点击网页上的Email地址时，能自动调用Outlook Express或Foxmail这类邮箱软件，就是通过脚本功能来实现的。（点击哪里跳转哪里）

二、元信息meta

元信息是关于信息的信息，用于描述信息的结构、语义、用途和用法等。元信息允许服务器提供所发送数据的信息                            

 三、HTML 标签

HTML 文档和 HTML 元素是通过 HTML 标签进行标记的

HTML 标签由开始标签和结束标签组成

开始标签是被括号包围的元素名

结束标签是被括号包围的斜杠和元素名

某些 HTML 元素没有结束标签，比如 <br />

1、Head

<head> 元素是所有头部元素的容器。<head> 内的元素可包含脚本，指示浏览器在何处可以找到样式表，提供元信息，等等。

以下标签都可以添加到 head 部分：<title>、<base>、<link>、<meta>、<script> 以及 <style>。

1）HTML <title> 元素    

<title> 标签定义文档的标题。

2）HTML <base> 元素  

<base> 标签为页面上的所有链接规定默认地址或默认目标（target）：

<base href="http://www.runnob.com/image" target="clock">
3）HTML <link> 元素   

<link> 标签定义文档与外部资源之间的关系。

<link rel="stylesheet" type="text/css" href="mystyle.css">
4）HTML <style> 元素   

<style> 标签用于为 HTML 文档定义样式信息。

<style type="text/css">
    p{
        font-size:24px;
        color:blue;
        text-indent:2em;
    }
</style>
5）HTML<font>

规定文本的字体、字体尺寸、字体颜色。

6）HTML <script> 元素  

<script>标签用于加载脚本文件

7）HTML<style>元素

<meta charset="UTF-8">         

charset 属性规定 HTML 文档的字符编码。

常用的值：UTF-8 - Unicode 字符编码    ISO-8859-1 - 拉丁字母表的字符编码                          

  

<meta http-equiv="参数" content="参数变量值" />

http-equiv属性主要有以下几种参数：

<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

content-Type(显示字符集的设定)
说明：设定页面使用的字符集。
用法： ＜meta http-equiv=“content-Type” content="text/html; charset=gb2312"＞

<meta http-equiv="Cache-Control" content="no-cache"/>

清除缓存（再访问这个网站要重新下载！）

Cache-Control头域
Cache-Control指定请求和响应遵循的缓存机制。在请求消息或响应消息中设置Cache-Control并不会修改另一个消息处理过程中的缓存处理过程。请求时的缓存指令包括no-cache、no-store、max-age、max-stale、min-fresh、only-if-cached，响应消息中的指令包括public、private、no-cache、no-store、no-transform、must-revalidate、proxy-revalidate、max-age。各个消息中的指令含义如下
Public指示响应可被任何缓存区缓存
Private指示对于单个用户的整个或部分响应消息，不能被共享缓存处理。这允许服务器仅仅描述当用户的部分响应消息，此响应消息对于其他用户的请求无效
no-cache指示请求或响应消息不能缓存
no-store用于防止重要的信息被无意的发布。在请求消息中发送将使得请求和响应消息都不使用缓存。
max-age指示客户机可以接收生存期不大于指定时间（以秒为单位）的响应
min-fresh指示客户机可以接收响应时间小于当前时间加上指定时间的响应
max-stale指示客户机可以接收超出超时期间的响应消息。如果指定max-stale消息的值，那么客户机可以接收超出超时期指定值之内的响应消息。

<meta http-equiv="Expires" content="0"/>

设定网页的到期时间

<meta http-equiv="Pragma" content="no-cache"/>

是用于设定禁止浏览器从本地机的缓存中调阅页面内容，设定后一旦离开网页就无法从Cache中再调出

＜meta http-equiv="Refresh" content="2 URL=http://www.NET.cn/"＞

Refresh(刷新)
说明：自动刷新并指向新页面。

<meta http-equiv="Cache-Control" content="no-store"/>

强制缓存在任何情况下都不要保留任何副本

<meta http-equiv="Pics-label" contect="">

Pics-label(网页等级评定)

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

关键字,给搜索引擎用的

2、Body

1）HTML 标题（Heading）

通过 <h1> - <h6> 等标签进行定义的。

<h1>This is heading 1</h1>

<h2>This is heading 2</h2>

<h3>This is heading 3</h3>

<h4>This is heading 4</h4>

<h5>This is heading 5</h5>

<h6>This is heading 6</h6>


<p>请仅仅把标题标签用于标题文本。不要仅仅为了产生粗体文本而使用它们。请使用其它标签或 CSS 代替。</p>

2）HTML 链接

通过 <a> 标签进行定义的。

<a href="http://www.w3school.com.cn">This is a link</a>

3）HTML 图像

通过 <img> 标签进行定义的。

<img src="w3school.jpg" width="104" height="142" />

4）HTML 段落

是通过 <p> 标签进行定义的。

<p>这是段落。</p>

 

5）HTML<body>标签

alink  规定文档中活动链接（active link）的的颜色。

background  + 图片地址  规定文档的背景图像。

为了不重复 要这样

background-image:url(图片地址);

绝对路径要  /

相对路径要  \

bgcolor    + 颜色     规定文档的背景颜色。

<body bgcolor="yellow">

link    规定文档中未访问链接的默认颜色。

text    规定文档中所有文本的颜色。

vlink  规定文档中已被访问链接的颜色。

6）HTML <br> 标签

换行。

<br> 标签是空标签（意味着它没有结束标签，因此这是错误的：<br></br>）。在 XHTML 中，把结束标签放在开始标签中，也就是 <br />。

7）HTML <form> 标签

<form> 标签用于为用户输入创建 HTML 表单。

表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。

表单还可以包含 menus、textarea、fieldset、legend 和 label 元素。

表单用于向服务器传输数据。

8）HTML <ul> 标签

<ul> 标签定义无序列表。

在标签里加入额外信息，进行修饰

修饰的内容（插入到段落里）

  1. 语法：<align=对齐方式>
    align属性需要设置在标题标记的后面。常见的对齐方式的取值由left，center，right。

9）HTML< font >标记

用来控制字体、字号和颜色等属性：

设置的字体效果必须在浏览器中安装相应的字体后才可以正确浏览

<font family=”字体样式”>......</font>

 size属性用来设置字体的大小，它有绝对和相对两种方式。从1到7的整数，代表字体大小的绝对字号。从-4到+4的整数，字体相对于3号放大和缩小字号。

<font size=”文字字号”>......</font>

通过不同的颜色表现不同的文字效果

<font color=”字体颜色”>......</font>

10）加粗文字

<b>加粗的文字</b> <strong>加粗的文字</strong>

在< b >和< /b >之间的文字或在< strong >和< /strong >之间的文字，在浏览器中都会以粗体字体显示。该元素的首尾部分都是必须的，如果没有结尾标记，则浏览器会认为从< b>开始的所有字体都是粗体

  1. 11）斜体标记i、em、cite

<i>斜体文字</i>
<em>斜体文字</em>
<cite>斜体文字</cite>

 

12）上标标记sup和下标标记sub

<sup>上标的内容</sup>

13）大字号标记big和小字号标记small

<big>大字号内容</big> 
<small>小字号内容</small>

Big标记用来增大文本中字号的大小，它所包含的文字都会在原来的字号上增加一级。如果由多个< big >元素作用于同一个文本，则字号会被逐级增大

14）下划线标记

<u>下划线的内容</u>

15）插入空格

&nbsp

16）插入特殊符号

一般情况下，特殊符号的代码由前缀“&”、字符名称和后缀“；”组成。使用方法与空格符号类似

17）给字体加下划线及颜色以及所在字体颜色

<span style="border-bottom:1px soild下划线颜色;line-height:30px" >
    <font color="字体颜色">字体</font>
</span>

18）设置警告消息框

 <script>

    window.onload = function(){

    alert("文本内容");

    }

</script>

19）style标签里面的属性

在里面对其h、p进行设置以方便对下面的body标签进行设置

20）div标签

将文档中的一个部分会显示为特定颜色

<div> 是一个块级元素。这意味着它的内容自动地开始一个新行。实际上，换行是 <div> 固有的唯一格式表现。可以通过 <div> 的 class 或 id 应用额外的样式。

不必为每一个 <div> 都加上类或 id，虽然这样做也有一定的好处。

class 用于元素组（类似的元素，或者可以理解为某一类元素），而 id 用于标识单独的唯一的元素。

要在body用的话 id=“”在head的div前加#  class=“”在head的div前加.

21）缩进

text-indent

21）Font - size

表示字体大小

22）设置边界

左边距   leftmargin

上边距   topmargin

可直接写出margin：0 auto 0 10px 代表了上0 右自动 下0 左10

23）注释

<comment>标签用于在HTML源代码中插入注释。浏览器在呈现网页时将忽略注释。你可以用注释来解释你的代码，以便日后读懂并修改代码。

相当于<! --.........-- >

24）强调

<strong></strong>

25）设置边框

border:1px solid  #cccfff 代表粗细为1px、实线、颜色为#cccfff

26）拼音在字上面注释

软<rt>ruan</rt>件<rt>jian</rt>工<rt>gong</rt>程<rt>cheng</rt></ruby>

  1. 27）<ol>有序列表

28）<dl>定义列表

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

element：日历 / 使用记录

element：日历 / 使用记录

一、预期效果 Element - The worlds most popular Vue UI framework element默认样式 目标样式 二、Calendar 属性 参数说明类型可选值默认值value / v-model绑定值Date/string/number——range时间范围&#xff0c;包括开始时间与结束时间。开始时间必须是周一&#xff0c;…
阅读更多...
【HuggingFace Transformer库学习笔记】基础组件学习：Evaluate

【HuggingFace Transformer库学习笔记】基础组件学习：Evaluate

基础组件学习——Evaluate Evaluate使用指南 查看支持的评估函数 # include_community&#xff1a;是否添加社区实现的部分 # with_details&#xff1a;是否展示更多细节 evaluate.list_evaluation_modules(include_communityFalse, with_detailsTrue)加载评估函数 accuracy…
阅读更多...
Linux终端常见用法总结

Linux终端常见用法总结

熟悉Linux终端的基础用法和常见技巧可以极大提高运维及开发人员的工作效率&#xff0c;笔者结合自身学习实践&#xff0c;总结以下终端用法供同行交流学习。 常 见 用 法 &#x1f3af; 1&#xff1a;快捷键 1.1 Alt . 在光标位置插入上一次执行命令的最后一个参数。 1.2 Ct…
阅读更多...
图片特效/增强GUI程序

图片特效/增强GUI程序

程序下载地址&#xff1a;mendianyu/pictureConvert: 图片特效/增强GUI程序&#xff0c;借助百度接口实现人像动漫化&#xff0c;模糊图片变清晰等等功能 (github.com) 图片特效/增强GUI程序 借助百度接口实现人像动漫化&#xff0c;模糊图片变清晰等等功能 程序介绍 运行Ima…
阅读更多...
码牛课堂首推——鸿蒙南北双向开发学习路线图标准版~

码牛课堂首推——鸿蒙南北双向开发学习路线图标准版~

鸿蒙&#xff01;鸿蒙&#xff01;鸿蒙&#xff01; 要说2023-2024年IT圈最火爆的名词&#xff0c;一定是鸿蒙&#xff01; 2023年9月25日&#xff0c;华为发布会正式宣布2024年第一季度将推出HarmonyOS NEXT版本&#xff0c;这意味着鸿蒙原生应用开发将彻底摆脱Android手机系…
阅读更多...
redis夯实之路-集群详解

redis夯实之路-集群详解

Redis有单机模式和集群模式。 集群是 Redis 提供的分布式数据库方案&#xff0c;集群通过分片( sharding )来实现数据共享&#xff0c;并提供复制和故障转移。集群模式可以有多个 master 。使用集群模式可以进一步提升 Redis 性能&#xff0c;分布式部署实现高可用性&#xff…
阅读更多...
【Kafka-3.x-教程】-【二】Kafka-生产者-Producer

【Kafka-3.x-教程】-【二】Kafka-生产者-Producer

【Kafka-3.x-教程】专栏&#xff1a; 【Kafka-3.x-教程】-【一】Kafka 概述、Kafka 快速入门 【Kafka-3.x-教程】-【二】Kafka-生产者-Producer 【Kafka-3.x-教程】-【三】Kafka-Broker、Kafka-Kraft 【Kafka-3.x-教程】-【四】Kafka-消费者-Consumer 【Kafka-3.x-教程】-【五…
阅读更多...
ROS无人机开发常见错误

ROS无人机开发常见错误

飞控部分 一、解锁时飞控不闪红灯&#xff0c;无任何反应&#xff0c;地面站也无报错 解决办法&#xff1a; 打开地面站的遥控器一栏 首先检查右下角Channel Monitor是否有识别出遥控各通道的值&#xff0c;如果没有&#xff0c;检查遥控器是否打开&#xff0c;遥控器和接收…
阅读更多...
【Python】Python语言 3小时速通（有C语言基础版）

【Python】Python语言 3小时速通（有C语言基础版）

python从入门到实践 变量 message"hello world"并不需要指出变量类型 方法 tittle()#以首字母大写的形式输出单词upper()#全部大写输出lower()#全部小写输出存储数据时经常使用lower&#xff0c;因为无法确保数据是大写还是小写 rstrip()#输出删除字符串尾部多余…
阅读更多...
Linux系统中使用ln命令创建软连接

Linux系统中使用ln命令创建软连接

大家应该和我一样&#xff0c;第一次听到软连接这个词时感觉好高级啊&#xff0c;但其实也就那么回事&#xff0c;你完全可以将他类比为Windows系统中的快捷方式。 链接只是一个指向&#xff0c;并不是物理移动&#xff0c;类似Windows系统的快捷方式 1.功能和语法 功能&…
阅读更多...
C#进阶学习

C#进阶学习

目录 简单数据结构类ArrayList声明增删查改遍历装箱拆箱 Stack声明增取查改遍历装箱拆箱 Queue声明增取查改遍历 Hashtable声明增删查改遍历装箱拆箱 泛型泛型分类泛型的作用泛型约束 常用泛型数据结构类List声明增删查改遍历 Dictionary声明增删查改遍历 LinkedList声明增删查…
阅读更多...
Seata TM管理分支事务

Seata TM管理分支事务

TM相当于一个中间商&#xff0c;是没有涉及到任何数据库底层操作的。 TransactionalTemplate 1、TM向TC端发起一次开启全局事务的请求 io.seata.tm.api.TransactionalTemplate#beginTransaction --> io.seata.tm.api.DefaultGlobalTransaction#begin(int, java.lang.Strin…
阅读更多...
APM链路监控： Linux 部署 pinpoint

APM链路监控： Linux 部署 pinpoint

目录 一、实验 1.环境 2. 准备 3.HBase单机部署 4.pinpoint部署 二、问题 1.pinpoint有哪些功能 2.pinpoint架构是如何组成的 3.Linux中自带的jdk 如何设置JAVA_HOME 4. hbase启动报错 5.hbase的master启动失败 6.JPS命令如何安装和使用 一、实验 1.环境 &#x…
阅读更多...
Centos7.9服务器编译安装Nginx1.24.0和php8.3

Centos7.9服务器编译安装Nginx1.24.0和php8.3

Centos7.9服务器编译安装Nginx1.24.0和php8.3 服务器nginx原版本有安全漏洞，需要升级，由于原始是yum源安装，通过yum直接升级，无法正常升级完成，故而需要卸载yum源，重新编译安装。 1、查看原来nginx版本，ps查看原来nginx进程，运行状态： ps aux | grep nginx ​ root …
阅读更多...
JAVAEE——request对象（三）

JAVAEE——request对象（三）

1. request对象 1.1 知识点 &#xff08;1&#xff09;乱码问题的两种解决方式 &#xff08;2&#xff09;post和get提交的区别 &#xff08;3&#xff09;request接收同名参数的问题 1.2 具体内容 使用request接收参数 <%page contentType"text/html; charsetut…
阅读更多...
一个命令查看linux系统是Centos还是Ubuntu

一个命令查看linux系统是Centos还是Ubuntu

目 录 一、 背景介绍 二、一个命令查看linux系统的简单方法 1、 uname -a 2、cat /etc/issue 3、lsb_release -a 4、 dmesg | grep Ubuntu 一、 背景介绍 Linux 系统基本上分为两大类&#xff1a; 1. Red Hat 系列&#xff1a;包括 Red Ha…
阅读更多...
ipv6（centos布置-亲自操刀）

ipv6（centos布置-亲自操刀）

这一篇本来不太想写&#xff0c;但想想&#xff0c;不写出来后面又忘记了&#xff0c;就写写看了&#xff0c; 切记&#xff0c;大家看完别去用来做别的事情哈 正文来了&#xff1a; 开始就去注册一个Ipv6隧道服务吧 在隧道信息的下方有Example IPv6 Tunnel Configurations …
阅读更多...
openEuler安装Docker艰辛路程

openEuler安装Docker艰辛路程

文章目录 安装docker测试docker关于windows docker拉取镜像查看所有镜像删除镜像删除不在运行的进程强制删除正在运行的进程 启动docker容器服务-d测试 停止docker容器服务查看docker启动进程更新容器(没有自启动功能&#xff0c;更新为自启动)docker端口映射进入容器修改内容退…
阅读更多...
python + selenium 初步实现数据驱动

python + selenium 初步实现数据驱动

如果在进行自动化测试的时候将测试数据写在代码中&#xff0c;若测试数据有变&#xff0c;不利于数据的修改和维护。但可以尝试通过将测试数据放到excel文档中来实现测试数据的管理。 示例&#xff1a;本次涉及的项目使用的12306 selenium 重构------三层架构 excel文件数据如…
阅读更多...
单机物理机部署Datax

单机物理机部署Datax

一、概述 DataX 是阿里巴巴开源的一个异构数据源离线同步工具&#xff0c;致力于实现包括关系型数据库(MySQL、Oracle等)、HDFS、Hive、ODPS、HBase、FTP等各种异构数据源之间稳定高效的数据同步功能。 源码地址&#xff1a;https://github.com/alibaba/DataX 为了解决异构数据…
阅读更多...
最新文章

Copyright @ 2022~2023