css 宋体_Java前端基础(一)之html/css

47fa3fdacafc15ad8e99d75db0e1401e.png

1.1 html

HTML:超文本标记语言(Hyper Text Markup Language),标准通用标记语言下的一个应用。HTML 不是一种编程语言,而是一种标记语言 (markup language),是网页制作所必备的

WEB开发工具:hbuilder/webstorm/vs code/eclpise

最简单的HTML

<!DOCTYPE html> ---->告诉浏览器,当前HTML语言使用的是第5个版本,2014年发布

<html> --->根标签,一般有2个标签,head,body标签

<head> --->head标签里的内容一般不直接现实在页面上,用来说明和描述网页文档

<meta charset="utf-8" /> --->申明文档使用的是UTF-8的编码

<title></title> ---->说明网页标题

</head>

<body> --->body标签放置真正显示的内容

</body>

</html>

标签:左右尖括号括起来的内容就是标签。单标签和双标签。双标签是有起始和结束标签。

HTML常用标签

网页内容的标题标签

H1,H2,H3...H6,都是网页内容的标题标题

<h1>标题1</h1>

<h2>标题2</h2>

<h6>标题6</h6>

网页注释标签

<!--标题标签-->

段落标签

<p>超文本标记语言的结构包括“头”部分(英语:Head)、和“主体”部分(英语:Body),其中“头”部提供关于网页的信息,“主体”部分提供网页的具体内容。</p>

图片标签

<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1558591161852&di=1bd06fab6bc654369456cf33bff60f07&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fblog%2F201410%2F21%2F20141021205157_j2TL2.thumb.700_0.jpeg"/>

最常用容器标签

<!--最常用的容器标签,因为块级标签,没有其他多余的样式-->

<div>hello</div>

链接标签

跳转到淘宝

<a href="http://www.taobao.com">淘宝</a>

跳转当前页面的某个地方

<a href="#跳转到相对应的元素的ID">主要作品</a>

1.2 列表

7c030a9f257ddf3a3adc2cc1ccc86369.png

d5639874a1aa4481086239dd0a64b8e5.png

表单标签

form表单标签

action:将表单数据提交给什么服务器(服务器的地址)

method:get/post

get和post区别:get会将表单提交的内容直接放在请求的URL地址里,效率高,不安全。post不会将表单数据显示到url上,会放置在请求的body上。

搜索/正常的请求就会使用get

登陆/注册等比较隐私和安全的内容时候,就需要用到POST,上传文件的时候也会用到post

input标签有多种类型

type=》

text(文本输入)

password(密码)

radio:单选框,注意单选框如果选择的内容是同一项内容,那么多个输入input标签的name值必须一致。

checkbox:复选框,选择的内容是同一项内容,那么多个输入input标签的name值必须一致

color:输入颜色(少用)

date:时间标签(少用)

select>option

textarea:长文本输入标签

案例:

<!DOCTYPE html>

1.3 css

层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。

CSS使用

1、style属性上直接使用

<h1 style="color:purple;">今晚吃什么?</h1>

<h1 style="color: greenyellow;">吃鸡</h1>

2、Style标签上使用

语法:

<style type="text/css">

选择器{样式的内容}

</style>

CSS常用选择选择器:

元素选择器:元素名称

Class选择器:.+类名

ID选择器:#+id名称

3、Link标签引入css文件使用

<link rel="stylesheet" type="text/css" href="css/style.css"/>

优先级情况

元素内style属性的优先级>id>class>元素>默认的浏览器样式>继承的样式

越复杂的选择器优先级越高

备注:!Important,将样式的优先级提高到最高

文字

Color:文字颜色

Font-size:文字的大小

font-family:文字字体,尽量使用黑体,微软雅黑,宋体,普通用户都有的字体

Font-weight:字体粗细,100-900,具体的粗细根据字体文件本身有什么粗细的字体来决定

Text-align:文字的排版,left,center,right

Line-height:行高,行与行之间的高度

Text-shadow:文字阴影

text-shadow: 0 0 10px orange,0 0 20px yellow;

Text-shadow:水平偏移值 垂直偏移值 阴影的模糊度 阴影的颜色,设置多个阴影用逗号隔开

容器盒子

Box-size:设置盒子模型

Width:宽度

Height:高度

Padding:内边距

Margin:外边距

Border:边框

Box-shadow:盒子阴影

Display:设置盒子是块级元素还是行级元素还是弹性元素

Background:设置元素的背景,背景图片,背景颜色

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

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

相关文章

View Controller Programming Guide for iOS---(七)---Resizing the View Controller’s Views

Resizing the View Controller’s Views A view controller owns its own view and manages the view’s contents. In the process, the view controller also manages the view’s subviews. But in most cases, the view’s frame is not set directly by the view controll…

基于百度地图js进行地理定位

http://www.mengxiangchaoren.com/jquery.select.position.min.js 使用方法 $("#myCity").renderSelect({posByGps:true,bdAk:BD_AK});转载于:https://www.cnblogs.com/Brose/p/jquery_select_position.html

C#接口-接口作用

C#接口是一个让很多初学C#者容易迷糊的东西&#xff0c;用起来好像很简单&#xff0c;定义接口&#xff0c;里面包含方法&#xff0c;但没有方法具体实现的代码&#xff0c;然后在继承该接口的类里面要实现接口的所有方法的代码&#xff0c;但没有真正认识到接口的作用的时候就…

gpio的8种工作模式_Stm32之GPIO工作模式简介

GPIO的8种工作模式GPIO初始化结构体的时候&#xff0c;必须要配置合适的工作模式&#xff0c;这样才能使得IO口发挥应有的作用。工作模式大体上共分为输入输出两类&#xff0c;共8种&#xff0c;下面将介绍这8种工作模式。GPIO工作模式输入模式GPIO_Mode_AIN 模拟输入 GPIO_Mod…

vagrant,流浪汉,我又来啦。

最近学个DEVOPS2.0&#xff0c;讲微服务&#xff0c;容器华&#xff0c;持续部署&#xff0c;很到位&#xff0c;就一个一个工具撸一撸。。。 vagrant&#xff0c;以前接触过&#xff0c;所以上手快&#xff0c;&#xff0c;哈哈&#xff0c;&#xff0c;用时再具体配置。 virt…

dedecms最新版本修改任意管理员漏洞

此漏洞无视gpc转义&#xff0c;过80sec注入防御。 补充下&#xff0c;不用担心后台找不到。这只是一个demo&#xff0c;都能修改任意数据库了&#xff0c;还怕拿不到SHELL&#xff1f; 起因是全局变量$GLOBALS可以被任意修改&#xff0c;随便看了下&#xff0c;漏洞一堆&#x…

第4章 Python 数字图像处理(DIP) - 频率域滤波10 - 使用低通频率域滤波器平滑图像 - 理想、高斯、巴特沃斯低通滤波器

目录使用低通频率域滤波器平滑图像理想低通滤波器(ILPF)高斯低通滤波器(GLPF)巴特沃斯低通滤波器低通滤波的例子使用低通频率域滤波器平滑图像 理想低通滤波器(ILPF) 在以原点为中心的一个圆内无衰减地通过所有频率&#xff0c;而在这个圆外“截止”所有的频率的二维低通滤波…

vs2008中combox用法总结

1、判断是否为空 m_CheckPoint.GetCurSel()-1; 2、清空 m_CheckPoint.ResetContent(); 3、添加 m_CheckPoint.AddString(str); 4、获取某一索引的值 m_CheckPoint.GetLBText(j,str1);//j为索引&#xff0c;str1为存储变量 5、删除某一索引的值 m_CheckPoint.DeleteString(j);//…

bluecam连接步骤说明_厂家详解旋片式真空泵使用说明

旋片式真空泵是有区分单双极高速直联结构的真空泵&#xff0c;是用来对密封容器抽除气体的基本设备之一。旋片式真空泵的泵与电机连轴&#xff0c;有着高转速、外型小、结构紧凑、流动性工作方便的优点。本文所使用旋片式真空泵使用说明资料&#xff0c;是台冠真空泵技术团队工…

python函数中可变参数的传递方式是_Python函数可变参数定义及其参数传递方式实例详解...

本文实例讲述了Python函数可变参数定义及其参数传递方式。分享给大家供大家参考。具体分析如下&#xff1a; python中 函数不定参数的定义形式如下&#xff1a; 1、func(*args) 传入的参数为以元组形式存在args中&#xff0c;如&#xff1a; def func(*args): print args >&…

加载中做法

一个网页在加载时&#xff0c;可给静态部分加个加载中&#xff0c;而动态部分也即是真正内容用jq来改&#xff0c;这样就有那个效果了转载于:https://www.cnblogs.com/yedeying/p/3618815.html

Junit4常用注解

Junit4注解 JUnit4的测试类不用再继承TestCase类了。使用注解会方便很多。 Before&#xff1a;初始化方法After&#xff1a;释放资源Test&#xff1a;测试方法&#xff0c;在这里可以测试期望异常和超时时间Ignore&#xff1a;忽略的测试方法BeforeClass&#xff1a;针对所有测…

第4章 Python 数字图像处理(DIP) - 频率域滤波11 - 使用高通滤波器锐化图像

目录使用高通滤波器锐化图像由低通滤波器得到理想、高斯和巴特沃斯高通滤波器指纹增强频域中的拉普拉斯钝化掩蔽、高提升滤波和高频强调滤波同态滤波使用高通滤波器锐化图像 由低通滤波器得到理想、高斯和巴特沃斯高通滤波器 HHP(u,v)1−HLP(u,v)(4.118)H_{HP}(u, v) 1 - H_{…

值类型 引用类型 堆栈 堆 之 异想

看了很多值类型 和 引用类型的文章&#xff08;谷歌能搜索出来的&#xff09;看了越多疑问越大&#xff0c;而这些资料中没有具体的说明。问题&#xff1a;1、堆栈 和 堆 分别存于计算机的哪个硬件&#xff08;CPU缓存&#xff0c;内存&#xff0c;硬盘&#xff09;&#xff1f…

漫步者lollipods如何调节音量_漫步者MF5扩音器体验:老师值得入手

对于教师职业来说&#xff0c;保护好嗓子是很重要的。每天为学生操劳&#xff0c;频繁的讲课&#xff0c;很多老师都遇上了喉咙沙哑的问题。怎么样才能保护好老师的嗓子呢&#xff1f;“小蜜蜂”是很多老师们的选择&#xff0c;这种扩音器可以挂在腰间&#xff0c;通过麦克风&a…

数据库之间数据转换最快方法

用txt导入的方式是最快的&#xff0c;一般是秒级。 以ACCESS数据库到SQLite数据库为例&#xff1a; 第一步&#xff1a;导出ACCESS数据库到txt文件&#xff1a; 一、将表中数据导出到文本文件&#xff08;TXT&#xff09;&#xff1a; Select * INTO [TEXT;DATABASEE:\TEMP].TE…

pandas删除某列有空值的行_Python-零基础学习Pandas知识点整理(2)

DataFrame数据的清洗--预处理操作import pandas as pdimport numpy as np#DataFrame数据框行或列的删除#df.drop(labelsNone,axis0,indexNone,columnsNone,levelNone,inplaceFalse,error"raise")#labels 表示需要删除的行或列的标签&#xff0c;多行或多列用列表传入…

JavaScript中的闭包

什么是闭包&#xff1f; 当函数可以记住并访问所在的词法作用域时&#xff0c;就产生了闭包&#xff0c;即使函数是在当前词法作用域之外执行的。下面用一些代码来解释这个定义&#xff1a; function foo() {var a 2;function bar() {console.log(a); // 2}bar(); }foo(); 这…

第4章 Python 数字图像处理(DIP) - 频率域滤波12 - 选择性滤波 - 带阻

目录选择性滤波带阻滤波器和带通滤波器陷波滤波器选择性滤波 处理特定的频带的滤波器称为频带滤波器 带阻滤波器&#xff1a; 若某个频带中的频率被滤除 带通滤波器&#xff1a; 若某个频带中的频率被通过 处理小频率矩形区域的滤波器称为陷波滤波器 陷波带阻滤波器&#x…

command line

对chrome 的IPC 感兴趣&#xff0c;想通过他的单元测试来窥探。 无意中看到有一个command_line 类&#xff0c;因为是第二次碰到 &#xff2f;&#xff33;&#xff27;中也有一个&#xff43;&#xff4f;&#xff4d;&#xff4d;&#xff41;&#xff4e;&#xff44;类正好…