表格标签与表单标签和css层贴样式表(选择器)（2）

2022-09-02 22:32:56 阅读：164 来源： 互联网

表格标签

<table>
        <thead>
                      <tr>  一个tr就表示一行
                <th>username</th>  加粗文本
                <td>username</td>  正常文本
            </tr>
              </thead>  表头(字段信息)
        <tbody>
                <tr>
                <td>jason</td>
                <td>123</td>
                <td>read</td>
            </tr>
        </tbody>     表单(数据信息)
</table>
<table border="1">  加外边宽
<td colspan="2">egon</td>  水平方向占多行
<td rowspan="2">DBJ</td>   垂直方向占多行

表单标签

"""
能够获取前端用户数据(用户输入的、用户选择、用户上传...)基于网络发送给后端服务器
"""
# 写一个注册功能
<form action=""></form>  在该form标签内部书写的获取用户的数据都会被form标签提交到后端
action:控制数据提交的后端路径(给哪个服务端提交数据)
      1.什么都不写  默认就是朝当前页面所在的url提交数据
    2.写全路径:https://www.baidu.com  朝百度服务端提交
    3.只写路径后缀action='/index/'  
        自动识别出当前服务端的ip和port拼接到前面
      host:port/index/
<label for="d1">  第一种 直接讲input框写在label内
            username:<input type="text" id="d1">
</label>                    第二种 通过id链接即可 无需嵌套
<label for="d2">password:</label>
<input type="text" id="d2">
ps:input不跟label关联也没有问题
  
"""
label 和 input都是行内标签
"""
input标签 就类似于前端的变形金刚  通过type属性变形
    text:普通文本
  password:密文
    date:日期    
  submit:用来触发form表单提交数据的动作
  button:就是一个普普通通的按钮 本身没有任何的功能 但是它是最有用的，js可以给它自定义各种功能
  reset:重置内容
  radio:单选
        默认选中要加checked='checked'
      <input type="radio" name="gender" checked='checked'>男
      当标签的属性名和属性值一样的时候可以简写
      <input type="radio" name="gender" checked>女
    checkbox:多选
          <input type="checkbox" checked>DBJ
  
  file:获取文件  也可以一次性获取多个
        <input type="file" multiple>
  hidden:隐藏当前input框
        钓鱼网站
select标签 默认是单选 可以加mutiple参数变多选 默认选中selected
                        <select name="" id="" multiple>
                <option value="" selected>新垣结衣</option>
                <option value="" selected>斯佳丽</option>
                <option value="">明老师</option>
            </select>
textarea标签  获取大段文本
      <textarea name="" id="" cols="30" rows="10"></textarea>

# 能够触发form表单提交数据的按钮有哪些(一定要记住)
        1、<input type="submit" value="注册">
        2、<button>点我</button>
    
# 所有获取用户输入的标签 都应该有name属性
    name就类似于字典的key
  用户的数据就类似于字典的value
  <p>gender:
            <input type="radio" name="gender">男
            <input type="radio" name="gender">女
            <input type="radio" name="gender">其他
  </p>

你可以通过method指定提交方式
<form action="http://127.0.0.1:5000/index/" method="post">

针对用户选择的标签用户不需要输入内容但是你需要提前给这些标签添加内容value值
<p>gender:
<input type="radio" name="gender" value="male">男
<input type="radio" name="gender" checked value="female">女
<input type="radio" name="gender" value="others">其他
</p>
<p>hobby:
<input type="checkbox" name="hobby" value="basketball">篮球
<input type="checkbox" checked name="hobby" value="football">足球
<input type="checkbox" checked name="hobby" value="doublecolorball">双色球
</p>
<p>province：
<select name="province" id="">
<option value="sh">上海</option>
<option value="bj" selected>北京</option>
<option value="sz">深圳</option>
</select>
</p>

"""
form表单提交文件需要注意
1.method必须是post
2.enctype="multipart/form-data"
enctype类似于数据提交的编码格式
默认是urlencoded 只能够提交普通的文本数据
formdata 就可以支持提交文件数据
"""

CSS

层贴样式表:就是给HTML标签添加样式的，让它变的更加的好看

# 注释
/*单行注释*/
/*
多行注释1
多行注释2
多行注释3
*/

通常我们在写css样式的时候也会用注释来划定样式区域(因为HTML代码多所以对呀的css代码也会很多)
/*这是博客园首页的css样式文件*/
/*顶部导航条样式*/
...
/*左侧菜单栏样式*/
...
/*右侧菜单栏样式*/
...
# css的语法结构
选择器 {
  属性1:值1;
  属性2:值2;
  属性3:值3;
  属性4:值4;
}
# css的三种引入方式
    1.style标签内部直接书写(为了教学演示方便我们用第一种)
      <style>
        h1  {
            color: burlywood;
        }
    </style>
  2.link标签引入外部css文件(最正规的方式 解耦合)
      <link rel="stylesheet" href="mycss.css">
    3.行内式(一般不用)
          <h1 style="color: green">老板好 要上课吗?</h1>

CSS选择器

基本选择器

# id选择器
<style>
/*id选择器*/
        /*#d1 {  !*找到id是d1的标签 将文本颜色变成绿黄色*!*/
        /*    color: greenyellow;*/
        /*}*/
</style>        
# 类选择器
<style>
/*类选择器*/
        /*.c1 {  !*找到class值里面包含c1的标签*!*/
        /*    color: red;*/
        /*}*/
</style>
# 元素/标签选择器
<style>
/*元素(标签)选择器*/
        /*span {  !*找到所有的span标签*!*/
        /*    color: red;*/
        /*}*/
</style>
# 通用选择器
<style>
        /*通用选择器*/
        /** {  !*将html页面上所有的标签全部找到*!*/
        /*    color: green;*/
        /*}*/
</style>

组合选择器

"""
在前端 我们将标签的嵌套用亲戚关系来表述层级
    <div>div
        <p>div p</p>
        <p>div p
            <span>div p span</span>
        </p>
        <span>span</span>
        <span>span</span>
  </div>
  div里面的p span都是div的后代
  p是div的儿子
  p里面的span是p的儿子 是div的孙子
  div是p的父亲
  ...
"""
# 后代选择器
# 儿子选择器
# 毗邻选择器
# 弟弟选择器
                /*后代选择器*/
        /*div span {*/
        /*    color: red;*/
        /*}*/

        /*儿子选择器*/
        /*div>span {*/
        /*    color: red;*/
        /*}*/

        /*毗邻选择器*/
        /*div+span {  !*同级别紧挨着的下面的第一个*!*/
        /*    color: aqua;*/
        /*}*/

        /*弟弟选择器*/
        div~span {  /*同级别下面所有的span*/
            color: red;
        }

属性选择器

"""
1 含有某个属性
2 含有某个属性并且有某个值
3 含有某个属性并且有某个值的某个标签
"""
# 属性选择器是以[]作为标志的
/*[username] {  !*将所有含有属性名是username的标签背景色改为红色*!*/
        /*    background-color: red;*/
        /*}*/

        /*[username='jason'] {  !*找到所有属性名是username并且属性值是jason的标签*!*/
        /*    background-color: orange;*/
        /*}*/

        /*input[username='jason'] {  !*找到所有属性名是username并且属性值是jason的input标签*!*/
        /*    background-color: wheat;*/
        /*}*/

标签：span,color,标签,样式表,div,选择器,属性
来源： https://www.cnblogs.com/py1234/p/16651532.html

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

ICode9