首页/基礎知識庫

HTML+CSS(第二天)

 2023-09-10 阅读 18 评论 0

摘要：表格（现在已经不使用表格进行布局，多用来处理和显示表格数据）基本语法（表格中没有列的概念，只有行tr和单元格td） <!DOCTYPE html> <html> <head><meta charset="utf-8"><title></tit
  1. 表格（现在已经不使用表格进行布局，多用来处理和显示表格数据）
    1. 基本语法（表格中没有列的概念，只有行tr和单元格td）
      1. <!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title></title><link rel="stylesheet" href="">
</head>
<body><table width="500" border="1"><tr><td>姓名</td><td>性别</td><td>年龄</td><td>电话</td></tr><tr><td>小王</td><td>女</td><td>11</td><td>120</td></tr></table></body>
</html>
    2. <table></table>中只能嵌套<tr></tr>
    3. <tr></tr>中只能嵌套<td></td>
    4. <td></td>只是一个盒子可以嵌套任何元素
    5. 表格属性
      1. align:设置整个表格在网页中水平对齐方式（center,left,right）
        1. 如果给table设置align表示给整个表格设置在网页中的水平对齐方式
        2. 如果给tr设置align表示给该行的单元格内容设置在单元格内的水平对齐方式
        3. 如果给td设置align表示给该单元格内容设置在该单元格内的水平对齐方式
      2. border:设置表格边框（包括内边框）
      3. cellspacing:设置单元格和单元格边框之间的距离
      4. cellpadding:设置单元格内容和单元格边框的距离
      5. 三参为0（一般我们需要设置）border,cellspacing,cellpadding都为0
    6. 表头标签
      1. 表头单元格一般是位于表格的第一行或者第一列，其文本加粗居中显示
      2. <th></th>替代<td></td>
    7. 表格标题
      1. 用法
      2. <!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title></title><link rel="stylesheet" href="">
</head>
<body><!--cell--><table width="500" border="1" align="center"><caption>我是表格标题</caption><tr><td>姓名</td><td>性别</td><td>年龄</td><td>电话</td></tr><tr><td>小王</td><td>女</td><td>11</td><td>120</td></tr></table></body>
</html>
      3. caption标签只能用于table标签内，而且每个table标签只能有一个caption
      今日小说排行榜案例
      2. 实现代码
    8. 表格结构
      1. 在使用表格进行布局时，我们一般将表格划分为表头，主体和页脚（页脚兼容性有问题一般不使用）
      2. <thead></thead>
      3. <tbody></tbody>
      4. 2,3的两个标签是划分表格内容的，不包含表格标题
    9. 合并单元格
      1. 跨行合并 rowspan
      2. 跨列合并 colspan
      3. 处理原则
        1. 先确定跨行还是跨列
        2. 先上后下，先左后右定位到单元格的位置
        3. 删除的个数=合并的个数-1
    10. 表单（收集用户信息）
      1. 在html中,一个表单控件是由三部分组成:表单控件，提示信息，表单域（该区域作为一个整体信息提交到候台）
      2. input控件
        1. <input />标签为单标签,
        2. type属性为最基本的属性，值有很多用于指定不同的表单控件类型
        3. 其他常用的属性还有name,value,size(一般是由css来设置的),checked,maxlength
        4. 单行文本输入框
          1. type="text"
          2. 设置默认值:value="北京"
        5. 密码输入框
          1. type="password"
        6. 单选按钮
          1. type="radio"
          2. 设置checked属性值为checked,默认选中
          3. 单选按钮以组为单位，同一组内必须给他们设置相同的name,这样才可以多选一
          4. 例子 
            <tr><td>性别</td><td><input type="radio" name="sex" />男<input type="radio" name="sex" />女<input type="radio" name="sex" />人妖</td></tr>
        7. 复选框
          1. type="checkbox"
          2. 设置checked属性值为checked,默认选中
          3. 例子 
            <tr><td>喜欢类型</td><td><input type="checkbox" name="love">妩媚<input type="checkbox" name="love">气质<input type="checkbox" name="love">可爱</td></tr>
        8. 按钮
          1. 普通按钮
            1. type="button"
          2. 重置按钮
            1. type="reset"
          3. 提交按钮
            1. type="submit"
          4. 例子 
            <td><input type="button" value="注册"><input type="submit" value="提交"><input type="reset" value="重置"></td>
          5. 图片形式的提交按钮
            1. type="image"
            2. 设置图片的路径 src属性
            3. 例子 
              <input type="image" src="btn.png">
        9. 文件域
          1. type="file"
          2. 例子 
            </tr><tr><td><input type="file"></td></tr>
        10. label标签
          1. label标签是为input标签服务的
          2. 用于绑定一个表单元素，当点击label标签的时候，被绑定的表单元素就会获得焦点
          3. 例子 
            </tr>                <td><label>用户名：<input type="text" ></label><hr/><label for="pass">用户名：<input type="text" id="name">密码：<input type="password" id="pass" /></label></td></tr>
        11. 文本域（textarea控件）
          1. text只能输入一行文本
          2. textarea可以输入多行文本
          3. 默认值不是通过value来设置
          4. 文本域的宽和高需要CSS设置
          5. 例子 
            <td><textarea name="文本输入" cols="17" rows="7" >不支持富文本</textarea></td>
        12. 下拉菜单
          1. 语法格式

            <select>
            <option>选项1</option>
            <option>选项2</option>
            <option>选项3</option>
            ...
            </select>

          2. <select></select>中至少包含一对儿<option></option>
          3. 下拉菜单默认选中option中的第一项
          4. 在option中定义selected="selected"时，当前项为默认选中项
        13. 表单域
          1. form标签被用于定义表单域，创建一个表单，实现用户信息的传递和收集
          2. 基本语法

            <form action="url地址" method="提交方式" name="表单名称">
            各种表单控件
            </form>

          3. action:用于指定接收处理表单数据的服务器程序的Url地址
          4. method:设置表单数据的提交方式:get或者post
          5. name:用于指定表单的名称，来区分同一个页面的多个表单
          6. submit按钮点击就会将填写的表单信息提交到指定的url地址，reset按钮点击就会将用户填写的信息清空
  2. CSS(美化网页)
      1. 引入css样式表的位
        1. 内部样式表
          1. 将css代码集中写在HTML的head标签内,一般紧紧挨着</head>

          2. <head>
            <style type="text/CSS">
            选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
            </style>
            </head>

          3. 例子 
            <!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title></title><style type="text/css">caption{color: skyblue;}</style>
</head>
<body><table  border="0" cellspacing="0" cellpadding="0" width="600" align="center"><caption >青春不常在，抓紧谈恋爱</caption><thead></thead><tbody>    </tbody></table>    
</body>
</html>
        2. 外部样式表
          1. 将一个或者多个以.css为扩展名的外部样式文件通过Link标签链接到html文件中
          2. 语法格式

            <head>
            <link href="CSS文件的路径" rel="stylesheet" />
            </head>

          3. link是但标签
          4. link必须放在head标签内
          5. link标签必须指定三个属性
            1. href:定义链接外部样式表文件的Url,可以是相对路径也可以是绝对路径
            2. rel:定义当前文档和被链接文档之间的关系，这里需要值为stylesheet
            3. type:定义所链接文档的类型这里值为text/css
            4. 例子 
              <!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title></title><link rel="stylesheet" type="text/css" href="CSS/style.css" /></style>">
</head>
<body><table  border="0" cellspacing="0" cellpadding="0" width="600" align="center"><caption >青春不常在，抓紧谈恋爱</caption><thead></thead><tbody>    </tbody></table>    
</body>
</html>
        3. 行内样式
          1. <标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>
          2. 又称为内联样式,行内样式,行间样式,内嵌样式
          3. 例子 
            <!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title></title>
</head>
<body><table  border="0" cellspacing="0" cellpadding="0" width="600" align="center"><caption  style="color: pink; font-size: 18px;">青春不常在，抓紧谈恋爱</caption><thead></thead><tbody>    </tbody></table></body>
</html>
        4. 总结
          样式表优点缺点使用情况控制范围
          行内样式表书写方便，权重高没有实现样式和结构相分离较少控制一个标签（少）
          内部样式表部分结构和样式相分离没有彻底分离较多控制一个页面（中）
          外部样式表完全实现结构和样式相分离需要引入最多，强烈推荐控制整个站点（多）

    1. CSS语法规则
      1. 选择器{属性名1：属性值；属性2：属性值；}
    2. CSS基础选择器
      1. 标签选择器（元素选择器）
        1. 可以将某一类标签全部选择出来
        2. 不能差异化样式
      2. 类选择器
        1. 语法规则:
          1. 给需要设置样式的标签添加Class属性  class="类名"
          2. .类名{属性名:属性值;属性名:属性值;}
        2. 类名命名遵循的基本规则
          1. 长名词或者词组使用中横线来连接
          2. 不建议使用"_"来命名
            1. 浏览器兼容问题（比如_tips在IE6中是无效的）
            2. js变量命名一般使用_，用于区分
          3. 尽量使用英文不使用中文和数字
      3. 多类名选择器
        1. 一个标签可以设置多个类名
        2. 语法规则：class="类名1 类名2"
        3. 样式显示效果和HTML元素的类名先后是没有关系的，受CSS样式书写的上下顺序有关
        4. 例子 
          <!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title></title><style type="text/css" media="screen">.red{color: red}.font20{font-size: 18;color:blue;}</style>
</head>
<body><div class="red font20">我是一个盒子</div>    
</body>
</html>
      4. id选择器
        1. 语法规则  #id名{属性名：值1}       <标签名  id="id名"></标签名>
        2. id选择器好比人的身份证，全国唯一，不能重复使用
        3. 类选择器好比人的名字，可以重复使用多次
        4. 例子 
          <!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title></title><link rel="stylesheet" href=""><style type="text/css">#hezi{color: red;font-size: 19;}</style>
</head>
<body><div id="hezi">我是盒子</div>
</body>
</html>
      5. 通配符选择器
        1. 语法规则 *{属性1：属性值1;属性2:属性值2}
        2. <!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title></title><style type="text/css">*{margin: 0px;padding: 0px;}</style>
</head>
<body></body>
</html>

          htmlCSS基础， 

转载于:https://www.cnblogs.com/JessciaWu/p/9632648.html

版权声明：本站所有资料均为网友推荐收集整理而来,仅供学习和研究交流使用。

原文链接：https://hbdhgg.com/5/36604.html

上一篇：Mybatis 一对多 简单映射配置
下一篇：Python基础——6面向对象编程
标签：htmlCSS基础HTML csshtmlcss静态页面及代码html iframehtml前端用HTML和CSS制作网页the html element name of pHTML和css
htmlCSS基础

发表评论:

最新文章
阅读排行
猜你喜欢
热门标签

本站为非赢利网站，部分文章来源或改编自互联网及其他公众平台，主要目的在于分享信息，版权归原作者所有，内容仅供读者参考，如有侵权请联系我们删除！

Copyright © 2022 匯編語言學習筆記 Inc. 保留所有权利。

底部版权信息