初学web前端-20170425

1.文本标记

  1.特殊字符

       1.  空格
2.&lt; <
3.&gt; >
4.&copy;  ©
5.&yen; ￥

  2.标题元素

      语法：<hn></hn> n:1-6
         <h1>内容</h1> 一级标题
 <h2>内容</h2> 二级标题
   ...
<h6>内容</h6> 六级标题
特点：
         1.改变字体大小
2.加粗
3.上下文之间有垂直空白间距

  3.段落元素

       语法：<p>内容</p>
特点：上下文之间有垂直空白间距

   4.换行

 语法：<br>或<br/>

   5.水平线

 语法：<hr>或<hr/>

   6.文本样式

        <b></b> 加粗
<u></u> 下划线
<i></i> 斜体

   7.分区元素

 1.块分区元素：<div></div>
 作用：布局
  2.行分区元素:<span></span>
 作用：包裹文本，对一行中的某些文本进行样式的自定义
补充：
1.块级元素：默认情况下，块级元素会独自成行，   即元素前后都会自动换行
  ex:<p></p>,<div></div>,<hn></hn>
2.行内元素：多个元素在一行中显示
 ex:<u></u>,<b></b>,<i></i>,<span></span>

2.图像和链接

     1.url

     url:uniform resource locator统一资源定位器，俗称路径。

1.绝对路径

         完整的路径，给你这个路径你就可以找到你想要找的资源。

   1.网络资源：

  通信协议：http://
  域名（ip地址）：img10.360buyimg.com
        文件目录结构:images/img/
  文件名称：a.jpg

                    2.本机资源

 从最高盘符处开始查找
  D:\1704\其他\练习\img\flower.jpg

           2.相对路径

  相对于文件（.html）所在位置处开始查找资源的路径，主要依托于位置关系来查找

  1.同目录

 直接引用文件
flower1.jpg

2.子目录

 先进入文件夹，然后再引用
images/flower.jpg

3.父目录

 先返回上一级（返回父级目录），然后再引用
../flower2.jpg

                3.根相对路径

   从web站点的根目录处开始查找
  /jd.com/images/flower.jpg

       2.图像

        1.格式

          jpg:压缩比率大
  png:背景透明
 gif:动画

2.语法

 标记：<img>
  属性：
       src:图像所在的路径（url）
title:鼠标移入停留时显示的文字内容
alt:图片出错时显示的文字
width:宽度
height:高度


练习：将三张图片分别用同级目录，子级目录，父级目录的相对路径去添加图片到网页中。

3.链接 

  1.语法：<a>内容</a>

     属性：
     href:链接的路径（url）
     target:目标，打开新的页面的方式
取值：
 _self:自身的页面中打开
  _blank:新的标签页中打开
 title:鼠标放到链接上的提示内容

2.其他表现形式

       1.目标为下载资源
 href="*.zip/*.rar"
2.电子邮件
 href="mailto:[e-mail]"
3.返回页面顶部
 href="#"
4.链接到JS文件
 href="javascript:"


练习：用链接打开网站：http://www.tmooc.cn
     要求从新的标签页中打开

4.结构标记

  div布局存在一些问题：
       1.布局复杂时，会出现大量的div元素
2.元素相互嵌套，页面会难以处理和维护
解决以上问题，提出结构标记
常用的结构标记：header/nav/section/aside/footer/article

1.header元素

        语法：<header>内容</header>
作用：定义整个网页或者某个区域的“页眉”，定义页面的顶部信息。

2.nav元素

        语法：<nav>内容</nav>
作用：定义网页的导航内容

3.section元素

       语法：<section>内容</section>
作用：表示网页的主体内容

4.aside元素

       语法:<aside>内容</aside>
作用：定义网页的边栏（左右两边的侧边栏）

5.footer元素

        语法：<footer>内容</footer>
作用：表示网页偏底部的信息：比如网站的备案号，解释说明等

6.article元素

       语法：<article>内容</article>
作用：表示论坛中的帖子，报纸中的文章，微博条目，用户评论等。

5.列表

  1.列表的作用

 将具有相似特征或者具有先后顺序的内容按照从上到下（从左到右）的顺序排列。

   2.列表分类

 1.有序列表：<ol>

 列表项：<li>

  2.无序列表：<ul>

 列表项：<li>

  3.有序列表

 语法：
 <ol>
 <li>内容</li>
<li>内容</li>
<li>内容</li>
...
</ol>
属性：
 1.type:有序列表的类型
 取值：
         1:数字（默认值）
a:小写英文字母
A:大写英文字母
i:小写罗马数字
I:大写罗马数字
                   2.start 定义起始编号 
       取值：数字

4.无序列表

 语法：<ul>
       <li>内容</li>
...
     </ul>
属性：type
取值：
   disc:实心圆
circle:空心圆
square:实心方块
none:不显示标识

5.列表的嵌套

 列表项中去嵌套另一个列表
 语法：
 <ol>
 <li>内容
 <ul>
 <li>内容</li>
</ul>
</li>
</ol>