WEB前端网页设计 HTML网页代码 基础参数(二)

news2024/11/16 16:25:41

html文件调用css文件

<link rel="stylesheet" type="text/css" href="css文件相对路径"/>

设置颜色

Style="color:green;"

设置字体大小

font-size:50px;

设置边框

border:groove

设置长、宽

height:50px;、width:30px;

居中对齐

text-align:center;

设置整个网页的属性

body{  各项参数}

首行缩进

text-indent:2em;

行高

line-height:1.3;

定义由细到粗

font-weight:400=normal正常 700=bold900=bolder

粗体

font-weight:bold;

文字更

font-weight:lighter;

文字更粗

font-weight:bolder;

设置文字被选中时的样式

p::selection选择器{

background-colora:black

color:white

}                           ##背景为黑色,选中文字为白色

首字下沉

p::first-letter{  }

设置字体类型

font-family:”楷体,宋体,黑体“;

#表示 先找到谁即设置谁

设置字体风格(斜体

font-style:“italic”、“”

插入图片:<img src="./图像URL">

整个HTML格式分为两大部分,一个是head部分,一个是body部分,其中head部分是用于书写网页样式,而body部分用于书写网页主题

标题标记

<h1></h1>

...

<h6></h6>

<p></p>

段落标签

<b></b> <strong></strong>

加粗  

<i></i>

倾斜

<br/>

换行

标签 功能

<br />

 插入一个换行简单的换行符

<hr />

定义水平线

<area />

定义图像映射内部的区域

<base />

 定义页面中所有链接的默认地址或默认目标

< img />

定义图像

<input />

 定义输入控件

<link />

定义文档与外部资源的关系

<meta />

定义关于 HTML 文档的元信息

<basefont />

 不建议使用。定义页面中文本的默认字体、颜色或尺寸

<param />

定义对象的参数

<col />

定义表格中一个或多个列的属性值

<frame />

 定义框架集的窗口或框架

<embed />

定义外部交互内容或插件

HTML注释符:

<!--  在此添加注释句-->     ##快捷键:CTRL+/

普通文字标签:

<p>…</p>     ##可分行

换行标签:

<br />           ##一个br换一行

选择整行

CTRL+L

网页名称插入:

<title>…….</title>

插入文本:

<h1> …… </h1>

居中对齐:

<h1 align=“center”>  …</h1>

颜色变换:

<hr  color=“red”   />

长度属性:

<hr width="500px"  />     ##px像素

右对齐:

<..  align=“right”>..<..>     左:left

粗细:

<size=“2”>

      下标

 sub  表示  下标

      上标

sup  表示  上标

左对齐

<align="left">

右对齐

<align="right">

文字行目显上

<align="top/texttop">

文字行目居中

<align="middle/absmiddle">

文字行目显下

<align="bottom/baseline">

插入图片:<img src="./图像URL">

已插入图片的副属性/标识:<alt="…">    ##运行后 当图片消失即文字显示

插入图片后当鼠标光标移到图片是即显示文字内容:<title="…">

给图片添加外边框:<border="4px">    #表示边框的粗细为4个像素

长度属性:<width=“400/75%px”>      #可数字也可百分比

高度属性:<height="…">

水平间距:<hspace="…">

垂直间距:<vspace="…">

自动填充单词数量:lorem100      ##数字为多少即生成多少,默认80;按TAB键补全

超链接:<a  href="…">文本说明</a>

例如------->>    <a  href="http://www.baidu.com">链接到百度</a>

<a  href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>

窗口弹出方式

描述

_self  

默认网页

_blank 

另一个窗口打开网页

这两者与之对应,在同一网页下,上方显示锚点链接,下方链接至此

锚点超链接:<a  href="#id链接处">说明</a>

<h  id="链接文本">

项目符号

<li>…</li>

鼠标滚轮移动至下方-->返回顶部

<a  href="#top">返回顶端</a>

 

插入图片:<img src="./图像URL">

font-size属性单位;

相对于当前对象内文本的字体尺寸

em

像素

px

绝对长度单位

说明

英寸

in

厘米

cm

毫米

mm

pt

color:文本颜色                  #color:参数

预定义的颜色值

red,green,blue等

十六进制

#FF0000,#FF6600,#29D794等

RGB代码

表示纯红(255,0,0),纯绿(0,255,0),纯蓝(0,0,255)

RGB(以逗号为间隔)

白色(255,255,255),黑色(0.0.0)

间距

letter-spacing:字间距  

#letter-spacing:30px

word-spacing:单词间距

以像素为大小

line-height:行间距

以像素为大小

text-decoration:文本装饰

正常文本默认值

none

下划线

underline

上划线

overline

text-align:水平对齐方式

左对齐

left(默认值)

右对齐

right

居中对齐

center

text-indent:首行缩进------->>   text-indent2em

white-space:空白符处理

使用html制作网页时,不论源代码中有多少空格,在浏览器中只会显示一个字符的空白;

默认值

normal

预格式化

pre

空格空行无效

nowrap   #此参数内容只在一行并超出显示区域则下方出现滚动条

text-overflow:标示对象内溢出文本

格式:选择器{ text-overflow:属性值 }

修剪溢出文本

clip

用省略号标记“…”标识被修建文本

ellipsis

搭配使用

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

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

相关文章

【通信原理】数字基带传输的线路码型

数字基带传输的线路码型 简单介绍数字基带传输的线路码型的信号波形的特点&#xff0c;以及生成方法。注意观察频谱。文末附Matlab代码。 以下包括双极性NRZ、单极型NRZ、双极型RZ、单极型RZ、差分码&#xff0c;曼切斯特码/数字双相码、密勒码、CMI码、AMI码、HDB3码。 参数…

Spring中Bean的生命周期

先直接说出过程&#xff0c;再来演示具体的操作 过程 简化来说就是 1、首先是实例化Bean&#xff0c;当客户向容器请求一个尚未初始化的bean时&#xff0c;或初始化bean的时候需要注入另一个尚末初始化的依赖时&#xff0c;容器就会调用doCreateBean()方法进行实例化&#xf…

Java多线程之:队列同步器AbstractQueuedSynchronizer原理剖析

Java多线程之&#xff1a;队列同步器AbstractQueuedSynchronizer原理剖析 文章目录Java多线程之&#xff1a;队列同步器AbstractQueuedSynchronizer原理剖析一、AQS的核心思想二、AQS中关键的内部结构一、Node内部类二、CLH队列三、同步状态 state四、Condition条件队列三、AQS…

houdini 之copy to points

将第一个输入中的几何图形复制到第二个输入的点上。 属性备注Source Group几何体来源Target Points要复制到的目标点集合Show Guide Geometry是否显示该操作预览流程Pack and Instance在复制之前将输入几何体打包到嵌入式打包图元中。这导致输入几何被每个副本共享&#xff08;…

跟着实例学Go语言(一)

本教程全面涵盖了Go语言基础的各个方面。一共80个例子&#xff0c;每个例子对应一个语言特性点&#xff0c;非常适合新人快速上手。 教程代码示例来自go by example&#xff0c;文字部分来自本人自己的理解。 本文是教程系列的第一部分&#xff0c;共计20个例子、约1万字。 目…

电子学会2021年3月青少年软件编程(图形化)等级考试试卷(四级)答案解析

目录 一、单选题&#xff08;共15题&#xff0c;每题2分&#xff0c;共30分&#xff09; 二、判断题&#xff08;共10题&#xff0c;每题2分&#xff0c;共20分&#xff09; 三、编程题&#xff08;共4题&#xff0c;共50分&#xff09; 青少年软件编程&#xff08;图形化&a…

python与pycharm配置http服务

下载安装pycharm 下载pycharm 提取码&#xff1a;slgh 在任意自己工作的目录下创建两个文件夹&#xff0c;www文件夹及其目录下cgi-bin文件夹 自己的工作目录\www\cgi-bin 打开pycharm创建工程&#xff0c;选择www\cgi-bin目录 配置cgi&#xff0c;选择Run菜单&#xff0c;…

动漫制作技巧如何制作动漫视频

动漫制作技巧是很多新人想了解的问题&#xff0c;今天小编就来解答与大家分享一下动漫制作流程&#xff0c;为了帮助有兴趣的同学理解&#xff0c;大多数人会选择动漫培训机构&#xff0c;那么今天小编就带大家来看看动漫制作要掌握哪些技巧&#xff1f; 一、动漫作品首先完成…

MedNeRF:用于从单个X射线重建3D感知CT投影的医学神经辐射场

摘要 计算机断层扫描&#xff08;CT&#xff09;是一种有效的医学成像方式&#xff0c;广泛应用于临床医学领域&#xff0c;用于各种病理的诊断。多探测器CT成像技术的进步实现了额外的功能&#xff0c;包括生成薄层多平面横截面身体成像和3D重建。然而&#xff0c;这涉及患者暴…

R语言确定聚类的最佳簇数:3种聚类优化方法

确定数据集中最佳的簇数是分区聚类&#xff08;例如k均值聚类&#xff09;中的一个基本问题&#xff0c;它要求用户指定要生成的簇数k。 最近我们被客户要求撰写关于聚类的研究报告&#xff0c;包括一些图形和统计输出。 一个简单且流行的解决方案包括检查使用分层聚类生成的树…

基于正则化Regularized Interpolation插值算法的图像超分辨重构研究-附Matlab代码

⭕⭕ 目 录 ⭕⭕✳️ 一、引言✳️ 二、图像复原基本原理✳️ 三、正则化插值原理✳️ 四、实验验证✳️ 五、参考文献✳️ 六、Matlab程序获取与验证✳️ 一、引言 图像是一种表达信息的形式&#xff0c;其中&#xff0c;数字图像反馈的信息更加丰富。 在获取图像的过程中&am…

【Redis】Redis安装步骤和特性以及支持的10种数据类型(Redis专栏启动)

&#x1f4eb;作者简介&#xff1a;小明java问道之路&#xff0c;专注于研究 Java/ Liunx内核/ C及汇编/计算机底层原理/源码&#xff0c;就职于大型金融公司后端高级工程师&#xff0c;擅长交易领域的高安全/可用/并发/性能的架构设计与演进、系统优化与稳定性建设。 &#x1…

【20221204】【每日一题】监控二叉树

给定一个二叉树&#xff0c;我们在树的节点上安装摄像头。 节点上的每个摄影头都可以监视其父对象、自身及其直接子对象。 计算监控树的所有节点所需的最小摄像头数量。 思路&#xff1a; 1、要尽可能的少安装摄像头&#xff0c;那么摄像头不可能安装在叶子节点上&#xff0c…

TLS及CA证书申请流程

一、概述 SSL 是“Secure Sockets Layer”的缩写&#xff0c;中文叫做“安全套接层”。它是在上世纪90年代中期&#xff0c;由网景公司设计的。 SSL/TLS是同一种协议&#xff0c;只不过是在不同阶段的不同称呼。 SSL协议位于TCP/IP协议与各种应用层协议之间&#xff0c;为数据通…

基于事件驱动的微服务教程

基于事件驱动的微服务教程 使用 Spring Boot、Spring Cloud、Kafka 和 Elasticsearch 掌握具有模式的事件驱动微服务架构 课程英文名&#xff1a;Event-Driven Microservices Spring Boot, Kafka and Elastic 此视频教程共22.0小时&#xff0c;中英双语字幕&#xff0c;画质…

javaee之黑马旅游网1

这是一个用来锻炼javaweb基础知识的项目&#xff0c;先来导入一些我们准备好的文件 下面这些东西是我们项目必备的&#xff0c;我们提前准备好了 &#xff0c;这个我会上传到我的资源&#xff0c;你们可以自己去下载 利用maven来创建一个项目 选择无骨架创建项目&#xff0c;域…

[附源码]计算机毕业设计小型银行管理系统Springboot程序

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; SSM mybatis Maven Vue 等等组成&#xff0c;B/S模式 M…

JavaWeb_第6章_FilterListenerAjax

JavaWeb_第6章_Filter&Listener&Ajax 文章目录JavaWeb_第6章_Filter&Listener&Ajax1&#xff0c;Filter1.1 Filter概述1.2 Filter快速入门1.2.1 开发步骤1.2.2 代码演示1.3 Filter执行流程1.4 Filter拦截路径配置1.5 过滤器链1.5.1 概述1.5.2 代码演示1.5.3 问…

最新版本zookeeper+dubbo-admin

zookeeper 下载地址 :https://archive.apache.org/dist/zookeeper/ 修改conf下zoo_sample.cfg - >zoo.cfgbin下启动zkServer.cmd启动成功 :binding to port 0.0.0.0/0.0.0.0:2181 问题1&#xff1a;zookeper安装 1.去官网下载apache-zookeeper-3.6.2-bin.tar.gz名字中带有…

通用的改进遗传算法求解带约束的优化问题(MATLAB代码)

目录 1 概述 2 遗传算法 2.1 遗传算法的基本概念 2.2 遗传算法的特点 2.3 程序框图 3 运行结果 4 通用的改进遗传算法求解带约束的优化问题&#xff08;MATLAB代码&#xff09; 1 概述 遗传算法(Genetic Algorithm,GA)是模拟生物在自然环境中的遗传和进化过程而形成的自…