认识HTML_html/css_WEB-ITnose
基本框架：
1 <html> 2 <head> 3 <title>This Is Title</title> 4 </head> 5 6 <body> 7 <h1><!--一级标题--></h1> 8 <h2><!--二级标题--></h2> 9 <p>10 <!--段落-->11 </p>12 </body>13 </html>
注释：
style，CSS
1 <head> 2 <title>This Is Title</title> 3 4 <style type="text/css"> 5 body{ 6 background-color: #eaf; 7 margin-left: 20%; 8 margin-right: 20%; 9 border: 2px dotted black;10 padding: 10px 10px 10px 10px;11 font-family: sans-serif;12 }13 </style>14 </head>注释：
HT（hypertext）
1 <a href = "beverages/elixir.html" > elixirs </a>2 <a href = "http://www.cnblogs.com/JJ-kelion/" title = "Read His blogs" > cnblogs jj-kelion </a>3 <a href = "../index.html" > RETURN </a>4 <a target = "_blank" href="beverages/elixir.html"> <img src="/static/imghw/default1.png" data-src="images/j.png" class="lazy" alt="认识HTML_html/css_WEB-ITnose" > </a>
注释：
示图：
,
1 <blockquote>2 Passing cars, <br>3 when you can't see, <br>4 A glimpse, <br>5 </blockquote>6 7 <p>8 <q> passing car </q>,when you can't see.9 </p>
注释：
：双引号，短引号，作为现有段落的一部分
：较长引用，单独显示，为块元素
：换行符
，，
- ，
1 <ol> 2 <li> one </li> 3 <li> two </li> 4 <li> three </li> 5 <li> four thing 6 <ul> 7 <li> one </li> 8 <li> two </li> 9 <li> three </li>10 </ul>11 </li>12 </ol>
注释：
- ：ordered list 有序
- : unordered list 无序
- 和
- 或者
- 和
- 总是要一起使用
- URL：域名，用来唯一标识网站
- 为了便于访问，在元素中使用title元素
- 使用target属性在另一个浏览器窗口中打开链接。
- 浏览器从服务器获取文件“jj-kelion.html”
- 读取“jj-kelion.html”，发现有n个图像需要获取
- 从服务器逐个得到图像，从第一开始，显示完后，转向下一个图
- JPEG
- PNG
- GIF
- JPEG：适合连续色调图像，可以表示千万种颜色，有损格式，不支持透明和动画
- PNG：适合单色和线条构成图，是一种无损格式，允许透明，
- GIF：最适合单色图和线条图，最多256种颜色，支持透明，无损格式，支持动画。
- JPEG和PNG擅长表示logo和文本图像；
- JPEG擅长照片
- 需要透明和多种颜色：选择PNG
- src不只是用于相对链接，还可以放入URL
- 相同网站上的链接和图像，最好使用相对链接
- 如果图像未能显示，就会用alt属性指定的描述图像的文本代替图像
- 为缩略图创建一个目录
- 将各个分辨率降低后的照片存入文件夹中
- 将页面中的各个
元素的src设置为缩略版的
- 增加从缩略图到一个新页面显示大图的链接
- 首行
- alt属性为必要的
- 指定字符编码，在首部中的首行，
- 验证代码工具：http：//validator.w3.org
URL
1 URL: 2 http://www.cnblogs.com/JJ-kelion/ 3 4 <a href="http://www.cnblogs.com/JJ-kelion/" title="Read His blogs"> cnblogs jj-kelion</a> 5 6 <!--为标题的开始增加标记--> 7 <h2 id="Chai-Tea"> Chai Tea </h2> 8 <!--用可用ID链接到元素--> 9 <a href="top.html/#chai" title="read chai"> Chai tea </a>10 <!--打开新窗口-->11 <a target="_blank" href="http://www.cnblogs.com/JJ-kelion/" title="Read His blogs"> cnblogs jj-kelion</a>
Copy after login注释：
使用图像：
幕后步骤：
常用图片格式：
格式分析：
总结：
1 <img src="/static/imghw/default1.png" data-src="images/jj.png" class="lazy" alt="认识HTML_html/css_WEB-ITnose" ><br />2 <img src="/static/imghw/default1.png" data-src="http://www.cnblogs.com/JJ-kelion/images/corporate/ceo.jpg" class="lazy" alt="认识HTML_html/css_WEB-ITnose" ><br />3 <img src="/static/imghw/default1.png" data-src="images/jj.png" class="lazy" alt="a picture"><br />4 <img src="/static/imghw/default1.png" data-src="images/jj.png" class="lazy" style="max-width:90%" style="max-width:90%" alt="认识HTML_html/css_WEB-ITnose" ><br /> <!--使用缩略图-->5 <a href="big picture"> <img src="small picture" alt="a picture"> </a>
Copy after login注释：
创建缩略图步骤：
HTML5
指南：
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
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1371
52
What is the purpose of the <progress> element?
Mar 21, 2025 pm 12:34 PM
The article discusses the HTML <progress> element, its purpose, styling, and differences from the <meter> element. The main focus is on using <progress> for task completion and <meter> for stati
What is the purpose of the <datalist> element?
Mar 21, 2025 pm 12:33 PM
The article discusses the HTML <datalist> element, which enhances forms by providing autocomplete suggestions, improving user experience and reducing errors.Character count: 159
What is the purpose of the <meter> element?
Mar 21, 2025 pm 12:35 PM
The article discusses the HTML <meter> element, used for displaying scalar or fractional values within a range, and its common applications in web development. It differentiates <meter> from <progress> and ex
What is the viewport meta tag? Why is it important for responsive design?
Mar 20, 2025 pm 05:56 PM
The article discusses the viewport meta tag, essential for responsive web design on mobile devices. It explains how proper use ensures optimal content scaling and user interaction, while misuse can lead to design and accessibility issues.
How do I use the HTML5 <time> element to represent dates and times semantically?
Mar 12, 2025 pm 04:05 PM
This article explains the HTML5 <time> element for semantic date/time representation. It emphasizes the importance of the datetime attribute for machine readability (ISO 8601 format) alongside human-readable text, boosting accessibilit
What are the best practices for cross-browser compatibility in HTML5?
Mar 17, 2025 pm 12:20 PM
Article discusses best practices for ensuring HTML5 cross-browser compatibility, focusing on feature detection, progressive enhancement, and testing methods.
How do I use HTML5 form validation attributes to validate user input?
Mar 17, 2025 pm 12:27 PM
The article discusses using HTML5 form validation attributes like required, pattern, min, max, and length limits to validate user input directly in the browser.
What is the purpose of the <iframe> tag? What are the security considerations when using it?
Mar 20, 2025 pm 06:05 PM
The article discusses the <iframe> tag's purpose in embedding external content into webpages, its common uses, security risks, and alternatives like object tags and APIs.
