HTML实训课程笔记_01

来源：互联网发布：压力对大学生好处数据编辑：程序博客网时间：2024/05/20 07:58

1.第一天：

1.
HTML:超文本标记语言.
       超文本：在你的文本中添加了非文字的信息(比如，图片，视频等)
    1.头部分：提供网页信息
    2.主体部分：提供网页中内容

案例：

<!DOCTYPE HTML><!-- 文件的约束 --dtd约束  规定你的html必须是根标签 --><html> <!--根标签-->   <head>  <!--头部分-->       <title>第一个html文件</title>   </head>      <body bgcolor="red"> <!--主体部分-->       hello ！<br/><!--换行-->xxx  ！！   ！   </body>   </html>

2.
dtd约束
     html5 <!DOCTYPE HTML>

3.
HTML元素结构
    1.标签：<>和标签名组成    <html>
    2.元素： <html>开始到</html>组成部分
    3.属性： <标签名属性名="属性值" 属性名="属性值"></标签名> <br/>
    以上是概念
    元素结构的分类：
        1.HTML元素
        2.head元素
       3.body元素

4.
常用的标签
   1.html标签根标签
   2.head标签头标签
           title标签：网页的标题
          meta标签:提供网页的原数据比如(网页的作者，关键字，文件类型等)
   3.body标签主体标签
            <br/>标签：换行的作用

案例：

<!DOCTYPE HTML><html><head><!--提供的是网页信息--><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><!-- 这个网页的文件类型(ContentType='text/html; charset=gb2312') --><meta name="description" content="这个网站是一个学习及娱乐为一体的网站"/>  <!-- description='这个网站是一个学习及娱乐为一体的网站' --><meta http-equiv="author" content="redarmychen"/><!--这个网页的作者就是redarmychen  author='redarmychen' --><meta http-equiv="refresh" content="2;URL=http://www.baidu.com"--><!--这个网页会停留2秒，自动刷新到百度页面上--><link rel="icon" href="favicon.ico" type="image/x-icon"> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"><title>无标题文档</title><!--网页的标题--></head><body bgcolor="#00FFCC"><!--提供的网页内容信息-->    <!--Tab键--></body></html>

4.pre标签

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>赞军哥</title></head><body>    <pre>     赞军哥 山外青山楼外楼，乐知学院军哥牛！ 要问军哥哪里牛，青楼青楼还青楼！</pre> <h3>赞军哥</h3>  <hr noshade="noshade" width="20%" align="left"/> <p> 山外青山楼外楼，乐知学院<b>军哥</b><i>牛</i>！<br/>    要问军哥<font color="#FF0000" size="+3">哪里牛</font>，<u>青楼青楼还青楼</u>！ </p></body></html>

5.link标签

<!doctype html><html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>标题的图标</title><!--引入了外部的样式文件，对我的网页进行样式处理--><link rel="stylesheet" type="text/css"  href="style.css" /><!--标题图标的显示操作 icn图片它是特殊的图片16*16像素--><link href="favicon.ico" rel="SHORTCUT ICON"/></head><body></body></html>

6.table标签

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>表格标签的使用</title></head><body>          <h3>Table标签的使用</h3>  <hr noshade="noshade">  <!--  table表格标签  border表格的边框    cellspacing 表格外间距(td与td之间 td与table边框之间的距离) （规定单元格之间的空白）  cellpadding 表格内间距(文本与表格之间间隙)（规定单元边沿与其内容之间的空白。）  一般这个两个都是结合使用 默认都把它设置成0的值  --->  <table border="1px" cellspacing="0" cellpadding="0">      <tr>      <th>姓名</th>  <th>性别</th>  <th>年龄</th>  </tr>      <tr>     <td>毛泽东</td> <td>男</td> <td>83</td>  </tr>  <tr>     <td>刘少奇</td> <td>男</td> <td>67</td>  </tr>   </table></body></html>

7.table标签（合并行与列的案例）

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>Table合并行与列的案例</title></head><body>      <table border="1px" cellpadding="0" cellspacing="0" width="800" height="200" align="center">      <tr>      <td>1</td>      <td rowspan="2">陈红军</td><!--rowspan跨行它跨几行，对应的行的列，就不能再写了。why?因为被它占用-->      <td>陈红军：曾用名：二孩，Java高级讲师。精通java</td>  </tr>    <tr>      <td>2</td>  <!--<td>陈红军</td> 被第一行的第二列给占用了-->  <td>陈红军：曾用名：红孩儿,android高级讲师，精通android</td>  </tr>      </table>        <hr noshade="noshade">          <table border="1px" cellpadding="0" cellspacing="0" width="800" height="200" align="center">       <tr>       <th colspan="3">公共课</th><!--colspan 跨列 那么被跨的列 就不能再写-->   <th>专业课程</th>   </tr>      <tr>       <td>体育课</td>   <td>英语课</td>   <td>高数课程</td>   <td>C++课程</td>   </tr>      </table>  </body></html>

0 0