前端学习笔记--HTML

本笔记来自同学笔记：https://li-xinyang.gitbooks.io/frontend-notebook/content/chapter1/03_01_html_intro.html

一  html简史：

二 语法 

每个HTML文档应包含一下基本成分：

使用HTML5声明文档DOCTYPE可以确保浏览器以可靠的模式呈现页面，同时告诉HTML验证器根据HTML5允许的元素和语法检查代码。HTML5的doctype不区分大小写。搜索引擎可能会根据lang属性指定的语言区分搜索结果，从而显示与搜索词语言相同的页面。屏幕阅读器也可能通过指定的语言调整其发音。嵌套在head元素里的代码不一定要缩进，但缩进可以方便看出head从哪里开始，包含什么内容，在哪里结束，有些页面的head会很长。

 title元素可以创建页面标题，页面标题一般出现在窗口的标题栏和浏览器的标签页中。也会在访问者的浏览历史列表和书签里，好的页面标题可以提升搜索引擎结果排名，并让访问者获得更好的体验。建议将title的核心内容放在前60各字符（含空格）中，因为搜索引擎通常将超过此数目的字符截断。

 语法

     开始标签、闭合标签、自闭合标签、一个或多个属性值、标签嵌套（闭合时按嵌套顺序）

如

	  
		
			

				
通行证登录
				  
				
				
				登录
			
		
	
	

  

书写规范：

• 小写标签和属性

• 属性值双引号

• 代码因嵌套缩进

全局属性

• id, 

  ，页面中唯一

• class，Click Me，页面中可重复出现

• style，尽量避免

• title，对于元素的描述类似于 Tooltip 的效果。

三 标签

上图：

文档章节标签

  页面内容

文档头部

导航

侧边栏

定义外部内容（如外部引用的文章）

一个独立的块

尾部    html5提供了更多语义化的标签来标识页面的结构。语义化：语义化（Semantic Tag）是指用合适的标签标识适当的内容，它可以起到搜索引擎优化（Search Engine Optimization），提高可访问性（例如盲人使用的屏幕阅读器），与此同时还可以提高代码的可读性。简而言之也就是在正确的地方使用正确的标签。

标题标签 

h1~h6  之间的区别是重要性的区别。

写法：

一级标题内容

文本标签

        

Sample

Sample

Sample

Sample


pay
pay page

  Contact Us

  强调 em strong 

  斜体。着重于强调内容，会改变语义的强调  粗体。着重于强调内容的重要性

          

组合内容标签

• 1. •  

     引用

     •  引用作品的名字、作者的名字等

     •  引用一小段文字（大段文字引用用

       ）

     •  引用大块文字

     •  保存格式化的内容（其空格、换行等格式不会丢失）
       

     代码

      引用代码  

     格式化

      加粗  斜体

     换行

     
 换行

     列表

     无序列表

     标题
     结论

     有序列表

     第一
     第二

     自定义列表

     作者
     爱因斯坦
     作品
     《相对论》
     《时间与空间》

     一个

     可以对应多个

     NOTE: 

      为自定义列表，其中包含一个或多个 

      及 一个或多个 

     ，并且dt 与 dl列表会有缩进的效果。

      会保留换行和空格，通常与  一同使用。
     
     
         int main(void) {
           printf('Hello, world!');
           return 0;
         }  
     
      拥有 cite 属性，它包含引用文本的出处，示例如下所示：
     
     Sample Quote...

     嵌入

      
     页面操作可以不影响到iframe的内容
     
     
     
        
     
     
     
     
       
       
       
       
     

     资源标签

     图标签

     canvas 基于像素，性能要求比较高，可用于实时数据展示。svg 为矢量图形图像。

     热点区域标签

     img中套用map以及area可以实现点击某部分图片触发一个链接，点击另一部分触发另一个链接

     表格

     表格代码示例

     
        
        
             
              
            
        
         
            
               
            
        
     table title and/or explanatory text
     header
     data
     

     使用 colspan=val 进行跨列，使用 rowspan=val 进行跨行。

     表单

     
       
     
            
     title or explanatory caption
            
            
            
            Sample Label
            
       
       
     
            
     title or explanatory caption
            
            
            
            
       
       Submit
       Reset
     

     使用fieldset可用于对表单进行分区

     语义化

     语义化（Semantic Tag）是指用合适的标签标识适当的内容，它可以起到搜索引擎优化（Search Engine Optimization），提高可访问性（例如盲人使用的屏幕阅读器），与此同时还可以提高代码的可读性。简而言之也就是在正确的地方使用正确的标签

      

     实体字符

     实体字符（ASCII Encoding Reference）是用来在代码中以实体代替与HTML语法相同的字符，避免浏览解析错误。它的两种表示方式，第一种为 & 外加实体字符名称，例如  ，第二种为 & 加实体字符序号，例如  

     常用HTML字符实体（建议使用实体）：

     字符	名称	实体名	实体数
     "	双引号	"	"
     &	&符	&	&
     <	左尖括号（小于号）	<	<
     >	右尖括号（大于号）	>	>
     	空格

     
     

     NOTE：具体所需可在使用时查询，无需记忆。

     
     

转载于:https://my.oschina.net/wigan/blog/518953