标签：网页 22 color 标签 08 HTML 第五组 选择器 CSS

HTML

• HTML
  • HTML概念及特点
  • HTML标签
  • 网页
  • HTML头部
    • title
    • base
    • link
    • style
    • script
    • meta（元数据）
  • 元素分类
    • 块级元素(自占一行，有换行功能)
    • 行级元素（自己没有换行功能）
  • 列表
    • 有序（ol）
    • 无序（ul）
    • 自定义列表(dl)
  • 表格
  • 表单
  • HTML5 与 HTML4及之前的区别
• CSS
  • 基本概念
  • CSS选择器
    • 基础选择器
    • 伪类选择器
    • 感悟：可以说是温故而知新，之前学习过的知识趁此机会巩固了一下，以前不太熟悉的知识也经此机会有所提升。尤其是在CSS选择器这一块，从以前不熟悉达到掌握程度。继续努力！

HTML概念及特点

• HTML是用来描述网页的一种语言。
• HTML是超文本标记语言（Hyper Text Markerup Language ）,不是编程语言。
• 标记语言就是一套标记标签。
• HTML使用标记标签来描述网页。

HTML标签

• HTML标记标签通常称为HTML Tag
• HTML标签有成对出现的尖括号包围的关键词
• HMTL通常成对出现，如  
• 开始和结束标签也称为开放标签和闭合标签

网页

• HTML文档描述的就是网页
• HTML文档包含HTML的标签和纯文本
• HTML文档被称为网页

HTML头部

HTML头部head元素包含了所有的头部信息（script ,link,以及各种meta，title，base）。

web浏览器的作用是读取HTML文档，并以网页的形式显示出他们，浏览器不会显示HTML标签，而是使用HTML标签来展示页面的内容

title

（1）浏览器工具栏中的标题

（2）当网页被收藏时，显示默认标题

（3）显示在搜索引擎结果界面的标题

base

描述了基本的链接地址/链接目录，作为HTML文档中的所有链接

link

引用css样式表

style

定义css层叠样式表

script

既可以引用script脚本，也可用script文件

建议写在body内最下方，不建议写在head中

meta（元数据）

指定网页描述，关键词，文件的最后修改时间，作者

可以定义搜索引擎的关键词

元素分类

块级元素(自占一行，有换行功能)

div ,h,p,form,ul(无序)，ol（有序）.........

<div>文档中的块级元素</div>

行级元素（自己没有换行功能）

a, span , del , sup , sub , strong

<span>文档中的行级元素</span>

列表

有序（ol）

无序（ul）

自定义列表(dl)

表格

 <!-- 表格 -->
      <table border="1" cellpadding="10内边距" width="1100" cellspacing="0单元格边距">
          <thead>
              <tr>
                  <th >学号</th>
                  <th>姓名</th>
                  <th>联系方式</th>
                  <th>毕业院校</th>
                  <th >国籍</th>
              </tr>
          </thead>
          <tbody>
              <tr>
                  <td>1001</td>
                  <td>罗永浩</td>
                  <td>13523142421</td>
                  <td>延边第二中学</td>
                  <td rowspan="3">中国</td>
              </tr>
              <tr>
                  <td>1002</td>
                  <td>罗翔</td>
                  <td>13125691131</td>
                  <td>北京大学法学院</td>
              </tr>
              <tr>
                  <td>1003</td>
                  <td>樊登</td>
                  <td>15521256672</td>
                  <td>西安交通大学</td>
              </tr>
          </tbody>
          <tfoot>
              <tr>
                  <td colspan="5" align="center">他们都是有钱人</td>
              </tr>
          </tfoot>
      </table>

效果如下：

表单

<form action="" method="post">
          <p>账户:
              <input type="text">
          </p>
          <p>密码:
              <input type="password">
          </p>
          <p>性别:
              <input type="radio" name="gender" checked>男
              <input type="radio" name="gender">女
          </p>
          <p>地址:
              <select multiple --多选>
                  <option value="">请选择省</option>
                  <option value="">吉林省</option>
                  <option value="">北京市</option>
              </select>
              <select >
                  <option value="">请选择市</option>
                  <option value="">长春市</option>
                  <option value="">北京市</option>
              </select>
              <select >
                  <option value="">请选择区</option>
                  <option value="">朝阳区</option>
                  <option value="">三里屯</option>
              </select>
          </p>
          <p>爱好:
              <input type="checkbox">读书
              <input type="checkbox">游泳
              <input type="checkbox" checked>打扑克
          </p>
          <p>
              <textarea name="" id="" cols="30" rows="10"></textarea>
          </p>
          <p>邮箱:
              <input type="email" name="" id="">自带验证功能
          </p>
          <p>数字
              <input type="number" name="" id="">
          </p>
          <p>头像
              <input type="file" name="" id="">
          </p>
          <p>隐藏
              <input type="hidden" name="" id="">
          </p>
          <p>
              <input type="submit" value="自来也">
              <input type="reset" name="" id="">
              <input type="button" value="卡卡西">

              <button type="submit">提交</button>
              <button type="button">自定义</button>
              <button type="reset">重置</button>
          </p>
      </form>

HTML5 与 HTML4及之前的区别

• 1. 在HTML5中废弃了HTML4中的一些标签
• 2. 自2012年成为稳定版本，且新增: 地图 、重力感应、画图 、画布
• 3. HTML5相对于之前增加了离线缓存机制

CSS

基本概念

CSS为层叠样式表，用于修饰html结构

• 定义如何显示HTML元素——样式
• 样式通常存储在样式表中，把样式表添加到HTML中，内容与表现分离（样式和结构分离）
• 外部样式表可以极大提高工作效率
• 外部样式通常存储在css文件中

CSS选择器

基础选择器

类选择器
标签选择器
id选择器
通配符选择器
后代选择器
组合选择器
属性选择器

        /* 类选择器可以选择多个用空格隔开 */
        .fontstyle{
            color: red;
            font-size: 20px;
        }
        .backcolor{
            background-color: aqua;
        }
        /* id选择器 每个标签元素的id是唯一的不能重复*/
        #dd{
            color: blue;
            font-size: 30px;
        }
        /* 标签选择器 */
        p{
            font-family: "仿宋";

        }
        /* 通配符,全部选择器 页面初始化*/
        *{
            margin: 0;
            padding: 0;
        }
        /* and 组合选择器 */
        h1,div{
            font-size: 100px;
        }
        /* 后代选择器 */
        div p{
            background-color: red;
        }
        /* 子选择器 */
        div>p{
            background-color: aqua  ;
        }
        /* 紧跟着div的p元素 */
        div+p{
            background-color: pink;
        }
        /* 属性选择器 */
        input[name]{
            color: red;
            width: 1000px;
            font-size: 50px;
        }
        input[name=username]{
            color: blue;
        }

伪类选择器

 a{
            color: red;
        }
        /* 初始状态 */
        a:link{
            color: blueviolet;
        }
        /* 激活状态 */
        a:active{
            color: aqua;
        }
        /* 鼠标悬停状态 */
        a:hover{
            color: greenyellow;
        }
        /* 访问过的状态 */
        a:visited{
            color: black;
        }
        img:hover{
            width: 200px;
        }
        p::first-letter{
            color: red;
        }

感悟：可以说是温故而知新，之前学习过的知识趁此机会巩固了一下，以前不太熟悉的知识也经此机会有所提升。尤其是在CSS选择器这一块，从以前不熟悉达到掌握程度。继续努力！

标签：网页,22,color,标签,08,HTML,第五组,选择器,CSS
来源： https://www.cnblogs.com/WorkerHevien/p/16614004.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。