HTML+CSS基础课程/1-4单学习记录

来源：互联网发布：mysql开启binlog日志编辑：程序博客网时间：2024/06/05 17:11

HTML+CSS基础课程

第1章 Html介绍
1.2 Html和css的关系
1.HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。
2.CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。
     所有这些用来改变内容外观的东西称之为表现。
3.JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。
     还有焦点新闻（新闻图片）的轮换。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的。
1.3 认识html标签
    <img src="1.jpg">
1.5 认识html文件基本结构
    <html>
    <head>...</head>
    <body>...</body>
    </html>
1.6 认识head标签
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">__定义编码标识
    <title>hello world</title>
    </head>
    --------显示网页名称标题
1.7 HTML的代码注释
    
--------------------------------------------------------------------------------------------------------
第2章认识标签(第一部分)
2.3 段落
     <p>段落文本</p>
2.4 标题
     <hx>标题文本</hx> (x为1-6)
2.5 加入强调语气
     <em>需要强调的文本</em> __斜体
     <strong>需要强调的文本</strong>__粗体
2.6 为文字设置单独样式
     <span>文本</span>
    例:
    <style>
    span{
    color:blue;
         }
    </style>----放在<head>中

<span>美国梦</span>----放在<body>中

2.7 短文本引用
     <q>引用文本</q> __浏览器会对q标签自动添加双引号" "
2.8 长文本引用
     <blockquote>引用文本</blockquote>___缩进样式
2.9 分行显示文本
     <br />
2.10 添加一些空格
      
2.11 添加水平横线
     <hr />
2.12 为网页加入地址信息
     <address>联系地址信息</address>
2.13 加代码
     <code>代码语言</code>
2.14 网页加入大段代码
     <pre>语言代码段</pre>
------------------------------------------------------------------------------------------------------
第3章认识标签(第二部分)
3.1 使用ul,添加新闻信息列表
    <ul>
    <li>.....</li>
    </ul>
    例:
     .
     .
     .

3.2 使用ol，添加图书销售排行榜
    <ol>
    <li>信息</li>
     ......
    </ol>
    例:
      1.
      2.
      3.
3.3 认识div在排版中的作用
    <div>…</div>

3.4 给div命名，使逻辑更加清晰
    -----分出独立的逻辑部分 class.style.id .name不会显示在页面
     <div id="版块名称">…</div>
3.5 table标签，认识网页上的表格
    创建表格的四个元素：table、tbody、tr、th、td
    <tbody>…</tbody>等表格内容全部下载完才会显示
    <tr>…</tr>：表格的一行
    <td>…</td>：表格的一个单元格
    <th>…</th>：表格的头部的一个单元格，表格表头
    例:
    <table>
    <tbody>
    <tr>
      <th>班级</th>
      <th>学生数</th>
      <th>平均成绩</th>
    </tr>
    </table>
    </tbody>
    运行结果：
    班级学生数平均成绩
    一班 30    89
3.6 用css样式，为表格加入边框
    <style type="text/css">
    table tr td,th{border:1px solid #000;}
    </style>
3.7 caption标签，为表格添加标题和摘要
     <caption>标题文本</caption>
     <table summary="表格简介文本">----摘要不会显示在页面
-------------------------------------------------------------------------------------------------
第4章认识标签(第三部分)
4.1 使用<a>标签，链接到另一个页面
    <a href="目标网址" title="鼠标滑过显示的文本">链接显示的文本</a>
4.2 在新建浏览器窗口中打开链接
    <a href="目标网址" target="_blank">链接显示的文本</a>
4.3 使用mailto在网页中链接Email地址
    <a href="mailto:yy@imooc.com?subject=主题名称&body=邮件内容">
4.4 认识<img>标签，为网页插入图片
    <img src="http://img.mukewang.com/52da54ed0001ecfa04120172.jpg" title="电影介绍" >
--------------------------------------------------------------------------------------------------

0 0