Head First HTML with CSS & XHTML笔记

Element = Opening Tag + Content + Closing Tag

Q:

I've noticed the HTML in some pages doesn't always match opening tags with closing tags.

A:

Well, the tags are supposed to match. In general, browsers do a pretty good job of figuring out what you mean if you write incorrect HTML. But, as you're going to see, these days there are big benefits to writing totally correct HTML. If you're worried you'll never be able to write perfect HTML, don't be; there are plenty of tools to verify your code before you put it on a Web server so the whole world can see it. For now, just get in the habit of always matching your opening tags with closing tags.

Q:

Well, what about that <img src="drinks.gif"> tag in the lounge example? Did you forget the closing tag?

A:

Wow, sharp eye. There are some elements that use a shorthand notation with only one tag.


Attributes give you a way to provide additional information about an element. Like, if you have a style element, the attribute allows you to say exactly what kind of style you're talking about.

<style type="text/css">
Because you're going to use CSS, you need to specify the "text/css" type.(暂时没有别的选择)
There aren't currently any other styles that work with today's browsers, but those designers of HTML are always planning ahead and anticipate that there may be other types of style in the future.
</style>

 Linking down into a subfolder
 Linking up into a "parent " folder     ../

Q:

My operating system uses "/" as a separator; shouldn't I be using that instead of "/"?

A:

No; in Web pages you always use "/". Don't use "/".

The rough design sketch→From a sketch to an outline→From the outline to a Web page

 the <q > element
 Some browsers, including Internet Explorer version 6, do not display double quotes around the content in the <q> elementThis is unfortunate, because if you add your own double quotes, some browsers will display TWO sets of quotes. The only way to solve this conundrum is to use CSS to add some visual style to your quotes 
 <blockquote> creates a separate block (like <p> does), plus it indents the text a bit to make it look more like a quote.

<blockquote> and <q> are actually different types of elements. The <blockquote> element is a block element and the <q> element is an inline element. What's the difference? Block elements are always displayed as if they have a linebreak before and after them, while inline elements appear "in line" within the flow of the text in your page.
 Block: stands on its own
 
Inline: goes with the flow
 
<h1>, <h2>, ..., <h6>, <p>, and <blockquote> are all block elements.
<q>, <a>, and <em> are inline elements.

make a list...
 
Step One:Put each list item in an <li > element
 Step Two:Enclose your list items with either the <ol > or <ul> element.

you wanted to type "The <html> element rocks." in your page. Using the character entities, you'd type this instead:         The &lt;html&gt; element rocks.

BULLET POINTS

  • Plan the structure of your Web pages before you start typing in the content. Start with a sketch, then create an outline, and finally write the HTML.

  • Plan your page starting with the large, block elements, and then refine with inline elements.

  • Remember, whenever possible, use elements to tell the browser what your content means.

  • Always use the element that most closely matches the meaning of your content. For example, never use a paragraph when you need a list.

  • <br> is an "empty element." Empty elements have no content. An empty element consists of only one tag.

  • You make an HTML list using two elements in combination: use <ol> with <li> for an ordered list; use <ul> with <li> for an unordered list. When the browser displays an ordered list, it creates the numbers for the list so you don't have to.

  • You can specify your own ordering in an ordered list with the start attribute. To change the values of the individual items, use the value attribute.


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Tired of reading HTML books that only make sense after you're an expert? Then it's about time you picked up 'Head First HTML with CSS & XHTML' and really learned HTML. You want to learn HTML so you can finally create those Web pages you've always wanted, so you can communicate more effectively with friends, family, fans and fanatic customers. You also want to do it right so you can actually maintain and expand your Web pages over time, and so your Web pages work in all the browsers and mobile devices out there. Oh, and if you've never heard of CSS, that's okay - we won't tell anyone you're still partying like it's 1999 - but if you're going to create Web pages in the 21st century then you'll want to know and understand CSS. Learn the real secrets of creating Web pages, and why everything your boss told you about HTML tables is probably wrong (and what to do instead). Most importantly, hold your own with your co-worker (and impress cocktail party guests) when he casually mentions how his HTML is now strict, and his CSS is in an external style sheet. With 'Head First HTML with CSS & XHTML', you'll avoid the embarrassment of thinking Web-safe colors still matter, and the foolishness of slipping a font tag into your pages. Best of all, you'll learn HTML and CSS in a way that won't put you to sleep. If you've read a 'Head First' book, you know what to expect: a visually-rich format designed for the way your brain works. Using the latest research in neurobiology, cognitive science, and learning theory, this book will load HTML, CSS, and XHTML into your brain in a way that sticks. So what are you waiting for? Leave those other dusty books behind and come join us in Webville. Your tour is about to begin.
在你成为一名行家之后,阅读HTML书籍给你的唯一感受就是厌烦吗?那么现在就是你拿起《深入浅出HTMLCSSXHTML》来真正学习HTML的时候了。这本书展示了学习创建符合工业标准的Web页面的完整历程——然而,除了阅读,你还会玩游戏、拼图、解谜题以及以你从未想象过的方式创建Web页面。并且,你还将学习HTML如何与CSS一起工作。哦,如果你从未听说过CSS,没关系——我们不会告诉其他人你仍然停留在上个世纪末,但是,如果你要创建本世纪的Web页面,那么,你应该了解和熟悉CSS。 《深入浅出HTMLCSSXHTML》能让你避免认为Web-safe颜色还是紧要问题的尴尬,以及不明智地把标记放入你的页面。最大的好处是,你将毫无睡意地学习HTMLXHTMLCSS。如果你曾经读过深入浅出(Head First)系列图书中的任一本,就会知道书中展现的是什么:一个按人脑思维方式设计的丰富的可视化学习模式。本书的编写采用了许多最新的研究,包括神经生物学、认知科学以及学习理论,这使得本书能让HTMLCSS深深地烙印在你的脑海里。 学会创建Web页面的真正诀窍,并认识到为什么你的老板所说的关于HTML表格的一切都有可能是错误的(以及做什么来代替)。最重要的是,在鸡尾酒会上当你的同事随口提及他的HTML现在如何完整以及他的CSS是在外部样式表里时,你表示认同,这会给酒会客人留下深刻的印象。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值