书籍之 Head First HTML与CSS
随书资源下载地址:http://www.wickedlysmart.com/hfhtmlcss/
HTML API学习网址:http://www.w3school.com.cn/h.asp
字符集网址:http://www.w3school.com.cn/tags/html_ref_ascii.asp
这本书讲解了HTML的一些属性值,是Web开发的基础,适合初学者。
1、Web语言:开始了解HTML1
开发工具:Sublime Text (插件Zen Coding + View In Browser),
快速运行:首选项->快捷键->用户
{ "keys": ["f2"], "command": "open_in_browser" },
]
学习之初:只用notepad,之后快速开发用这个Sublime。
元素= 开始标记+内容+结束标记
2.认识HTML中的“HT”:深入理解超文本
1)".." :回上一级目录
2)对于文件html和图片资源,份文件夹管理。
3)<em> 设置为斜体
3.构建网页:构建模块
1)<q>:短引用,文字前后加 " 引号,用于段落里添加引用,作为其中的一部分。
2)<blockquote>:长引用,创建一个单独的文本块,将文字稍微缩进。用于一段或者多段文字,自成一个新段落。
3)<br> 换行
4)块元素:单独显示,前后有换行的效果,特立独行 例如:h1,h2,...,h6,p,blockquote
内联元素:在段落中,随波逐流 例如:q,a,em
5)元素分为两大类:
void元素(空元素):没有实际内容的元素,目的减少HTML标记数量。不需要</>,例如:<br>,<img>
正常元素:例如<p></p> ,<h1> ,<a>
6)列表:
<li>:列表元素,包含在列表,作为一个列表项
<ol>:包围列表项,作为有序列表显示
<ul>:包围列表项,作为无序列表显示
注意:<ul>和<ol>必须包含<li>使用
定义列表:以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。
4 Web镇之旅:开始链接
1)域名:网站唯一的名字 eg: www.starbuzzcoffee.com (www.之后的都是域名)
域名可以用于多个网站,域名唯一,但是网站名字不唯一。 eg:corpo.starbuzzcoffee.com ,empl.starbuzzcoffee.com
2)HTTP:超文本传输协议, HyperText Transfer Protocol
URL:统一资源定位符,Uniform Resource Locator,
例如:http://www.starbuzz.com/index.html
协议 (http/FTP 告诉游览器使用什么方式获取资源)+ 网站 (服务器名+域名组成,告诉游览器从什么计算机获取资源)+ 绝对路径(告诉服务器要找那个网页)
3)在写项目时候,尽量用相对路径。
4)target="_blank" 跳转到新标签页(并且100%有效,根据游览器的设置)
5 认识媒体:给网页添加图像
1)web最常用的图片格式:JPEG,PNG,GIF
JPEG:照片和复杂图像。不支持动画,有损格式
PNG或GIF:单色图像、logo和几何图形,无损格式。PNG更适合透明和多种颜色
GIF:是唯一支持动画的图片格式
2)<img src=""> src属性:制定图片的位置 img是void元素。
属性:
alt:当游览器无法正常显示,会描述这个图像的一些文本
width:图像的宽度
height:图像的高度
3)HTML:用于提供结构 CSS:用来提供表现
4)网页显示的图片都分略缩图和原图,显示网页一般都是略缩图,点击后的网址显示大图。
<a href="html/seattle_video_med.html">
<img src="thumbnails/seattle_video_med.jpg" alt="My video iPod in Seattle, WA">
</a>
6 严格的HTML:遵循标准,合乎规范
1)旧版本:<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http;//www.w3.org/TR/html4/strict.dtd"
HTML5 doctype: <!doctype html> 告诉游览器正在使用HTML5
2)构建web应用书籍: 《Head First HTML5 Programming》
3)HTML5:在这个版本里面,使用向后兼容性,也就是规则可自定义。在这个版本之后,再也没有HTML6,也可以直接称为HTML。
4)W3C验证工具:http://validator.w3.org/
5)meta制定Unicode:在head之间添加 <meta charset="utf-8">
7 添加一个“X”到HTML:转到XHTML
1)p{color:maroon;}
h1{font-family:sans-serif;color:gray;}
h2{font-family:sans-serif;color:gray;}
h1,h2{ font-family:sans-serif;color:gray; }
css样式分离:创建css脚本,在HTML脚本里面引用css样式。
<link type="text/css" rel="stylesheet" href="lounge.css">
rel属性:制定了HTML文件与所连接的文件之间的关系。stylesheet 样式表
href属性:文件地址
2)在html里面:<link type="text/css" rel="stylesheet" href="lounge.css">
<p class="greentea">
在css里面:
p.greentea{
color: green;
}
8 添加一些样式:开始学习CSS
1)CSS属性:
font-family: 设置字体,可以写多个,从左往右,那个字体有,用哪个
font-size: 设置字体大小
color: 设置颜色
font-weight:bold:字体的粗细 lighter、normal、bold、bolder
text-decoration:装饰,上划线(underline),下划线(overline),删除线(line-through)
2)web字体:
href属性:文件地址
TrueType字体:.ttf OpenType字体:.otf
这两个字体,后者在前者基础上建立的。
Embedded OpenType字体:.eot 是 otf字体的一种压缩形式,这种格式是专用的Microsoft,仅IE支持。
SVG字体:svg 通用图像格式
Web开放字体:.woff 大多数游览器对此字体提供了支持
3)font-face属性:
@font-face {
font-family: "Emblema One"; /*添加名字*/
src: url("http://wickedlysmart.com/hfhtmlcss/chapter8/journal/EmblemaOne-Regular.woff"),
url("http://wickedlysmart.com/hfhtmlcss/chapter8/journal/EmblemaOne-Regular.ttf");
}
4)字体:老版本的游览器IE不支持像素制定字体大小的文本缩放
em:字体大小,类似百分比,是一个相对度量单位
5)font-style:italic 斜体/ oblique 倾斜文本,倾斜,有时候一样有时候不一样,直接用italic
background-color: rgb(80%,40%,0%); rgb开头, 100%是255,r:255*80%
9 扩大你的词汇量:字体和颜色样式
1)盒模型:box model 。css将每个元素看做一个盒子表示,每一个盒子由一个内容区以及可选的内边距、边框和外边距组成。
2)css样式:
css文件里面 以.开头
.guarantee{
border-color: black;
border-width:1px;
border-style:solid;
background-color:#a7cece;
}
html里面: <p class="guarantee"></p>
3)边框样式:
border-style: groove;
border-width:thin; / 5px; /*边框宽度*/
border-color:red;
指定一个边的边框: border-top-color,border-top-style,border-top-width
指定边框圆角:border-radius:15px;
4)CSS中使用id号:
属性名#id号{}
在html里面 <p id="guarantee">
举例: p#specilas{ color:red; }
5)平台样式兼容:
a. media属性:根据不同平台调用不同的css文件。在link里面添加:media="screen and (max-device-width:480px)",media="print" (差异性大,建议分开,便于管理)
b. @media screen and (min-device-width:481px) { } 可以把所有平台的样式代码都放在一起。
10 与元素亲密接触:盒模式
1)<div> 可定义文档中的分区或节(division/section)。<div> 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具,并且不使用任何格式与其关联。把相关的元素归组到一起,放在逻辑区中。
如果用 id 或 class 来标记 <div>,那么该标签的作用会变得更加有效。
2)简写:例如 border:thin solid #007e7e; 写成一行
3)<div>允许为块级内容创建逻辑划分 <span>将相关的内联内容的逻辑分组
4)伪类:用于向某些选择器添加特殊的效果。所以有点像类,但不调用,所以伪。
#elixirs a:link{color:#007e7e;}
#elixirs a:visited{color:#333333;}
#elixirs a:hover{background:#f88393; color:#0d5353;}
11 高级网站构建:div和 span
1)float 流:需要设置div元素的宽度,设置流向方向,并且移动到合适的位置。(只能向左,向右)
2)clear属性:当元素流入页面时,在这个元素的左边、右边或两边不允许有浮动内容。
3)流体布局:游览器宽度变化,布局就会扩展,填满整个游览器。
冻结布局:用户调整屏幕大小,设计保持原样。
凝胶布局:锁定页面中内容区的宽度,会在游览器中居中。
4)position属性:static(默认值),absolute(相对于 static 定位以外的第一个父元素进行定位),fixed(相对于游览器窗口的位置),relative(相对定位)
5)多行多列:使用表格属性
12 布置元素:布局和排版
1)html5元素:articel,nav,header,footer,time,aside,section,video
2)<video controls autoplay width="512" height="288" src="video/tweetsip.mp4"></video>
controls:播放器会提供一些空间,可以控制视频和音频的播放
视频格式:主流3种
MP4:H.264视频编码,AAC音频编码
Ogg:Theora视频编码,Vorbis音频编码
WebM:Vp8视频编码,Vorbis音频编码
适应多种游览器,需要准备多种格式的资源。
codecs:制定适用那个编码器对视频和音频编码
举例:
<video controls autoplay width="512" height="288">
<source src="video/tweetsip.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'></source>
<source src="video/tweetsip.webm" type='video/webm; codecs="vp8, vorbis"'></source>
<source src="video/tweetsip.ogv" type='video/ogg; codecs="theora, vorbis"'></source>
</video>
13 开始制作表格:表格和列表
1)table:标记开始表格
tr:标记结束一个表行
td:数据单元格,必须放在一个表行里面
th:表格标头中的一个单元格,必须放在表行里面
caption 元素定义表格标题。
caption 标签必须紧随 table 标签之后。您只能对每个表格定义一个标题。通常这个标题会被居中于表格之上。
注意表格不能用来提供表现,那是css的工作
2)nth-child(2n+1) 对于第奇数个段落执行该css样式
tr:nth-child(2n+1){
background-color:#fcba7a;
}
3)rowspan:属性规定单元格可横跨的行数。
14 交互活动:XHTML 表单
1)form:创建表单 action:包含web服务器的URL
<input type="text" name="firstname" value=""><br>
type="submit" 提交输入 type="radio" 单选钮输入 type="checkbox" 复选框输入
type="comments" 文本区
2)POST 和GET
书籍之 Head First HTML与CSS相关推荐
- 成为一流CSS设计师的8大技巧
CSS是一个非常强大的网站设计标记语言. 虽然你可能会认为,任何人都可以转去写CSS代码,但是为了确保您在正确的轨道上,这里有如下8项 CSS原则,每个网页设计师应该遵循. 1.W3C验证 如果你是1 ...
- 重构之美-走在Web标准化设计的路上[振臂一呼:Css, Stop! ]
一个[复杂表单]热了热身,嗯,好,现在开始逐渐进入状态中-- 这个副标题让我琢磨了很久,和之前的"随想随说"不一样,重新命名为<重构之美>后就给了我压力,让我认真对待仔 ...
- 学习前端开发必读书籍,拥有这几本武功秘籍,让你如有神助
Html和Css方面书书籍: 1 .HTML 5与CSS 3权威指南 :html5和css3入级好书:详尽讲解了HTML5与CSS 3的所有功能和特性: 2 .HTML5移动Web开发指南:介绍了一下 ...
- 前端开发学习书籍整理,拥有此书,如有神助!
一. html + css 这部分建议在 w3school 在线教程 上学习,边学边练,每个属性后还有在线测试. 然后过一遍之后可以模仿一些网站做些页面.记住这个一定要多练 多练 多练 ,最重要的事儿 ...
- Bootstrap书籍分类
目录: 案例1:首页轮播图实现 案例2:首页书籍分类实现 案例3:首页新书上架&热门书籍实现 案例4:首页整合 案例5:实现登录 案例1:首页轮播图实现 <title>案例1:首页 ...
- 11.12-15.书籍详情页面的静态实现和动态数据绑定(有重要知识)
Chapter:11.前端页面开发 11.12-15.书籍详情页面的静态实现和动态数据绑定(有重要知识) 展示层代码 太长了,为了避免影响阅读体验放后面了,主要就是 html 结构,css 样式, ...
- rachel zhang_用Rachel Andrew为分页媒体翻译CSS
rachel zhang A big thank you to Jeff Smith for having reviewed and edited this article. 非常感谢Jeff Smi ...
- TinyFrame升级之八:实现简易插件化开发
本章主要讲解如何为框架新增插件化开发功能. 在.net 4.0中,我们可以在Application开始之前,通过PreApplicationStartMethod方法加载所需要的任何东西.那么今天我们 ...
- php周计划表_PHP学习计划书
PHP 基础( 6-7 周) 参考帮助文档进行查找.学习.运用 参考书籍: HTML . XHTML 和 CSS 宝典(第五版) XHTML 技术( 3-4 周) XHTML 基础: XHTML 标准 ...
- Web前端小白入门指迷
大前端之旅 大前端有很多种,Shell 前端,客户端前端,App 前端,Web 前端和可能接下来很会火起来的 VR 前端等.当然在这篇文章,集中讨论一下身为小白,我们怎样去了解 Web 前端,以至达到 ...
最新文章
- Crossing Rivers UVA - 12230 概率与期望
- table表格细边框
- android连接mysql查询表内记录_Android Room数据库多表查询的使用实例
- f2py支持在fortran语言中调用其他Fortran函数或C代码或Python代码
- Google在Android P中隐藏了真棒的按应用自动旋转功能
- 如何远程访问服务器的 Jupyter notebook
- 就编程而言,可移植性意味着什么?
- 华为matebook14会不会用鸿蒙,2020年用什么笔记本上网课?浅析华为MateBook 14 2020款...
- Dart 4-Day
- Spring :Spring Aop 创建代理
- bzoj 1093 [ ZJOI 2007 ] 最大半连通子图 —— 拓扑+DP
- 根据录入的计算公式计算_预制桩极限承载力标准值快速计算方法研究
- 罗马盘,大力盘,大圣盘等网盘资源搜索免费下载资源教程
- 【linux学习笔记】红帽Linux 7.8系统在虚拟机上的安装
- WTL 自绘控件库 (CQsCheckBox)
- inline-block是什么意思
- 十只老鼠和一千瓶毒药的故事
- Charles浏览器抓包配置
- tp5中渲染页面将时间戳转换为日期时间格式(Y-m-d H:i:s)
- 数据库之mysql事务原理分析与锁机制 详解
热门文章
- ER-studio显示选项设置
- 2020年ROS机器人操作系统用户官方调查
- 巴特沃斯归一化数字低通滤波器参数、原理及使用方法
- MATLAB 图像批处理工具箱(Image Batch Processor)介绍
- 史上超强图像处理开源工具包--ImageMagick
- Excel将选中的筛选内容复制可见的筛选格中方法
- 74HC/LS/HCT/F系列芯片的区别及使用[转]
- MultiDock——专门为 macOS 设计的增强型 Dock
- 达摩达兰论估价pdf_应用公司理财PDF下载_(美)阿斯瓦斯・达摩达兰_机械工业出版社_会计_管理_零度图书网...
- 云计算技术体系结构介绍