HTML5快速入门一

2017年1月27日
1.元素 = 开始标记 + 内容 + 结束标记

Starbuzz Coffee Beverages

2.属性：能提供元素的一些额外信息（属性的正确写法 别忘了都用双引号）

elixirs

2017年1月28日
一HTML和CSS
1.HTML负责创建网页结构（超文本标记语言）【HyperText Markup Language】
CSS负责控制网页表现 （层叠样式表）【cascading style sheets】
2.内联模式使用css （

Starbuzz Coffee's Mission

To provide all the caffeine that you need to power your life.

Just drink it.

3.属性href用法 相对链接建立内部链接，绝对链接建立外部链接
a.相对路径

elixirs

b.绝对路径（一般是网站外部的链接才用，URL） <跳转到锚点地方>

Caffeine Buzz

其中目标链接页面(buzz/index.html)有如下id设置

Coffee

c.补充：如果是同一个文件页面内跳转

Back to top

d.每次链接到一个新窗口展示.（如果同一类的跳转到同一个窗口，target取个特定名字就可以,如coffee）

Caffeine Buzz

二.代码组织（一般不要把所有的页面都放在根目录下，即使很少的页面，也不利于后期维护）

1. 按推荐方式进行代码组织
   第一步：按推荐方式最近文件目录

   
   
   

   Paste_Image.png
   
   

   第二步,根据目录如下结构,修改代码里面页面跳转和图片相关链接

   
   
   

   Paste_Image.png
   
   1.”lounge.html”链接到”elixir.html” (首先进入beverages文件夹)

elixirs

2.”directions.html”链接到”lounge.html” （先用..返回上级， 进入同级页面后，可以直接访问）
<..返回到上一层的父文件夹>

Back to the Lounge

3.修改图片链接（进入images目录先）

4.”elixir.html”获取图片链接

三.引用元素
1. 短引用（便不是所有浏览器都支持）[一般用在段落里]

A journey of a thousand miles begins with one Segway.

Paste_Image.png

2.长引用

[一般用在自成一段]

    Passing cars,
    
 When you can't see,
    
 May get you,
    
 A glimpse,
    
 Of eternity.
    

Paste_Image.png

四.块元素和内联元素（ 块元素特立独行；内联元素随波逐流）
1.块元素显示时就好像前后各有一个换行。

1. 
   2.内联元素，行内显示
   

   五.空元素（void元素）[除了空元素，其他都是正常元素]
   1.没有内容，也没有结束标记
   


   六.创建HTML列表
   1.有序列表

   1. 【一定要一起使用】

          
      
              
      Walla Walla, WA
              
      Magic City, ID
              
      Bountiful, UT
              
      Last Chance, CO
              
      Truth or Consequences, NM
              
      Why, AZ
          
      

      

      Paste_Image.png
      
      

      2.无序列表

      • 【一定要一起使用】

            
        
                
        cellphone
                
        iPod
                
        digital camera
                
        and a protein bar
            
        

        

        Paste_Image.png
        
        

        七.输出特殊字符<> 和 &

        The  elment rocks. the &
        

        

        Paste_Image.png
        
        http://www.w3school.com.cn/tags/html_ref_ascii.asp (< 也可以用 <实体表示)
        

        Paste_Image.png

        2017年1月29日
        一.将写好的网站发布到web上
        第1步.找一家托管公司。（保证服务器一天24小时运行）
        选择标准
        

        
        a.技术支持
        b.数据传输（网站如果有大量访问，需要考虑）
        c.备份（服务器出现故障后，能否及时恢复）
        d.域名（很多托管公司，都有附带域名注册服务）
        e.可靠性（一般保证99%以上时间都能正常运行）
        

        第2步. 为网站注册一个网站名
        eg:www.starbuzzcoffee.com
        注意 starbuzzcoffee.com才是域名。（一个域名可以创建多个网站）
        第3步.测试正常后，把你的代码上传到托管公司的服务器上后，就可以通过网站名访问了。
        一般都会有工具用于上传。

        4.补充：一般可以用如下URL(Uniform Resource Locator)【统一资源定位符】访问
        http://www.starbuzzcoffee.com

        上面的链接服务器自动加上/（建议都自己主动加个/）,之后在加上默认文件，
        http://www.starbuzzcoffee.com/index.html

        URL由一个协议，一个网站名和资源文件绝对地祖册。

        二.图片
        1.浏览器获取图片顺序
        

        

        Paste_Image.png
        
        2.3种图片一般使用场景 JPEG,PNG,GIF
        JPEG:有损，一般处理复杂图片，如照片
        PNG:无损，有多种颜色透明背景，logo
        GIF:无损，可以有动画效果，一种颜色透明背景 ,logo

        3.元素
        标准写法
        

        4.图像大小属性（由于元素是内联模式，所以图片没显示前，可能会影响后面的布局，所以可以提早告诉浏览器长宽属性）

        ![Pencil line 35 miles long](http://upload-images.jianshu.io/upload_images/3003454-19fc1fa4e89ee3a1.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
        

        （不建议直接用width和height属性来调整页面图片大小,因为还是获取整个原文件后，再缩放。）

        2017年1月30日
        一.写标准的HTML（HTML5）
        1.html5
        html5其实就是最新版的html，当前HTML标准
        html不会在有6,7,8指定标准，它其实是个“活的标准”，会采用向后兼容的方式，既支持老的方式，也支持新的方式。
        html5:不在单单用来构建web页面，还可以构建web应用，如社交媒体应用，游戏应用等。

        2.书写标准的html代码
        2.1声明使用html5标准，第一行输入

        2.2用元素增加指定字符编码，一般都是utf-8（保存html文件时也选择utf-8模式）

        3.W3C检验工具
        

        

        Paste_Image.png

        如果您发现本文对你有所帮助，如果您认为其他人也可能受益，请把它分享出去。