Head First HTML CSS XHTML笔记
最近在看点前端的东西,看到了这本入门级的好书
<head></head>中的title和style
<q></q> inline元素 在<p>中
<blockquote><blockquote> 块元素
<br> 空元素
<ol></ol> 有序(前面有1,2,3...)
<li><li> 项列表,嵌入在ol或者ul中
<ul></ul> 无序
列表是一组项目,<li>元素用来确定每个项目,<ol>把它们组成一组
所以<ol>和<li>必须一起用。
使用<a>来跳转到链接页面的指定区域
a.html:
<html>
<body>
<h1>hihi</h1>
<h2><a id="chai">Chai Tea</a></h2>
</body>
</html>
b.html:
<html>
<body>
<a href="a.html#chai">See Chai Tea</a>
</body>
</html>
打开b后,点击链接,可以跳转到a页面的Chai Tea区域
打开新窗口,添加target对象为_blank
<html>
<body>
<a target="_blank" href="index.html#chai">See Chai Tea</a>
</body>
</html>
img是内联元素
如果图形没有显示,alt的文字用来代替图片
<img src="url.gif" alt="no pages">
标准,提示浏览器该页面符合协议
<!DOCTYPE html PUBLIC ""...>
去w3c检测自己的网页是否符合标准
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
head是放置title,meta,style元素的唯一地方
内联和文本必须在块元素中才可以运行
块元素不鞥呢内嵌在内联元素里
xhtml是xml
xhtml的空元素都以 /> 结尾
css
在head中,使用link,添加css文件
<link type="text/css" rel="stylesheet" href="my.css" />
type为类型
rel为关系,即样式表
p{
color: red;
}
p.greentea{
color: green;
}
<p class="greentea">...
用图片做背景
background-image: url(images/background.gif)
p.specials{}选择specials class的段落
.specials{}选择specials class的所有元素
#footer{} 选择id为footer的任意元素
p#footer{} 选择id为footer的<p>元素
可以多样式表,多个link即可
还能多样式表用于不同的设备,如打印机,在link添加media="print"
div来进行逻辑分区
选择子孙
div h2{}
#elixirs h2{}
<span>用于创建一组内联字符和元素,用来对<p>进行设置
因为不能用div,会引起换行
链接也可以设置样式
a.link{ color: green}
a.visited{}
a.hover{}
a.focus{}
a.active{}
这就是伪类
流,块是从上到下,内联是从左到右
table,从上到下,从左到右
<table summary="table's data"> 摘要
<tr> 第一列
<th></th> 表头
<th></th>
<th></th>
</tr>
<tr> 第二列
<td></td> 第二行
<td></td>
<td></td>
</tr>
<tr> 第三列
<td></td> 第三行
<td></td>
<td></td>
</tr>
</talbe>
li table的样式设置
li还可以自定义样式
表单
<form action="url" method="POST">
<input type="submit">
</form>
w3c不建议使用框架<frame> <frameset>
媒体元素<object>
Head First HTML CSS XHTML笔记的更多相关文章
- CSS学习笔记
CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...
- HTML+CSS学习笔记 (7) - CSS样式基本知识
HTML+CSS学习笔记 (7) - CSS样式基本知识 内联式css样式,直接写在现有的HTML标签中 CSS样式可以写在哪些地方呢?从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式.嵌 ...
- HTML+CSS学习笔记 (6) - 开始学习CSS
HTML+CSS学习笔记 (6) - 开始学习CSS 认识CSS样式 CSS全称为"层叠样式表 (Cascading Style Sheets)",它主要是用于定义HTML内容在浏 ...
- HTML+CSS学习笔记(5)- 与浏览者交互,表单标签
HTML+CSS学习笔记(5)- 与浏览者交互,表单标签 1.使用表单标签,与用户交互 网站怎样与用户进行交互?答案是使用HTML表单(form).表单是可以把浏览者输入的数据传送到服务器端,这样服务 ...
- HTML+CSS学习笔记(4) - 认识标签(3)
HTML+CSS学习笔记(4) - 认识标签(3) 1.使用<a>标签,链接到另一个页面 使用<a>标签可实现超链接,它在网页制作中可以说是无处不在,只要有链接的地方,就会有这 ...
- HTML+CSS学习笔记(3)- 认识标签(2)
HTML+CSS学习笔记(3)- 认识标签(2) 1.使用ul,添加新闻信息列表 在浏览网页时,你会发现网页上有很多信息的列表,如新闻列表.图片列表, 这些列表就可以使用ul-li标签来完成.ul-l ...
- HTML+CSS学习笔记(2) - 认识标签(1)
HTML+CSS学习笔记(2) - 认识标签(1) 1.语义化,让你的网页更好的被搜索引擎理解 标签的用途: 我们学习网页制作时,常常会听到一个词,语义化.那么什么叫做语义化呢,说的通俗点就是:明白每 ...
- HTML+CSS学习笔记(1) - Html介绍
HTML+CSS学习笔记(1) - Html介绍 1.代码初体验,制作我的第一个网页 <!DOCTYPE HTML> <html> <head> <meta ...
- css学习笔记四
广州天气变冷了,css学习笔记还是要总结. 总结: 1:几米页面静态页面主要是一列结构头部banner图,mainbody部分放文字内容和图书图片,底部是页面的版权信息 2:腾讯软件中心静态页面制作( ...
随机推荐
- python面试题大全(二)
转载请注明出处http://www.cnblogs.com/goodhacker/p/3387027.html 1.python中类方法.类实例方法.静态方法有何区别? 区别: 类方法和静态方法都可以 ...
- iOS-Debug调试
转载:http://www.cnblogs.com/Leo_wl/p/4423922.html
- static、final、static final 用法
1.使用范围:类.方法.变量.2.区别和联系:2.1.static 含义:静态的,被 static 修饰的方法和属性只属于类不属于类的任何对象.2.2.static 用法:2.2.1.static 可 ...
- An Introduction to Garbage Collection(垃圾回收简介)
1. Introduction 2. Principles 3. Advantages 4. Disadvantages 5. 常见的垃圾回收技术 5.1. 跟踪式垃圾回收 5.1.1. 基本算法 5 ...
- 3D拓扑自动布局之Node.js篇
上篇将3D弹力布局的算法运行在Web Workers后台,这篇我们将进一步折腾,将算法运行到真正的后台:Node.js,事先申明Node.js篇和Web Workers篇一样,在这个应用场景下并不能提 ...
- Mysql创建用户的三种基本方法
1.采用create user e.g. create user 'username'@'host' identified by 'password'; 2.采用grant语句 e.g. gran ...
- 【Win10】【Win2D】实现控件阴影效果
学过 WPF 的都知道,在 WPF 中,为控件添加一个阴影效果是相当容易的. <Border Width="100" Height="100" Backg ...
- Python入门笔记(20):Python函数(3):关于lambda
一.lambda函数 1.lambda函数基础: lambda函数也叫匿名函数,即,函数没有具体的名称,而用def创建的方法是有名称的.如下: """命名的foo函数&q ...
- js removeChild 方法
1. 概述 删除后的节点虽然不在文档树中了,但其实它还在内存中,可以随时再次被添加到别的位置. 当你遍历一个父节点的子节点并进行删除操作时,要注意,children属性是一个只读属性,并且它在子节点变 ...
- PHP获取APK的包信息
这段时间太忙了,一个月没有写博客了,稍微闲下来就感觉把在开发中遇到的问题记录下来 php上传安卓apk包的时候,需要获取安卓apk包内的信息 <?php /*解析安卓apk包中的压缩XML文件, ...