03 html_day1

Html笔记

一. 引言

1. 概念

1） 标记语言： 使用一些特殊的标记符号对所要展示的文本内容进行标记说明，不会向发出机器指令，不体现

具体的业务信息

2） 超文本标记语言（HTML）：对文本内容的显示样式，风格进行标记说明

3） 可扩展的标记语言（xml）：对文本内容的含义进行标记说明

2. html说明

1）使用html技术定义的文档，通常成为“网页” ， 文件名会以.html 或者 .htm为结尾

2）使用任意文本编辑器开发，使用浏览器解释执行（存在浏览器差异）

3. 基本语法

1）使用“标签”的形式来进行标记

     ~~~html

<标签名> ---- 开始标签
标签体 ---- 文本内容 or 其他标签
</标签名> ---- 结束标签

特例： <标签名/> — 空标签，没有标签体的标签
~~~

2）标签可以有属性

<标签名 属性名=“属性值”  属性名=‘属性值’ 属性名=值 >  ...... </标签名>

例如： <hr color="red" size="3"  width="90%"/>

3）标记语言文档只能有一个”根标签“（所有内容都必须定义在根标签里）

二. html技术里的根标签

1. 根标签

 ~~~html

---- html文件的根标签 ~~~

2. head标签

用来对网页的特性属性进行说明定义，通常head标签里的定义不会显示在浏览器中

 ~~~html

2） 用来为网页定义特征属性
.
.
.
~~~

3. body标签

用来定义可以显示在浏览器窗口的正文内容

1） text： 用来定义正文内容的颜色。 英文单词 或者 用6位16进制数（RGB）

2）bgcolor：背景色

三. body中常用标签

1. 基础标签

1） 注释标签： <!--  注释内容  -->
2） 标题标签： <h1>   .....  <h6>  值越大字越小， 自占一行， ”块级元素“
3） 标尺先：<hr color="颜色" size="粗细，数字" width=“100px，或者使用百分比”/>
4） 水平居中：<center> </center>
5） 设置字体：<font color="" size="单位像素"></font>
6） 特殊设置： <br/> 换行      &nbsp; 空格
7） 字体设置： <b> 加粗   <i> 斜体   <s>删除线   <u>下划线    <sub>下标    <sup>上标
8） 段落标签：<p>    <pre>预览
9） 跑马灯： <marquee scrolldelay="速度" direction=“方向 left right”></marquee>

2. 列表标签

1）无序列表： <ul type=“circle，square”>   <li>每一项  【重点】
2）有序列表： <ol type="A,a,I,i">     <li>    【重点】
3）定义列表： 做概念定义的标签 <dl>    <dt>概念     <dd>解释文字

3. 图片标签

 <img src="图片的路径" width="100px" height="" align="top,middle,bottom,left"/>  【重点】
 align属性控制图片与后面文字的对齐方式

4. 超链接标签

1）普通的超链接【重点】
   <a href="目标资源的路径" target=“控制资源打开的窗口,_self(自己）, _blank(新窗口）”>提示</a>
2）设置锚点( 需要配合第一种方式使用 )
   <a name="锚点名"></a>   
   用来在一张网页的上下文之间切换

5. 表格标签 【重点】

<table border="数字" bordercolor=“颜色” cellspacing=“0” width=“” align=“left,right,center”>
    <tr bgcolor="" align="left,center,right"> 
        <td> 第一行第一列</td>  <td> 第一行第二列 </td>
    </tr>
    <tr valign="top,middle,bottom">
        <td> 第二行第一列</td> <td> 第二行第二列 </td>
    </tr>
</table>
注意： <td>可以写文本内容，可以放图片，也可以存放任意网页元素。数据必须放在<td>
      <td>可以嵌入另外一个表格，通常用来做网页的布局管理
          
<td>两个比较特殊的属性： 合并单元格。  colspan=“横跨n列”   rowspan=“纵向占n行”