search
HomeWeb Front-endHTML Tutorial《CSS设计指南》笔记HTML标记与文档结构_html/css_WEB-ITnose

通过阅读和学习书籍《CSS设计指南》总结
《CSS设计指南》/Charles lvyke-Smith著.李松峰译—人民邮电出版社
本书网站:http://www.stylinwithcss.com
强烈推荐!!深入浅出,精简,适合入门!!

HTML标记与文档结构

1.1 HTML标记基础

1.1.1 文本用闭合标签

  闭合标签的基本格式如下:

<标签名>文本内容<标签名/><标签名 属性_1="属性值" 属性_2="属性值">文本内容</标签名>

1.1.2 引用内容用自闭合标签

  自闭合标签的基本格式如下:

<标签名 属性_1="属性值" 属性_n="属性值" />

  非文本内容是通过自闭合标签显示的。闭合标签与自闭合标签的区别在于,闭合标签包含的是会显示的实际内容,而自闭合标签只是给浏览器提供一个对要显示的内容的引用。浏览器会在HTML页面加载的时候,额外向服务器发送请求,以取得自闭合标签引用的内容。

1.1.3 属性

  属性负责为浏览器提供有关标签的额外信息。每个HTML标签都可以添加属性。如:

<img src="/static/imghwm/default1.png"  data-src="images/cisco.jpg"  class="lazy" alt="My dog Cisco" />

  注:视障用户使用的屏幕阅读器会大声读出alt5属性的内容,因此一定要给《CSS设计指南》笔记HTML标记与文档结构_html/css_WEB-ITnose标签的这个alt属性添加让人一听(或一看)就能明白的内容。

  补充重点:块级(block)标签和行内(inline)标签。

  块级标签

<h1>-<h6>:6级标签,<h1>表示很重要<p>:段落标签<ol>:有序列表<li>:列表项<blockquote>:独立引用

  行内标签

<a>:链接(anchor,锚)<img  alt="《CSS设计指南》笔记HTML标记与文档结构_html/css_WEB-ITnose" >:图片<em>:斜体<strong>:重要<abbr>:简要<cite>:引证<q>:文本内引用

1.1.4 段落与标签

  

不仅是最大最突出的标题,搜索引擎也会将其视为仅次于标签的另一个搜索关键词的来源。 <br>  段落用于标记主要的文本内容,是所有文本元素中出场率最高的一个。简言之,只有不适合放在其他文本标签中的文本,都可以把它放一个段落里面。 <h4>1.1.5 复合元素</h4> <p>  所谓复合元素,即它们是由多个标签共同构成的。如用于创建列表,表格,和表单等复杂用户界面组件的标记。</p> <h4>1.1.6 嵌套标签</h4> <p>  要在一个标签里嵌套另一个标签,必须要先关闭后一个标签在关闭前面那个标签。HTML文档的结构正是通过类似这样的嵌套标签,以及就此建立起来标签间的“父-子”关系形成的。</p> <h3>1.2 HTML文档剖析</h3> <pre class='brush:php;toolbar:false;'><!DOCTYPE html><html><head><meta charset="utf-8" /> <title>An HTML Template</title></head><body> <h1>Stylin' with CSS</h1> <!-- if you want a typographically-correct, right single quotation mark, replace the ' with &rsquo; --> <p>Great Web pages start with great HTML markup!</p> <!-- OK to remove the code between here and </body> --> <div style="clear:both; padding:100px 0 0 0; font-size:.85em; color:#666;"> <p>A code example from <em>Stylin&rsquo; with CSS, Third Edition</em> by Charles Wyke-Smith. Visit <a href="http://www.stylinwithcss.com">stylinwithcss.com</a> for more CSS information and updates.</p> </div> </body></html></pre> <p>  <meta>标签有一个charset属性,它是在告诉浏览器这个页面使用的是UTF-8编码。 <br>  </p> <title>标签中的文本会在页面显示时,作为整个页面的标题出现在浏览器窗口顶部的标题栏中。 <br>  搜索引擎会给<title>标签中的文字内容赋予很高的权重,而且这些文字也会作为网页标题出现在搜索列表结果中。一定依然那个这些文字简单明确,而且包含目标读者在搜索你的网页时会使用的关键词。 <br>   标签则包含着标记所有内容的HTML元素。
  在《CSS设计指南》笔记HTML标记与文档结构_html/css_WEB-ITnose标签中,src属性即:source,来源;而在标签中,href属性即:hyperlink reference,超链接引用。

1.2.1 一个开发工具介绍:Web Developer

  相关文章

  • Web Developer 简体中文汉化版下载( Firefox & Chrome 扩展)

  • 百度百科:WebDeveloper插件

  • WEB DEVELOPER

  •   通过Outline(轮廓)菜单中的Outline Block Level Elements 命令,这个命令可以显示页面中块级元素方盒子的轮廓。

      通过Outline 菜单中的Outline Custom Element 可以显示自定义元素的轮廓。如body,行内元素等。

    1.2.2 HTML实体

      重点文章链接:

  • HTML 字符实体

  • HTML 符号

  • HTML实体符号代码速查表

  • 1.3 文档对象模型(DOM)

      文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法。DOM 将HTML文档呈现为带有元素、属性和文本的树结构(节点树)。

      如下面代码:

    将HTML代码分解为DOM节点层次图:

      HTML文档可以说由节点构成的集合,DOM节点有:

  • 元素节点:上图中、

    等都是元素节点,即标签。

  • 文本节点:向用户展示的内容,如

  • ...
  • 中的JavaScript、DOM、CSS等文本。
  • 属性节点:元素属性,如标签的链接属性href=”http://www.imooc.com”。
  • Statement
    The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
    HTML: Building the Structure of Web PagesHTML: Building the Structure of Web PagesApr 14, 2025 am 12:14 AM

    HTML is the cornerstone of building web page structure. 1. HTML defines the content structure and semantics, and uses, etc. tags. 2. Provide semantic markers, such as, etc., to improve SEO effect. 3. To realize user interaction through tags, pay attention to form verification. 4. Use advanced elements such as, combined with JavaScript to achieve dynamic effects. 5. Common errors include unclosed labels and unquoted attribute values, and verification tools are required. 6. Optimization strategies include reducing HTTP requests, compressing HTML, using semantic tags, etc.

    From Text to Websites: The Power of HTMLFrom Text to Websites: The Power of HTMLApr 13, 2025 am 12:07 AM

    HTML is a language used to build web pages, defining web page structure and content through tags and attributes. 1) HTML organizes document structure through tags, such as,. 2) The browser parses HTML to build the DOM and renders the web page. 3) New features of HTML5, such as, enhance multimedia functions. 4) Common errors include unclosed labels and unquoted attribute values. 5) Optimization suggestions include using semantic tags and reducing file size.

    Understanding HTML, CSS, and JavaScript: A Beginner's GuideUnderstanding HTML, CSS, and JavaScript: A Beginner's GuideApr 12, 2025 am 12:02 AM

    WebdevelopmentreliesonHTML,CSS,andJavaScript:1)HTMLstructurescontent,2)CSSstylesit,and3)JavaScriptaddsinteractivity,formingthebasisofmodernwebexperiences.

    The Role of HTML: Structuring Web ContentThe Role of HTML: Structuring Web ContentApr 11, 2025 am 12:12 AM

    The role of HTML is to define the structure and content of a web page through tags and attributes. 1. HTML organizes content through tags such as , making it easy to read and understand. 2. Use semantic tags such as, etc. to enhance accessibility and SEO. 3. Optimizing HTML code can improve web page loading speed and user experience.

    HTML and Code: A Closer Look at the TerminologyHTML and Code: A Closer Look at the TerminologyApr 10, 2025 am 09:28 AM

    HTMLisaspecifictypeofcodefocusedonstructuringwebcontent,while"code"broadlyincludeslanguageslikeJavaScriptandPythonforfunctionality.1)HTMLdefineswebpagestructureusingtags.2)"Code"encompassesawiderrangeoflanguagesforlogicandinteract

    HTML, CSS, and JavaScript: Essential Tools for Web DevelopersHTML, CSS, and JavaScript: Essential Tools for Web DevelopersApr 09, 2025 am 12:12 AM

    HTML, CSS and JavaScript are the three pillars of web development. 1. HTML defines the web page structure and uses tags such as, etc. 2. CSS controls the web page style, using selectors and attributes such as color, font-size, etc. 3. JavaScript realizes dynamic effects and interaction, through event monitoring and DOM operations.

    The Roles of HTML, CSS, and JavaScript: Core ResponsibilitiesThe Roles of HTML, CSS, and JavaScript: Core ResponsibilitiesApr 08, 2025 pm 07:05 PM

    HTML defines the web structure, CSS is responsible for style and layout, and JavaScript gives dynamic interaction. The three perform their duties in web development and jointly build a colorful website.

    Is HTML easy to learn for beginners?Is HTML easy to learn for beginners?Apr 07, 2025 am 12:11 AM

    HTML is suitable for beginners because it is simple and easy to learn and can quickly see results. 1) The learning curve of HTML is smooth and easy to get started. 2) Just master the basic tags to start creating web pages. 3) High flexibility and can be used in combination with CSS and JavaScript. 4) Rich learning resources and modern tools support the learning process.

    See all articles

    Hot AI Tools

    Undresser.AI Undress

    Undresser.AI Undress

    AI-powered app for creating realistic nude photos

    AI Clothes Remover

    AI Clothes Remover

    Online AI tool for removing clothes from photos.

    Undress AI Tool

    Undress AI Tool

    Undress images for free

    Clothoff.io

    Clothoff.io

    AI clothes remover

    AI Hentai Generator

    AI Hentai Generator

    Generate AI Hentai for free.

    Hot Article

    R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
    3 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
    R.E.P.O. Best Graphic Settings
    3 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
    R.E.P.O. How to Fix Audio if You Can't Hear Anyone
    3 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
    WWE 2K25: How To Unlock Everything In MyRise
    4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

    Hot Tools

    ZendStudio 13.5.1 Mac

    ZendStudio 13.5.1 Mac

    Powerful PHP integrated development environment

    SublimeText3 English version

    SublimeText3 English version

    Recommended: Win version, supports code prompts!

    DVWA

    DVWA

    Damn Vulnerable Web App (DVWA) is a PHP/MySQL web application that is very vulnerable. Its main goals are to be an aid for security professionals to test their skills and tools in a legal environment, to help web developers better understand the process of securing web applications, and to help teachers/students teach/learn in a classroom environment Web application security. The goal of DVWA is to practice some of the most common web vulnerabilities through a simple and straightforward interface, with varying degrees of difficulty. Please note that this software

    SublimeText3 Chinese version

    SublimeText3 Chinese version

    Chinese version, very easy to use

    EditPlus Chinese cracked version

    EditPlus Chinese cracked version

    Small size, syntax highlighting, does not support code prompt function