通过阅读和学习书籍《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属性的内容,因此一定要给标签的这个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 段落与标签
不仅是最大最突出的标题,搜索引擎也会将其视为仅次于标签的另一个搜索关键词的来源。
段落用于标记主要的文本内容,是所有文本元素中出场率最高的一个。简言之,只有不适合放在其他文本标签中的文本,都可以把它放一个段落里面。 1.1.5 复合元素
所谓复合元素,即它们是由多个标签共同构成的。如用于创建列表,表格,和表单等复杂用户界面组件的标记。
1.1.6 嵌套标签
要在一个标签里嵌套另一个标签,必须要先关闭后一个标签在关闭前面那个标签。HTML文档的结构正是通过类似这样的嵌套标签,以及就此建立起来标签间的“父-子”关系形成的。
1.2 HTML文档剖析
<!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 ’ --> <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’ 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>
标签有一个charset属性,它是在告诉浏览器这个页面使用的是UTF-8编码。
标签中的文本会在页面显示时,作为整个页面的标题出现在浏览器窗口顶部的标题栏中。
搜索引擎会给标签中的文字内容赋予很高的权重,而且这些文字也会作为网页标题出现在搜索列表结果中。一定依然那个这些文字简单明确,而且包含目标读者在搜索你的网页时会使用的关键词。
标签则包含着标记所有内容的HTML元素。
在
标签中,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”。
段落用于标记主要的文本内容,是所有文本元素中出场率最高的一个。简言之,只有不适合放在其他文本标签中的文本,都可以把它放一个段落里面。
1.1.5 复合元素
所谓复合元素,即它们是由多个标签共同构成的。如用于创建列表,表格,和表单等复杂用户界面组件的标记。
1.1.6 嵌套标签
要在一个标签里嵌套另一个标签,必须要先关闭后一个标签在关闭前面那个标签。HTML文档的结构正是通过类似这样的嵌套标签,以及就此建立起来标签间的“父-子”关系形成的。
1.2 HTML文档剖析
<!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 ’ --> <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’ 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>
标签有一个charset属性,它是在告诉浏览器这个页面使用的是UTF-8编码。
搜索引擎会给
Web Developer 简体中文汉化版下载( Firefox & Chrome 扩展)
百度百科:WebDeveloper插件
WEB DEVELOPER
HTML 字符实体
HTML 符号
HTML实体符号代码速查表
元素节点:上图中、
、等都是元素节点,即标签。
文本节点:向用户展示的内容,如

Self-closingtagsinHTMLandXMLaretagsthatclosethemselveswithoutneedingaseparateclosingtag,simplifyingmarkupstructureandenhancingcodingefficiency.1)TheyareessentialinXMLforelementswithoutcontent,ensuringwell-formeddocuments.2)InHTML5,usageisflexiblebutr

To build a website with powerful functions and good user experience, HTML alone is not enough. The following technology is also required: JavaScript gives web page dynamic and interactiveness, and real-time changes are achieved by operating DOM. CSS is responsible for the style and layout of the web page to improve aesthetics and user experience. Modern frameworks and libraries such as React, Vue.js and Angular improve development efficiency and code organization structure.

Boolean attributes are special attributes in HTML that are activated without a value. 1. The Boolean attribute controls the behavior of the element by whether it exists or not, such as disabled disable the input box. 2.Their working principle is to change element behavior according to the existence of attributes when the browser parses. 3. The basic usage is to directly add attributes, and the advanced usage can be dynamically controlled through JavaScript. 4. Common mistakes are mistakenly thinking that values need to be set, and the correct writing method should be concise. 5. The best practice is to keep the code concise and use Boolean properties reasonably to optimize web page performance and user experience.

HTML code can be cleaner with online validators, integrated tools and automated processes. 1) Use W3CMarkupValidationService to verify HTML code online. 2) Install and configure HTMLHint extension in VisualStudioCode for real-time verification. 3) Use HTMLTidy to automatically verify and clean HTML files in the construction process.

HTML, CSS and JavaScript are the core technologies for building modern web pages: 1. HTML defines the web page structure, 2. CSS is responsible for the appearance of the web page, 3. JavaScript provides web page dynamics and interactivity, and they work together to create a website with a good user experience.

The function of HTML is to define the structure and content of a web page, and its purpose is to provide a standardized way to display information. 1) HTML organizes various parts of the web page through tags and attributes, such as titles and paragraphs. 2) It supports the separation of content and performance and improves maintenance efficiency. 3) HTML is extensible, allowing custom tags to enhance SEO.

The future trends of HTML are semantics and web components, the future trends of CSS are CSS-in-JS and CSSHoudini, and the future trends of JavaScript are WebAssembly and Serverless. 1. HTML semantics improve accessibility and SEO effects, and Web components improve development efficiency, but attention should be paid to browser compatibility. 2. CSS-in-JS enhances style management flexibility but may increase file size. CSSHoudini allows direct operation of CSS rendering. 3.WebAssembly optimizes browser application performance but has a steep learning curve, and Serverless simplifies development but requires optimization of cold start problems.

The roles of HTML, CSS and JavaScript in web development are: 1. HTML defines the web page structure, 2. CSS controls the web page style, and 3. JavaScript adds dynamic behavior. Together, they build the framework, aesthetics and interactivity of modern websites.


Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

mPDF
mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),

ZendStudio 13.5.1 Mac
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

MantisBT
Mantis is an easy-to-deploy web-based defect tracking tool designed to aid in product defect tracking. It requires PHP, MySQL and a web server. Check out our demo and hosting services.

SecLists
SecLists is the ultimate security tester's companion. It is a collection of various types of lists that are frequently used during security assessments, all in one place. SecLists helps make security testing more efficient and productive by conveniently providing all the lists a security tester might need. List types include usernames, passwords, URLs, fuzzing payloads, sensitive data patterns, web shells, and more. The tester can simply pull this repository onto a new test machine and he will have access to every type of list he needs.
