四、web镇之旅，连接起来

找一家托管公司如阿里云，购买域名和空间，然后将网页文件上传到购买的空间的根目录下。

1、绝对路径url

url:uniform resource locators 统一资源定位符，告诉服务器如何从根文件到达指定的页面。总是从"/"开始，代表根文件夹。

浏览器输入的web地址：协议+网站名+绝对路径（http +  www.ceshi.com  + /web/index.html ）

注：通常只写到文件夹名即可http://www.ceshi.com/web/，浏览器会尝试在这个目录web下找默认页面（如果是访问其他页面，要把页面名加上），通常是index.html 或 default.html，最后的"/"也可以不要，服务器会自动加上。

浏览器对于相对路径的访问，会根据本页面地址加相对路径，转换为一个绝对路径。

一般地，用相对路径来链接本网站内容，用url来链接其他网站页面。否则，本网站一点改名则所有本网站内链接失效。

2、其他

title属性：可以为任意元素加一个title属性，属性值会为此元素创建一个提示，鼠标放上去时。

用id属性直接链接到该元素：只需在链接后加上#id 例：<a href="index.html#chai">see chai tea</a>。

用target属性打开窗口：链接在新窗口打开，<a target="_blank" href="http://sougou.com/">sougou</a>，不写此属性的话默认是在本窗口打开链接。当然target也可以指定其他名字如coffee，那么用了这个的链接都会在同一个coffee窗口打开。

五、为页面增加图像，认识媒体

img 元素：<img src="logo/mypod.png" alt="mypod logo" width="48" height="100">，src属性是图像地址，alt属性是必须的，当图像无法显示时会用这个代替，鼠标移到上面也会有提示。width 和height属性可以实现页面上图像的缩放，但是图像大小还是应该在源文件上调整好，最好原样显示，这两个属性只是用于来为图像提前规划好大小占位。

图像格式有：jpg png gif，当用png或gif的透明性时，在保存为web格式对话框的蒙版matte中要选择与背景颜色一样，这样才能自然过渡。

六、标准及其他 严肃的html

现在的html5文档类型定义，直接在页面第一行，即<html>上面一行，增加<!doctype html>即可。

html文档验证工具：http://validator.w3.org

声明字符编码：在<head>的第一行添加<meta charset="utf-8">

七、css入门 加一点样式

csss语法：p{ background-color: red; }，这是一条规则，元素{ 属性：值；}。同时选择两个：h1,h2{ color: gray; }。选择子元素：p q{ color: red; }

可以直接将css规则放在<head>元素的<style></style>里。

css验证工具：http://jigsaw.w3.org/css-validator/

1、创建css文件

所有规则放在一个css文件里，链接到html文件，将内容和样式分开，一是可重用性，二是方便统一修改。

css中的注释放在/*和*/中间。

在html的<head>里放入链接，<link type="text/css" rel="stylesheet" href="index.css">，其中type属性可不要，rel属性（relevent）表明链接文件与html文件的关系，是一个样式表，所以用stylesheet。link也是一个void元素，没有结束标记。

css规则不论是外链的还是放在style里的大多都有继承性，除了a的颜色，边框等。

css中更特定的规则能覆盖上层的规则。更特定：首先是作者>读者自定（除非规则后加了important属性）>浏览器默认，然后是更特定的、特定性相同的更靠后的优先。

2、类

一类相同的元素可以放在一个class 里，在html中要增加class 属性，<p class="greentea">，然后在css中创建这个类的规则整个类用 .greentea{} ，选择类中某一元素用p.greentea, blockquote.greentea {}。

一个元素可以加入多个类<p class="greentea rasberry blueberry">。

3、属性杂烩

color:文本元素颜色

font-weight:文本粗细

left:指定元素左边所在位置

line-height:文本行间距，可以用比例，表示是字体大小的多少倍。还可以直接用数字比如1.2，表示个元素行高是自己字体大小的1.2倍，方便用于在父元素中有多个不同类型行高的设定，否则全部按照父元素字体大小的倍数，对有些标题来说太小了。

font-size:文本大小

padding:内边距

border:边框

background-color:背景颜色

text-align:文本对齐方式

letter-spacing:字母之间间距

fontstyle: 设置斜体

liststyle:列表项外观

background-image:元素后放一个图片当背景

八、增加字体和颜色样式 扩大你的词汇量

font-family是一系列字体候选列表，body{font-family: Verdana, Geneva, Aviral, sans-serif;}，越靠前越优先，用户浏览器没有这个字体的话继续向下选，最后要有一个保底字体集。

字体大小font-size，可以用px、%、em，还有关键字small large这些来表示，其中1.2em=120%，比例是相对于其父元素的字体大小。一般地，body字体大小选择一个关键字表示，其他元素相对于body用比例表示。这样更改body字大小其他的都会相应变化。一般不建议用像素px来指定大小，可用性低，不会随页面缩放（老版本IE浏览器，新版本已经可以缩放）。

web颜色：可以用颜色名、RGB百分比和十六进制来表示。

1、字体外观属性：

font-family:字体系列

text-decoration:上划线、下划线和删除线，类似地html中的<del>也有删除线样式，<ins>也有下划线样式，但更多地是表功能。

font-size:字体大小

font-weight:字体粗细

font-style:增加斜体，类似地html中的<em>也是斜体，但一个表结构中的强调，一个只是表现方式。

去掉继承的属性，值写为none。如font-weight:none

【干货】Html与CSS入门学习笔记4-8的更多相关文章

  1. 【干货】Html与CSS入门学习笔记1-3

    从23号开始用了4天时间看完了<Head First Html与CSS>这本书,本书讲解方式深入浅出,便于理解,结合习题,便于记忆,是一本不错的入门书.下面是本书的学习笔记: 一.认识HT ...

  2. 【干货】Html与CSS入门学习笔记9-11

    九.盒模型 与元素亲密接触 1.盒模型 css将每个元素都看做一个盒子,包括以下属性: 内容区content area:包含内容,内容可以决定大小,也可以自行设定宽度和高度.元素的width属性指定的 ...

  3. 【干货】Html与CSS入门学习笔记12-14【完】

    十二.HTML5标记 现代HTML html5新增的元素:header nav footer aside section article time 这些新增元素使页面结构更清晰,取代<div i ...

  4. stylus入门学习笔记

    title: stylus入门学习笔记 date: 2018-09-06 17:35:28 tags: [stylus] description: 学习到 vue, 有人推荐使用 stylus 这个 ...

  5. Sass简单、快速上手_Sass快速入门学习笔记总结

    Sass是世界上最成熟.稳定和强大的专业级css扩展语言 ,除了Sass是css的一种预处理器语言,类似的语言还有Less,Stylus等. 这篇文章关于Sass快速入门学习笔记. 资源网站大全 ht ...

  6. Hadoop入门学习笔记---part4

    紧接着<Hadoop入门学习笔记---part3>中的继续了解如何用java在程序中操作HDFS. 众所周知,对文件的操作无非是创建,查看,下载,删除.下面我们就开始应用java程序进行操 ...

  7. Hadoop入门学习笔记---part3

    2015年元旦,好好学习,天天向上.良好的开端是成功的一半,任何学习都不能中断,只有坚持才会出结果.继续学习Hadoop.冰冻三尺,非一日之寒! 经过Hadoop的伪分布集群环境的搭建,基本对Hado ...

  8. PyQt4入门学习笔记（三）

    # PyQt4入门学习笔记(三) PyQt4内的布局 布局方式是我们控制我们的GUI页面内各个控件的排放位置的.我们可以通过两种基本方式来控制: 1.绝对位置 2.layout类 绝对位置 这种方式要 ...

  9. PyQt4入门学习笔记（一）

    PyQt4入门学习笔记(一) 一直没有找到什么好的pyqt4的教程,偶然在google上搜到一篇不错的入门文档,翻译过来,留以后再复习. 原始链接如下: http://zetcode.com/gui/ ...

随机推荐

  1. HDFS内容追加

    配置:hdfs-site.xml <property> <name>dfs.support.append</name> <value>true</ ...

  2. 使用 Chrome Timeline 来优化页面性能

    使用 Chrome Timeline 来优化页面性能 有时候,我们就是会不由自主地写出一些低效的代码,严重影响页面运行的效率.或者我们接手的项目中,前人写出来的代码千奇百怪,比如为了一个 Canvas ...

  3. 5.docker的疑难杂症

    根据官方文档:https://docs.docker.com/install/linux/docker-ce/centos/搭建docker 1.卸载docker旧版本: sudo yum remov ...

  4. html5增强的页面元素

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. MATLAB求微分

    求微分 diff(函数) , 求的一阶导数;diff(函数, n) , 求的n阶导数(n是具体整数);diff(函数,变量名), 求对的偏导数;diff(函数, 变量名,n) ,求对的n阶偏导数; & ...

  6. 洛谷P1164 小A点菜（01背包求方案数）

    P1164 小A点菜 题目背景 uim神犇拿到了uoi的ra(镭牌)后,立刻拉着基友小A到了一家……餐馆,很低端的那种. uim指着墙上的价目表(太低级了没有菜单),说:“随便点”. 题目描述 不过u ...

  7. OC 中的 weak 属性是怎么实现的？

    OC 中的 weak 属性是怎么实现的,为什么在对象释放后会自动变成 nil?本文对这个问题进行了一点探讨.环境 mac OS Sierra 10.12.4 objc709参考答案 搜索后发现runt ...

  8. shell括号和linux算术运算

    一.小括号() 1. 单小括号() a).命令组 (a=0;touch a.txt) 小括号中的内容会开启一个子shell独立运行:括号中以分号连接,最后一个命令不需要:各命令和括号无空格 b).命令 ...

  9. 备份与恢复：MySQL系列之十二

    一.备份策略赘述 1.备份的类型 类型1: 热备份:读写不受影响(MyISAM不支持热备,InnoDB支持热备) 温备份:仅可以执行读操作 冷备份:离线备份,读写操作均中止 类型2: 物理备份:复制数 ...

  10. 洛谷 P1365 WJMZBMR打osu! / Easy

    题目背景 原 维护队列 参见P1903 题目描述 某一天\(WJMZBMR\)在打\(osu~~~\)但是他太弱逼了,有些地方完全靠运气:( 我们来简化一下这个游戏的规则 有\(n\)次点击要做,成功 ...