HTML标签和属性二

五.文本标记

7.文本样式

<b></b>  <strong></strong> 加粗

<i></i>   <em></em>        斜体

<s></s>  <del></del>        删除线

H5推荐使用有语义的标签

<u></u>  下划线

  上标

  下标

8.分区元素

①块级分区<div></div>

用于页面布局的

特点:独立成行

②行分区<span></span>

同一行文字使用不同样式的时候，使用span

特点：与其他span共用一行  10:07~10:22休息

9.元素的显示方式

①块级元素

在网页中独占一行的元素就是块级元素

默认是从上往下排列

ex:div  h1~h6  p  pre

②行内元素

在网页中能够在一行内显示的元素(后期加深学习)

同一行中，从左往右排列

ex:span b i em.......

③行内块

④table

⑤flex 弹性

 

六.图像和链接

1.图像语法

<img> 或者 <img/>

<img src="图片路径/url">

2.url

Uniform Resource Locator 统一资源定位符

俗称：路径

3.路径的表现形式

①绝对路径

完整的路径

1.使用任何网络资源的时候，使用绝对路径 

http://cdn.tmooc.cn/bsfile/imgad/2049A.png

通信协议://主机名/文件目录结构/文件名称

优点：不占用本地存储空间

缺点：不稳定

2.使用本机资源使用绝对路径，项目中不许使用

<img src="c:\08.png">

 

②相对路径

参照物，访问资源的HTML文件

1.兄弟关系，直接写文件名称

2.子集目录

先进入兄弟文件夹，再引入图片 ex src="img/09.png"

3.父级目录，使用../返回到父级目录 ex src="../../img/07.png"

 

4.img标签的属性

src：source源 设置图片资源路径

alt：图片资源出现错误时，显示的文本

width:设置图片的宽度

height:设置图片的高度

如果设置的宽高比，不符合图片本身的宽高比，图片会发生失真

解决方法，宽高只设置一个，另外一个自动适应

5.链接

①语法

<a href=""></a>

属性

1.href  

2.target 指定打开链接的方式

    取值  1._self  默认，在当前标签页打开新的网页

          2._blank  在新的标签页中打开

②a标签的其它表现形式

1.下载资源

<a href="*.zip"></a>

2.链接到电子邮件

<a href="mailto:chengliang@163.com">打开邮箱</a>

3.返回页面顶部

<a href="#">返回页面顶部</a>

4.使用a标签，执行js

<a href="javascript:show()">点点我</a>

6.锚点

①锚点是什么

锚点，就是在页面上做的一个记号

可以通过点击a标签，跳转到这个记号

②使用锚点

1.定义锚点

   a.h4的方案<a name="锚点名称"></a>

   b.<any  id="锚点名称">

2.使用a标签跳转到锚点

   <a href="#锚点名称"></a>

 

七.表格

1.表格语法

①标记

<table></table>  表格

<tr></tr>         行---table row

<td></td>        列---table data

table中，所有的数据写在td中

 

<table>

   <tr>

      <td></td>

      <td></td>

      <td></td>

   </tr>

   <tr>

      <td></td>

      <td></td>

      <td></td>

   </tr>

</table>

简写方式 table>tr*4>td*3>a{123}

②属性

table元素的属性

border="2px"    设置表格边框

width="150px"   设置表格宽度

height="200px"  设置表格高度

align="center"   设置表格本身的水平对齐方式 

      取值 left/center/right

bgcolor="pink"   设置背景颜色

bordercolor="red"设置边框颜色

cellpadding="50px" 设置单元格的内边距(内容到边框的距离)

cellspacing="20px" 设置单元格的外边距(边框到边框的距离)

 

①colspan    跨列2.不规则的表格

colspan

从指定单元格开始，横向向右合并N个单元格，n包含自己

被合并的单元格要删除掉

②rowspan   跨行

rowspan

从指定单元格开始，纵向向下合并N个单元格，n包含自己

被合并的单元格要删除

3.表格中的可选标记

①表格标题

<caption></caption>

要紧跟<table>标签

②行/列的标题

<th></th>

代替td，内容字体加粗，水平居中

4.表格的复杂应用

①行分组