HTML学习笔记

维基百科中HTML定义:

超文本标记语言英文HyperText Markup LanguageHTML)是为“网页创建和其它可在网页浏览器中看到的信息”设计的一种标记语言。HTML被用来结构化信息——例如标题、段落和列表等等 点击打开链接


参考手册:

w3schools 点击打开链接 {语法大全,超赞!}


HTML的基本结构:

[html]  view plain copy
  1. <!DOCTYPE html>   <!-- HTML5-->  
  2. <html>  
  3.   <head>  
  4.     <title>我的第一个页面</title>  
  5.     <meta charset='utf-8'>      <!-- 文本编码格式-->    
  6.     <meta name='description' content=''>  
  7.     <meta name='keywords' content=''>  
  8.     <meta name='author' content=''>  
  9.     <meta name='robots' content='all'>  
  10.     <!-- <meta http-equiv='X-UA-Compatible' content='IE=edge'> -->  
  11.     <link href='/favicon.png' rel='shortcut icon' type='image/png'>  
  12.   </head>  
  13.   <body>  
  14.           大家好。这是我的个人主页。  
  15.   </body>  
  16. </html>  

HTML学习笔记_第1张图片


HTML5中新增的英文单词在页面中右侧不使用边字符号时,<wbr>wordsbreaks</wbr>

段落标记  <p>段落</p>
标题<h1></h2>一直到<h6></h6>
换行<br>或者<br />   line breaks


文字格式(不推荐用以下标记,推荐使用CSS):
<b>加粗</b>
<i>斜体</i>
<tt>等宽的西文字体(打字机字体)</tt>
<small>缩小字体</small>
<s>字体正中间一横线,表删除</s>
<del> 字体正中间一横线 </del> <ins>加入的新的内容</ins>
<mark>文本高亮HTML5中新增加的</mark>

a<sup>2</sup>+2ab+b<sup>2</sup>


<em>E mphasize强调 </em>

<strong>S trong着重 </ strong >

<dfn>Definition定义</dfn>

<code>Code代码</code>

<samp>Sample例子代码</samp>

<kbd>Keyboard</kbd>

<var>variable变量</var>

<cite>引用</cite>

<blockquote>大块的引用</blockquote>

<address>
海淀区<br />
北京<br />
中国<br/>
</address>



<q>内容不多的引用</q>

<pre>
int main() {
     printf("hello world\n");
     return 0;
</pre>
HTML学习笔记_第2张图片

<bdo dir="rtl">我是中国人<bdi>北京住。</bdi></bdo>
rtl right to left 字体顺序

2<3
2小于3
2&lt3;    字符实体
less than

3>2
3&gt2;    字符实体
great than

&nbsp;  none breakable space 不可打断的空格



属性:
<hr width="50%" align="left" size=1>
<abbr title="中华人民共和国">PRC</abbr>
[html]  view plain copy
  1. <!DOCTYPE HTML>  
  2. <html>  
  3. <body>  
  4. The <abbr title="People's Republic of China">PRC</abbr> was founded in 1949.  
  5.   
  6. 鼠标光标放到PRC上就有会看到效果啦。  
  7. </body>  
  8. </html>  


列表:ul ol dl dt dd:

[html]  view plain copy
  1. <!DOCTYPE html>   <!-- HTML5-->  
  2. <html>  
  3.   <head>  
  4.     <title>我的第一个页面</title>  
  5.     <meta charset='utf-8'>      <!-- 文本编码格式-->    
  6.     <meta name='description' content=''>  
  7.     <meta name='keywords' content=''>  
  8.     <meta name='author' content=''>  
  9.     <meta name='robots' content='all'>  
  10.   </head>  
  11.   <body>  
  12.     <ul>  
  13.       <li>无序咖啡</li>  
  14.       <li>无序牛奶</li>   
  15.     </ul>  
  16.       
  17.   <hr>  
  18.     
  19.     <ol>  
  20.       <li>有序咖啡</li>  
  21.       <li>有序牛奶</li>  
  22.     </ol>  
  23.       
  24.   <hr>  
  25.     
  26.   <dl>  
  27.     <dt>Coffee</dt>  
  28.     <dd>- black hot drink</dd>  
  29.     <dt>Milk</dt>  
  30.     <dd>- white cold drink</dd>  
  31.   </dl>  
  32.     
  33.   </body>  
  34. </html>  
效果:
HTML学习笔记_第3张图片



HTML img图片 tag  iframe tag:

[html]  view plain copy
  1. <!DOCTYPE HTML>  
  2. <html>  
  3. <body>  
  4. <img src="w3schools.jpg" alt="w3schools" width="104" height="142">  
  5. <iframe src="http://news.163.com"></iframe>  
  6. </body>  
  7. </html>  
alt 属性:当浏览器未加载完图片时会显示出文字描述信息。


a 标记  href属性  id属性 target属性:

[html]  view plain copy
  1. <!DOCTYPE HTML>  
  2. <html>  
  3. <body>  
  4.     <p id="here">这是段落标记</p>  
  5.     <hr>  
  6.     <a href="http://www.w3schools.com" target="_blank">Visit W3Schools.com!</a>  
  7.     <hr>  
  8.     <a href="#here">id 属性:目的地,目标锚</a>  
  9. </body>  
  10. </html>  



HTML table tag表格:

[html]  view plain copy
  1. <!DOCTYPE HTML>  
  2. <html>  
  3. <body>  
  4.     <table border="1">  
  5.         <caption>表格的头部</caption>  
  6.         <tr>  <!--table row-->  
  7.             <th>OS</th>  <!--table head-->  
  8.             <th>Chinese</th>  
  9.             <th>French</th>  
  10.         </tr>  
  11.   
  12.         <tr>  
  13.             <td>iOS5</td>  
  14.             <td>yes</td>  
  15.             <td>yes</td>  
  16.         </tr>  
  17.   
  18.         <tr>  
  19.             <td colspan="3">Windows</td> <!--column span列延展跨度-->  
  20.         </tr>  
  21.     </table>  
  22. </body>  
  23. </html>  

HTML学习笔记_第4张图片



网页结构和呈现的彻底分离,也即HTML和XHTML来组织内容,用CSS来做样式和呈现。


Web原理: 浏览器,Web服务器。浏览器请求资源,服务器做出响应。


用包围文本的成对标记告诉浏览器网页的结构。


HTML和CSS是用来创建网页的语言


Web服务器存储并提供由HTML和CSS创建的网页。浏览器接收网页并基于HTML和CSS显示其中的内容。


HTML(HyperText Markup Language)是超文本标记语言的缩写,用来结构化网页。


CSS是(Cascading Style Sheet)级联样式表的缩写,用来控制HTML的外观。


使用HTML来标记(tag)内容,用标记提供结构。我们称匹配标记和它们之间的内容为元素


一个元素由以下三部分组成:一个开始标记、内容和一个结束标记。有些元素是例外(如<img>)

    元素=开始标记 + 内容 + 结束标记
    有些元素是例外的,如<img>无结束标记


开始标记可以拥有属性。如,type 和align等等。


网页通常应该有一个<html>元素,并伴随有一个<head>元素和一个<body>元素。


网页的信息来源于<head>元素。


写进<body>元素的内容,就是浏览器中所能看见的东西。


浏览器忽略大多数的空白(制表符、回车、空格),但是可以用它们让你的HTML更具有可读性。


通过在<style>元素中输入CSS规则,给HTML网页添加CSS。<style>元素通常嵌在<head>元素中。

        

[css]  view plain copy
  1. <head>  
  2.   <title>Starbuzz Coffee</title>  
  3.   <style type="text/css">  
  4.     body {  
  5.       background-color#d2b48c;  
  6.       margin-left20%;  
  7.       margin-right20%;  
  8.       border1px dotted gray;  
  9.       padding10px 10px 10px 10px;  
  10.       font-familysans-serif;  
  11.     }  
  12.   </style>  
  13. </head>  

在HTML中用CSS指定每个元素的样式特性。

-------------------------------------------------------------------------------------------------------------------------------------------------

超文本标记 <a></a>

当你需要从一个网页链接到另一个网页时,使用<a>元素。

推荐这种方式:不要漏掉双引号哦: 

[html]  view plain copy
  1. <a href="top10.html">Great Movies </a>  

属性用来指定元素的附加信息。

<a>元素的 href 属性说明了链接的目的地。也即,href 属性告诉浏览器链接的目的地。

[html]  view plain copy
  1. <a href="about/myself.html">关于我</a>  


<a>元素中的内容是链接的标签。标签显示在网页上。默认情况下,它会加下划线来说明可以单击的。

链接的标签可以是文字或图像。

当你点击标签时,浏览器装载 href 中指定的网页。

可以链接相同文件夹下的文件,也可以是不同文件夹下的的。

相对路径的理解:

[html]  view plain copy
  1. <a href="../lounge.html"> Back to the Lounge </a>  


使用".."来链接父目录中的文件。

“..”代表父目录。

用“/”符号分隔路径的各个部分。

当图片路径有误时,你会在网页上看到损坏的图像。

网站中的文件名或者文件夹名中不能出现空格。

最好在构建的早期组织好你的网站,这样当你的网站升级时,就不用更改一堆路径了。

---------------------------------------------------------------------------------------------------

<q>元素,精练简短的引用。<q>元素是内联(inline)元素。内联元素总是在网页中随着文字流出现在“行内”。<q>,<a><em>都是内联元素。

<blockquote>元素,大块的引用。<blockquote>是块(block)元素。块元素前后都有换行符。<h1><h2>....<h6>,<blockquote>都是块元素。

顺口溜:块元素特立独行;内联元素随波逐流。

<br>为换行。

没有HTML内容的元素称之为空元素,如<br>, <img>

HTML列表:

有序列表:

无序列表:

自定义列表:<dl>  <dt> <dd>

字符实体:&lt;

   the <html> element rocks.

   the &lt;html&gt; element rocks.

在输入内容之前先计划好网页的结构。先画草图,再绘制略图,最后写HTML。

用大的块元素来创建你的网页,然后用内联元素修饰。

记住,无论什么时候,使用元素来告诉浏览器你的内容的含义。

通常使用最能匹配内容含义的元素。例如,当你需要列表时绝对不用段落表示。

<p>, <blockquote>, <ol>, <ul>, <li>都是块元素。它们独立显示,文本前后有空行。

<q>, <em>, <a>是内联元素。内联元素的内容和其他内容一起跟随文字流中。

当你需要一个换行时,请使用<br>空元素。

<br>是个“空元素”。

空元素没有内容。

一个空元素仅由一个标记组成。(也即,没有结束标记)

嵌套元素的的正确匹配。

结合使用两个元素创建HTML列表:使用<ol> 和 <li> 创建有序列表;且 <ul> 和 <li> 创建无序列表。

当浏览器显示一个有序列表时,它会给列表标上序号,无需你再费力了。

可以在<li>中嵌入 <ol>或者 <ul>来建立嵌套列表。

在HTML中使用实体来显示特殊字符。


你可能感兴趣的:(html,html5,w3schools)