003 HTML+CSS(Class011 - 023)

[A] 标题与段落

　　h标签：标题标签

　　　　<h1>标题名</h1>　　最为重要，在一个.html文件中智能出现一次h1标签。

　　　　<h2>标题名</h2>　　可以出现多个

　　　　。。。

　　　　<h6>标题名</h6>

　　p标签：段落标签

　　　　<p>段落内容</p>　　标签内的内容为一个段落。

[B] 文本修饰标签

　　<strong>文本内容</strong>：　　强调标签，会对文本进行加粗

　　　　　　此外，<b></b>标签也会对文本进行加粗

　　<em>文本内容</em>:　　　　　 强调标签，对文本进行斜体

　　<sub>文本内容</sub>：　　　　上标标签

　　<sup>文本内容</sup>：　　　　下标标签

　　<del></del>,<ins></ins>:　　　　删除文本，插入文本，通常配合使用，效果——>原价：399，现价：199.

[C] 图片标签与图片属性

　　<img>：图片标签，为单标签

　　图片属性：
　　　　src：引入图片地址

　　　　alt：当图片引用出现问题时的提示信息

　　　　title：表示提示信息

　　　　style：css属性信息

[D] 引入文件的路径地址

　　绝对路径：E:\Carrey\web/practice.html

　　相对路径：.在路径中表示当前路径，如 src = "./temp/dog.jpg"

　　　　　　    ..在路径中表示上一级路径，如 src = "../temp/dog.jpg"

　　【注】在window下，书写地址时可使用 / 或者 \ ，没有区别；但在书写网络地址时，只能识别 / 。

 

[E] 跳转连接

　　<a></a>：链接标签

　　属性：

　　　　href：跳转后的链接地址

　　　　terget：打开链接的方式，默认为在当前页面显示(即覆盖之前的页面) _self，也可设置在新页面打开 _blank

　　<base target = "_blank">：改变链接的默认行为，即统一设置连接属性，写在head中

　　

　　跳转锚点：在页面内实现跳转到指定位置

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// 实现方式1：引用地址： # + 页面内的链接id
<body>
    <a href="#001">Html1</a>
    <a href="#002">Html2</a>
    <a href="#003">Html3</a>
 
    <h1 id = "001">Html1</h1>
    <p>文本段落</p>
    <p>文本段落</p>
    <p>文本段落</p>
    <h1 id = "002">Html2</h1>
    <p>文本段落</p>
    <p>文本段落</p>
    <p>文本段落</p>
    <h1 id = "003">Html3</h1>
    <p>文本段落</p>
    <p>文本段落</p>
    <p>文本段落</p>
</body>

 

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// 实现方式：# + name属性，此时需要单独添加<a>标签，然后给<a>标签添加name属性
<body>
    <a href="#Html1">Html表单</a>
    <a href="#Html2">Html样表</a>
    <a href="#Html3">Html段落</a>
 
    <a name = "Html1"></a>
    <h1>Html1</h1>
    <p>文本段落</p>
    <p>文本段落</p>
    <p>文本段落</p>
    <a name = "Html2"></a>
    <h1>Html2</h1>
    <p>文本段落</p>
    <p>文本段落</p>
    <p>文本段落</p>
    <a name = "Html3"></a>
    <h1>Html3</h1>
    <p>文本段落</p>
    <p>文本段落</p>
    <p>文本段落</p>
</body>

　　

[F] 特殊符号

　　编写文本时，经常遇到一些你特殊字符，到那时网页并不会解析这些字符，HTML中为这些字符准备了专门的代码。

 

 

 

 [G] 列表

　　1. 无序列表

　　　　<ul>,<li>:　　分别为列表的最外层容器和列表项标签，均为双标签

　　　　　　【注】ul和li必须组合出现，而且他们之间不能有其他标签

　　　　属性：<ul type = "value">

　　　　　　　disc: 默认值，为实心圆

　　　　　　　circle: 空心圆

　　　　　　　square：实心方块

　　2. 有序列表

　　　　<ol><li>:　　分别为列表的最外层容器和列表项标签，均为双标签

　　　　　　【注】ul和li必须组合出现，而且他们之间不能有其他标签。实际应用中，有序列表用的很少，更多的还是应用有序列表

　　　　属性：<ol type = "value">

　　　　　　   1: 默认值，数字编号

　　　　　　　a: 小写字母编号

　　　　　　　A: 大写字母编号

　　　　　　　 i:  小写罗马字母编号

　　　　　　　Ⅰ：大写罗马字母编号

　　3. 定义列表

　　　　<dl>: 定义列表

　　　　<dt>: 当以专用术语或名词

　　　　<dd>: 对名词进行解释或描述

?
1
2
3
4
5
6
7
8
9
10
//例： <br>　　<dl>
     <dt>HTML</dt>
     <dd>超文本标记语言</dd>
 
     <dt>CSS</dt>
     <dd>层叠样式表</dd>
 
     <dt>JavaScript</dt>
     <dd>网页脚本语言</dd>
 </dl>

　　结果：

　　

　　4.嵌套列表

 

 

　　　　列表之间可以相互嵌套形成多层级列表。自行练习

[H] 表格标签

　　<table>: 表格的最外层容器

　　<tr>:　　定义表格的行

　　<th>:　　定义表头，即将该表格内的文字加粗显示，相当于<td><b>表格内容</b></td>

　　<td>:　　定义表格单元

　　<caption>: 定义表格标题

　　【示例】个人简历制作

　　　

 

?
1
2
3
4
5
6
7
8
<style>
    tr{
        height: 50px;
    }
    td{
        text-align: center;
    }
</style>

 

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<table border="1px" cellspacing = "0" align="center"> <!--该表格共七行七列-->
    <colgroup span="6" width = "100px"></colgroup>　　<!--前6列宽度为100像素-->
    <colgroup span="1" width = "150px"></colgroup>　　<!---第七列宽度为150像素->
    <tr>    <!--第1行-->
        <td colspan="7"><b>个人简历</b></td>
    </tr>
    <tr>    <!--第2行-->
        <td>姓名</td><td></td><td>性别</td><td></td><td>年龄</td><td></td><td rowspan="4">照片</td>
    </tr>
    <tr>    <!--第3行-->
        <td>学历</td><td></td><td>籍贯</td><td colspan="3"></td>
    </tr>
    <tr>    <!--第4行-->
        <td>电话</td><td></td><td>政治面貌</td><td colspan="3"></td>
    </tr>
    <tr>    <!--第5行-->
        <td>毕业院校</td><td colspan="5"></td>
    </tr>
    <tr>    <!--第6行-->
        <td>求职意向</td><td colspan="6"></td>
    </tr>
    <tr style="height: 400px;">    <!--第7行-->
        <td>自我评价</td><td colspan="7"></td>
    </tr>
</table>

　　

 　　a. 表格制作格式

   　　<table> <!--制作表格--> 
        　　<tr>    <!--第1行--> 
           　　 <td>第1格<b></b>第2格</td>...
       　　 </tr>
       　　 <tr>    <!--第2行--> 
            　　<td>第1格<b></b>第2格</td>...
        　　</tr>
        　　.
       　　 .
       　　 .
   　　 </table>
　　b. 给表格加边框
　　　<table border = "1px" cellspacing = "0" aglin = "center">　　//表格边框宽度1个像素，表格之间的间距为0， 表格再页面中居中显示
　　c. 设置行高列宽
　　　<tr height = "50px" aglin = "center"> 　　//行高50像素，表格内容居中显示
　　　<td width = "100px" aglin = "center"> 　　// 列宽100像素，表格内容居中显示
　　【注】表格列宽可实现批量设置
　　　　　在表格开头
　　　　　　　　<col width = "50px">　　// 第1列
　　　　　　　　<col width = "50px">　　// 第2列
　　　　　　　　<col width = "50px">　　// 第3列
　　　　　　　　.
　　　　　　　　.
　　　　　　　　.
　　　　　　　　或者
　　　　　　　　<colgroup span = "4" width = "50px">　　// 前4列
　　　　　　　　<colgroup span = "1" width = "50px">　　// 第5列
　　

　　d. 单元格合并(假定某表格为6*7表格)

　　　　<td rowspan = "2">表格内容</td>　　// 该表格占用两行

　　　　<td colspan = "4">表格内容</td>　　// 该表格占用四列

　　【注】在表格制作过程中，每行需要几个表格则就需要书写几组<td></td>标签对

[I] 表格属性

　　boerder: 表格边框

　　cellpadding: 单元格内的空间

　　cellspacing：单元格之间的空间

　　rowspan: 合并行

　　colspan: 合并列

　　align：左右对齐方式

　　vaglin: 上下对齐方式

 

 

 

 

 

 

 

 

 

 

　　　　

 

 

 

 

 

 

 

 

 

 

 

　　

 

 

 

　　

posted @   CarreyB  阅读(180)  评论(0)  编辑  收藏  举报
点击右上角即可分享
微信分享提示