认识HTML_html/css_WEB-ITnose-HTML Tutorial-php.cn

Home

Web Front-end

HTML Tutorial

认识HTML_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:34 AM

基本框架：

 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>

注释：

和告诉浏览器文件的内容是HTML

被和包围的首部（head）告诉浏览器关于web页面的信息

head标记中放入title标记，title出现在浏览器窗口

页面的主体包括和标记以及他们之间的所有内容，是浏览器中看到的部分

元素 = 开始标记 + 内容 + 结束标记

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>

注释：

style指定样式为CSS

background-color ：背景色

margin-left，margin-right：左右外边距分别占页面的20%

border：页面周围边框为虚线，颜色为黑色

padding：在页面主体周围创建一些内边距

font-family：定义文本使用的字体

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/imghwm/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

 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>

注释：

URL：域名，用来唯一标识网站
为了便于访问，在元素中使用title元素
使用target属性在另一个浏览器窗口中打开链接。

使用图像：

幕后步骤：

浏览器从服务器获取文件“jj-kelion.html”
读取“jj-kelion.html”，发现有n个图像需要获取
从服务器逐个得到图像，从第一开始，显示完后，转向下一个图

常用图片格式：

JPEG
PNG
GIF

格式分析：

JPEG：适合连续色调图像，可以表示千万种颜色，有损格式，不支持透明和动画
PNG：适合单色和线条构成图，是一种无损格式，允许透明，
GIF：最适合单色图和线条图，最多256种颜色，支持透明，无损格式，支持动画。

总结：

JPEG和PNG擅长表示logo和文本图像；
JPEG擅长照片
需要透明和多种颜色：选择PNG

1 <img  src="/static/imghwm/default1.png"  data-src="images/jj.png"  class="lazy" alt="认识HTML_html/css_WEB-ITnose" ><br />2 <img  src="/static/imghwm/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/imghwm/default1.png"  data-src="images/jj.png"  class="lazy" alt="a picture"><br />4 <img  src="/static/imghwm/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>

注释：

src不只是用于相对链接，还可以放入URL
相同网站上的链接和图像，最好使用相对链接
如果图像未能显示，就会用alt属性指定的描述图像的文本代替图像

创建缩略图步骤：

为缩略图创建一个目录
将各个分辨率降低后的照片存入文件夹中
将页面中的各个元素的src设置为缩略版的
增加从缩略图到一个新页面显示大图的链接

HTML5

指南：

首行
alt属性为必要的
指定字符编码，在首部中的首行，
验证代码工具：http：//validator.w3.org

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

Difficulty in updating caching of official account web pages: How to avoid the old cache affecting the user experience after version update?Mar 04, 2025 pm 12:32 PM

The official account web page update cache, this thing is simple and simple, and it is complicated enough to drink a pot of it. You worked hard to update the official account article, but the user still opened the old version. Who can bear the taste? In this article, let’s take a look at the twists and turns behind this and how to solve this problem gracefully. After reading it, you can easily deal with various caching problems, allowing your users to always experience the freshest content. Let’s talk about the basics first. To put it bluntly, in order to improve access speed, the browser or server stores some static resources (such as pictures, CSS, JS) or page content. Next time you access it, you can directly retrieve it from the cache without having to download it again, and it is naturally fast. But this thing is also a double-edged sword. The new version is online,

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 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 to efficiently add stroke effects to PNG images on web pages?Mar 04, 2025 pm 02:39 PM

This article demonstrates efficient PNG border addition to webpages using CSS. It argues that CSS offers superior performance compared to JavaScript or libraries, detailing how to adjust border width, style, and color for subtle or prominent effect

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

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 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

See all articles