最近在看点前端的东西，看到了这本入门级的好书

<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笔记的更多相关文章

  1. CSS学习笔记

    CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...

  2. HTML+CSS学习笔记 (7) - CSS样式基本知识

    HTML+CSS学习笔记 (7) - CSS样式基本知识 内联式css样式,直接写在现有的HTML标签中 CSS样式可以写在哪些地方呢?从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式.嵌 ...

  3. HTML+CSS学习笔记 (6) - 开始学习CSS

    HTML+CSS学习笔记 (6) - 开始学习CSS 认识CSS样式 CSS全称为"层叠样式表 (Cascading Style Sheets)",它主要是用于定义HTML内容在浏 ...

  4. HTML+CSS学习笔记（5）- 与浏览者交互，表单标签

    HTML+CSS学习笔记(5)- 与浏览者交互,表单标签 1.使用表单标签,与用户交互 网站怎样与用户进行交互?答案是使用HTML表单(form).表单是可以把浏览者输入的数据传送到服务器端,这样服务 ...

  5. HTML+CSS学习笔记(4) - 认识标签（3）

    HTML+CSS学习笔记(4) - 认识标签(3) 1.使用<a>标签,链接到另一个页面 使用<a>标签可实现超链接,它在网页制作中可以说是无处不在,只要有链接的地方,就会有这 ...

  6. HTML+CSS学习笔记（3）- 认识标签（2）

    HTML+CSS学习笔记(3)- 认识标签(2) 1.使用ul,添加新闻信息列表 在浏览网页时,你会发现网页上有很多信息的列表,如新闻列表.图片列表, 这些列表就可以使用ul-li标签来完成.ul-l ...

  7. HTML+CSS学习笔记(2) - 认识标签（1）

    HTML+CSS学习笔记(2) - 认识标签(1) 1.语义化,让你的网页更好的被搜索引擎理解 标签的用途: 我们学习网页制作时,常常会听到一个词,语义化.那么什么叫做语义化呢,说的通俗点就是:明白每 ...

  8. HTML+CSS学习笔记(1) - Html介绍

    HTML+CSS学习笔记(1) - Html介绍 1.代码初体验,制作我的第一个网页 <!DOCTYPE HTML> <html> <head> <meta ...

  9. css学习笔记四

    广州天气变冷了,css学习笔记还是要总结. 总结: 1:几米页面静态页面主要是一列结构头部banner图,mainbody部分放文字内容和图书图片,底部是页面的版权信息 2:腾讯软件中心静态页面制作( ...

随机推荐

  1. GitLab安装说明

    GitLab,是一个使用 Ruby on Rails 开发的开源应用程序,与Github类似,能够浏览源代码,管理缺陷和注释,非常适合在团队内部使用. gitlab是基于Ruby on Rails的, ...

  2. 深度使用react-native的热更新能力,必须知道的一个shell命令

    开篇之前,先讲一个自己开发中的一个小插曲: 今天周日,iOS版 App 周一提交,周三审核通过上架,很给力.不过,中午11:30的时候,运营就反应某个页面有一个很明显的问题,页面没法拉到底部,部分信息 ...

  3. css中visiblity和display异同

    visiblity 是设置元素的可见性,即可见 / 隐藏:隐藏后元素所占有位置保留: display 是设置元素按什么样的方式来显示,是按块显示,显示成一条线的形式,显示为“消失”等等,当displa ...

  4. 【C#】1.2 控制台应用程序学习要点

    分类:C#.VS2015 创建日期:2016-06-14 教材:十二五国家级规划教材<C#程序设计及应用教程>(第3版) 一.要点概述 <C#程序设计及应用教程>(第3版)的第 ...

  5. SpreadJS 中应用 KnockoutJS 技术

    SpreadJS 支持 Knockout (KO)技术, KnockoutJS 是一个使用 MVVM 模式的 JavaScript 库,允许双向数据绑定,使数据和UI界面进行实时的交互更新.关于KO的 ...

  6. Maven初步搭建 (一)

    什么是maven? 也许很多人开始的时候跟我一样,在看了很多工程之后都不知道这个鸟东西到底是用来干嘛用的!:-D 一个东西之所以会出现是有其原因的,譬如Linus大神写git. Maven项目对象模型 ...

  7. 优先队列（stl）

    优先队列是堆排的一种优化,我学习的是使用stl库的堆排. 基本操作有: 1.push将一个元素入队. 2.pop将一个元素出队. 3.top返还值为队头元素. 4.empty判断队列是否为空,为空返回 ...

  8. gulp入坑系列(2)——初试JS代码合并与压缩

    在上一篇里成功安装了gulp到项目中,现在来测试一下gulp的合并与压缩功能 gulp入坑系列(1)--安装gulp(传送门):http://www.cnblogs.com/YuuyaRin/p/61 ...

  9. JS写返回上一级

    应产品需求,自己的网站上要有返回上一级的需求,几经周折,做个小总结. (1): $("XX").on("click",function(){      wind ...

  10. ArcGIS 10 SP5中文版（ArcGIS10补丁5中文版）

    下载地址:百度网盘下载地址:http://pan.baidu.com/s/1o7qPGhk 来自:http://zhihu.esrichina.com.cn/?/sort_type-new__day- ...