Android开发人员初识前端

html标签

1、strong、em语气强调

<em> 表示强调,<strong> 表示更强烈的强调。并且在浏览器中<em> 默认用斜体表示,<strong> 用粗体表示。两个标签相比,目前国内前端程序员更喜欢使用<strong>表示强调。

2、q、blockquote对文本进行引用

<q>标签是对短文本进行引用,其样式是对文本添加双引号,<blockquote>标签是对长文本进行引用,其样式是对文本进行缩进。

3、&nbsp空格

&nbsp;标签是在网页中显示空格的效果。

4、hr水平横线

<hr>标签是添加水平横线。

5、address为网页加入地址信息

有些网页底下可能会有联系地址,展示的时候用<address>就好了,样式为斜体,可以自己更改。

6、code、pre为网页添加代码

<code>是添加一行代码,<pre>是添加多行代码

7、table、tbody、tr、th、td表格

7.1、整个表格以table标签开始
7.2、如果不加thead、tbody、tfooter, table表格加载完后才显示。加上这些表格结构, tbody包含行的内容下载完优先显示,不必等待表格结束后在显示,同时如果表格很长,用tbody分段,可以一部分一部分地显示。(通俗理解table可以按结构一块块的显示,不在等整个表格加载完后显示。)
7.3、tr表示表格的一行,所以有几对tr标签,表格就有几行。
7.4、td表示表格的一个单元格,一行中包含几对td标签,说明一行中就有几列。
7.5、th表示表格的头部,表格表头
7.6、表格中列的个数,取决于一行中数据单元格的个数。

8、mailto在网页中链接email地址

注意:如果mailto后面同时有多个参数的话,第一个参数必须以“?”开头,后面的参数每一个都以“&”分隔。

CSS样式

1、写法(三种)

1.1、内联式css样式

直接在html标签中写

1<span style="color:red;font-size:20px;">Hello World!</span>
1.2、嵌入式css样式

直接在html标签中写

1<html>
2    <style type="text/css">
3        ...css样式写在此处
4    </style>
5</html>
1.3、外部式css样式

这种就是新建一个css文件,把所有的css样式写在css文件中,然后在html中引用就好了

1<html>
2    <link href="style.css" rel="stylesheet" type="text/css" />
3</html>

总结:三种方式都可以给html设置样式,但是它们之间有优先级,内联式 > 嵌入式 > 外部式,当三种都设置了,会优先使用内联式。

2、选择器

2.1、标签选择器

标签选择器其实就是html代码中的标签。就像p,span,body等等,都可以直接设置样式。

1<span>Hello World!</span>
2
3span{
4
5}
2.2、类选择器

类选择器就是为html标签设置一个名称,以英文圆点开头,后面跟名称,类选择器名称可以任意取,但是不要用中文;先把要修饰的内容用标签标记,然后再取名字,最后再写css样式:

1<span class="hello">Hello World!</span>
2
3.hello{
4
5}
2.3、ID选择器

ID选择器和类选择器很像,但是它是为标签设置一个id,以#开头:

1<span id="hello">Hello World!</span>
2
3#hello{
4
5}

总结:类选择器和ID选择器的共同点是他们可以应用于任何元素;不同点是,ID选择器只能在文档中使用一次,二类选择器可以使用多次(ID选择器的一个名称只能修饰一个标签,而类选择器的名称可以修饰多个);可以使用类选择器词列表方法为一个元素同时设置多个样式,但是ID选择器不能;还有一点就是ID选择器的优先级更高。

3、CSS排版

3.1、字体(font-family)

我们可以使用css样式为网页中的文字设置字体、字号、颜色等样式属性。

1body{
2    font-family:"宋体";
3}
3.2、粗体(font-weight)
1p{
2    font-weight:bold;
3}
3.3、斜体(font-style)
1p{
2    font-style:italic;
3}
3.4、下划线和删除线(text-decoration)
1下划线:
2p{
3    text-decoration:underline;
4}
5
6删除线:
7p{
8    text-decoration:line-through;
9}
3.5、缩进(text-indent)
1p{
2    text-indent:2em;
3}
4注意:2em的意思就是文字的2倍大小。
3.6、行间距(line-height)
1p{
2    line-height:2em;
3}
3.7、字母间距(letter-spacing,word-spacing)

letter-spacing表示单词的字母的间距,word-spacing表示单词与单词的间距

1h3{
2    letter-spacing:10px;
3}
4
5h4{
6    word-spacing:5px;
7}
3.8、段落对齐(text-align)

可以使用text-align样式代码为块状元素中的文本、图片设置居中样式。

1h2{
2    text-align:center;
3}

4、CSS盒模型

4.1、块级元素

特点:每个块级元素都从新的一行开始,并且其后的元素也另起一行;元素的高度、宽度、行高以及顶和底边距都可设置,元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致),除非设定一个宽度。

常用的块级元素有:<div><p><h1><h6><ol><ul><dl><table><address><blockquote><form>

4.2、内联元素

特点:内联元素和其他元素都在一行上;元素的高度、宽度及顶部和底部边距不可设置;元素的宽度就是它包含的文字或图片的宽度,不可改变。

常见的内联元素有:<a><span><br><i><em><strong><label><q><var><cite><code>

4.3、内联块级元素

特点:和其他元素都在一行上;元素的高度、宽度、行高以及顶和底边距都可设置。

常见的内联块级元素有:<img><input>

总结:每一种类型的元素都可以通过代码来设置成其他类型元素,比如你可以使用display:block将元素设置成块级元素,使用display:inline将元素设置成内联元素,使用display:inline-block将元素设置成内联块级元素。

4.4、边框(border)

边框就是围绕着内容及补白的线,这条线你可以设置它的粗细、样式和颜色(边框三个属性)。

 1简写:
 2div{
 3    border:2px solod red;
 4}
 5
 6分开写:
 7div{
 8    border-width:2px;
 9    border-style:solid;
10    border-color:red;
11}
12
13还可以给某一边单独设置:
14div{
15    border-top:1px solid red;
16    border-right:1px solid red; 
17    border-left:1px solid red;
18    border-bottom:1px solid red;
19}

注意: border-style(边框样式)常见样式有: dashed(虚线)| dotted(点线)| solid(实线)。 border-color(边框颜色)中的颜色可设置为十六进制颜色,如: border-color:#888;//前面的井号不要忘掉。 border-width(边框宽度)中的宽度也可以设置为: thin | medium | thick(但不是很常用),最常还是用象素(px)。

4.5、宽度和高度(width,height)

一个元素实际宽度(盒子的宽度)=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界;高度同理。

1div{
2    width:200px;
3    height:30px;
4}
4.6、填充(padding)

元素内容与边框之间是可以设置距离的,称之为“填充”。填充有很多种写法。边界(margin)和填充(padding)设置一样。

 1合并上、右、下、左(顺时针):
 2div{
 3    20px 10px 15px 25px
 4}
 5
 6分开:
 7div{
 8    padding-top:20px;
 9    padding-right:10px;
10    padding-bottom:15px;
11    padding-left:25px;
12}
13
14如果上、右、下、左的填充都一样:
15div{
16    padding:20px;
17}
18
19如果上下填充一样,左右填充一样:
20div{
21    padding:20px 10px;
22}

5、布局模型

5.1、流动模型(Flow)

流动(Flow)是默认的网页布局模式。也就是说网页在默认状态下的 HTML 网页元素都是根据流动模型来分布网页内容的。

特征:第一,块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布,因为在默认状态下,块状元素的宽度都为100%。实际上,块状元素都会以行的形式占据位置。第二,在流动模型下,内联元素都会在所处的包含元素内从左到右水平分布显示。

5.2、浮动模型(Float)

任何元素在默认情况下是不能浮动的,但可以用 CSS 定义为浮动,如div、p、table、img等元素都可以被定义为浮动。

1div{
2    float:left;   /*向左浮动*/
3    float:right;  /*向右浮动*/
4}
5.3、层模型(Layer)

层布局模型就像是图像软件PhotoShop中非常流行的图层编辑功能一样,每个图层能够精确定位操作,但在网页设计领域,由于网页大小的活动性,层布局没能受到热捧。但是在网页上局部使用层布局还是有其方便之处的。层模型有三种形式的定位来让html元素在网页中精确定位:

(1)、绝对定位(position:absolute) position:absolute这条语句的作用将元素从文档流中拖出来,然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块,则相对于body元素,即相对于浏览器窗口。

1div{
2    position:absolute;
3    left:100px;  /*向右移100px*/
4    top:50px;  /*向下移50px*/
5}

(2)、相对定位(position:relative) 如果想为元素设置层模型中的相对定位,需要设置position:relative(表示相对定位),它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来),然后相对于以前的位置移动,移动的方向和幅度由left、right、top、bottom属性确定,偏移前的位置保留不动。

1#div{
2    position:relative;
3    left:100px;
4    top:50px;
5}

(3)、固定定位(position:fixed) 与absolute定位类型类似,但它的相对移动的坐标是视图(屏幕内的网页窗口)本身。由于视图本身是固定的,它不会随浏览器窗口的滚动条滚动而变化,除非你在屏幕中移动浏览器窗口的屏幕位置,或改变浏览器窗口的显示大小,因此固定定位的元素会始终位于浏览器窗口内视图的某个位置,不会受文档流动影响,这与background-attachment:fixed;属性功能相同。

1#div{
2    position:fixed;
3    left:0;
4    top:0;
5}

6、长度和颜色

6.1、颜色值

关于颜色的css样式也是可以缩写的,当你设置的颜色是16进制的色彩值时,如果每两位的值相同,可以缩写一半。设置颜色也有很多种方法

 1可缩写的颜色值:
 2p{
 3    color:#000000; /*原写法*/
 4    color:#000;  /*缩写*/
 5}
 6
 7p{
 8    color:#336699;  /*原写法*/
 9    color:#369;  /*缩写*/
10}
11
12设置颜色的方法:
13(1)、英文命令颜色
14    p{
15        color:red;
16    }
17
18(2)、RGB颜色
19    p{
20        color:rgb(133,45,200); 
21        color:rgb(20%,33%,25%);  /*也可以是百分比*/
22    }
23
24(3)、十六进制颜色
25    p{
26        color:#00ffff;
27    }
6.2、长度值

长度单位总结一下,目前比较常用到px(像素)、em、% 百分比,要注意其实这三种单位都是相对单位。

 1(1)、px (像素)
 2像素指的是显示器上的小点(CSS规范中假设“90像素=1英寸”)。实际情况是浏览器会使用显示器的实际像素值有关,在目前大多数的设计者都倾向于使用像素(px)作为单位。
 3
 4(2)、em
 5就是本元素给定字体的 font-size 值,如果元素的 font-size 为 14px ,那么 1em = 14px;如果 font-size 为 18px,那么 1em = 18px。但当给 font-size 设置单位为 em 时,此时计算的标准以 p 的父元素的 font-size 为基础。
 6
 7(3)、% 百分比
 8也是本元素给定字体的 font-size 值乘以百分比,如果元素的 font-size 为 14px,那么乘以百分比就是最后的结果。
 9p{
10    font-size:12px;
11    line-height:130%;
12}
13line-height的实际就是:12*130%=15.6px

原文发布于微信公众号 - Android先生(cyg_24kshign)

原文发表时间:2018-08-03

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏一个小程序员的成长笔记

CSS深入理解学习笔记之margin

1、margin与容器尺寸   元素尺寸:①可视尺寸 clientWidth(标准);②占据尺寸 ?   margin与可视尺寸:①适用于没有设定width/h...

3816
来自专栏python学习路

二、CSS

css基本语法及页面引用 css基本语法 css的定义方法是: 选择器 { 属性:值; 属性:值; 属性:值;} 选择器是将样式和页面元素关联起来的名称,属性是...

3317
来自专栏进击的君君的前端之路

CSS理解之margin

1472
来自专栏一个小程序员的成长笔记

CSS深入理解学习笔记之vertical-align

1、vertical-align基本认识   支持的属性值:     ①线类:baseline(默认),top,middle,bottom     ②文本类:t...

3345
来自专栏Android小菜鸡

HTML JS DOM

  当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。HTML DOM 模型被构造为对象的树。

1612
来自专栏偏前端工程师的驿站

CSS魔法堂:Position定位详解

一、Position各属性值详解                       1.  static :默认值,元素将按照正常文档流规则排列。   2.  rel...

2027
来自专栏Android干货

自定义控件详解(七):drawText()

1903
来自专栏九彩拼盘的叨叨叨

前端学习 第2周 第2天

774
来自专栏Python

css样式—字体垂直、水平居中

<div class="tt">啦啦啦</div> .tt{ padding: 0px; width:500px...

22410
来自专栏小灰灰

Css学习手册之基本篇

Css学习手册之基本篇 每次写前端都是一个痛苦的过程,总是静不下来,彻底的研究下前端的技术,导致每次套页面都是直接采用一些封装好的控件,而有时对这些样式不满意时...

4276

扫码关注云+社区

领取腾讯云代金券