HTML5教程

TUE.HTML 表单及 CSS

本文主要是介绍TUE.HTML 表单及 CSS,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

TUE.表单及 CSS

表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <table border="1">  # border 即表示表格
    <thead>
      <tr>  # 一行数据 -- 表头
        <td>  # 列数据 -- 表头内容
        </td>
      </tr>  		# <th></th> 表头加粗
    </thead>
  
    <tbody>
      <tr>
        <td colspan="2">  # colspan="2" 表示占两列、rowspan="2" 表示占两行
        
        </td>
      </tr>
    </tbody>
  </table>
</body>
</html>

无序列表

<ul type="disc">
  <li>第一项</li>  # li 为块级元素,用来作为导航
  <li>第二项</li>
  ...
</ul>  # ul 为块级元素

type属性:

  • disc(实心圆点,默认值)
  • circle(空心圆圈)
  • square(实心方块)
  • none(无样式)

标题列表

<dl>
  <dt>标题1</dt>
  <dd>内容1</dd>
  <dt>标题2</dt>
  <dd>内容1</dd>
  <dd>内容2</dd>
</dl>

form 表单

  • 表单用于向服务器传输数据,从而实现用户与Web服务器的交互
  • 表单能够包含input系列标签,比如文本字段、复选框、单选框、提交按钮等等
  • 表单还可以包含textarea、select、fieldset和 label标签

元素会根据不同的 type 属性,变化为多种形态。

type属性值表现形式对应代码
text单行输入文本<input type=text" />
password密码输入框
date日期输入框
checkbox复选框
radio单选框
submit提交按钮
reset重置按钮
button普通按钮
hidden隐藏输入框
- input 框是行内元素,因此不添加换行符即在同一行内
- 每个 input 里都应该有一个 name 属性
- name 属性相当于 Python 中的字典
- form 表单默认为 get 提交,需要使用 method 将其修改为 post
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>如梦西沉</title>
</head>
<body>
<!--action:
        1.什么都不写,即向当前位置提交
        2.写全路径
        3./index/
            自动拼接 ip:port/index/

form表单中要想上传文件,必须修改enctype属性

是一种编码方式
    urlencoded, form-data, json

enctype:
    1.application/x-www-form-urlencoded (默认)
    2.multipart/form-data

form表单只能提交urlencoded, form-data, json格式的数据不能提交,
    1. ajax
    2. 第三方工具 postman
            -->
<form action="/index/" method="post" enctype="multipart/form-data">
    <p>
<!--        文本框,value 表示默认值,disabled 表示禁用,readonly 表示只读-->
        username: <input type="text" value="Jason" disabled name="username" placeholder="账号">
    </p>
    <p>
<!--        密码框-->
        password: <input type="password" value="" name="password" placeholder="密码">
    </p>
    <p>
<!--        日期输入框-->
        日期: <input type="date">
    </p>
    <p>
<!--        复选框, checked 表示默认-->
        <input type="checkbox" name="hobby" value="0" checked>篮球
        <input type="checkbox" name="hobby" value="1">足球
        <input type="checkbox" name="hobby" value="2" checked>排球

    </p>
    <p>
<!--        单选框, checked 表示默认-->
        <input type="radio" name="gender" value="0" checked>Male
        <input type="radio" name="gender" value="1">Female
        <input type="radio" name="gender" value="2">Other
    </p>
<!--    下拉框, selected 表示默认-->
    <select name="province" id="city">
    <option value="0">北京</option>
    <option value="1">南京</option>
    <option value="2">上海</option>
    <option value="3">广州</option>
    <option selected="selected" value="4" >杭州</option>
    </select>
    <p>
<!--        选择文件按钮-->
        选择文件: <input type="file" name="myfile">
    </p>
    <p>
<!--        提交按钮-->
        <input type="submit">
<!--        重置按钮-->
        <input type="reset">
    </p>
    <p>
<!--        大段文本框-->
        <textarea name="" id="" cols="30" rows="10">
        </textarea>
    </p>
    <p>
<!--        用于查找数据-->
        <input type="hidden" value="1">
    </p>
    <p>
<!--        空白按钮,想要提交必须写在 form 中-->
        <input type="button">
    </p>
</form>
</body>
</html>

CSS

  • 层叠样式表,用来给网页骨架增加样式,是网页变得更好看
CSS 语法结构
		选择器{
      属性名 1; 属性值 1;
      属性名 2; 属性值 2;
      属性名 3; 属性值 3;
      属性名 4; 属性值 4;
      属性名 5; 属性值 5;
      属性名 6; 属性值 6;
}

<!--
id属性和class属性都是所有标签内置的

id:它唯一不能重复, 一个网页中只能由一个id
class: 可以有多个值,类似于面向对象的继承

自定义属性
-->
<div id="d1" class="c1 c2 c3" username="egon">div1</div>
<div id="d2" class="c1 c2">div2</div>
</body>
</html>

选择器的分类

基本选择器

1.ID 选择器
		# 修改该 id 值所对应的属性
2.Class选择器
		# 修改带有相同类的属性
3.标签选择器
		# 修改相同标签的属性
4.通用选择器
		# 选择所有标签
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*id选择器语法*/

        #d1 {
            color: red;
        }

        /*类选择器语法*/
        .c1 {
            color: red;
        }

        /*标签选择器语法*/
        div {
            color: red;
        }

        /*一般用来做初始化的*/
        * {
            color: purple;
        }
    </style>
</head>
<body>

<div  id="d1" class="c1 c2">div1</div>
<div  id="d2" class="c3 c1">div2</div>
<div  id="d3" class="c4">div3</div>

<span>sapn1</span>

<p>ppppp</p>

</body>
</html>

属性选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*属性选择器语法*/
        /*只要带username属性的所有标签,都会被选中*/
        [username] {
            color: red;
        }

        [username='div2'] {
            color: red;
        }

        div[username='div2'] {
            color: red;
        }
    </style>
</head>
<body>

<!--属性选择器-->
<div username="div1">div1</div>
<div username="div2">div2</div>
<p username="div2">pppppp</p>
</body>
</html>

后代选择器和组合选择器

在后代选择器中,规则左边的选择器一端包括两个或多个用空格分隔的选择器。选择器之间的空格是一种结合符(combinator)。每个空格结合符可以解释为“... 在 ... 找到”、“... 作为 ... 的一部分”、“... 作为 ... 的后代”,但是要求必须从右向左读选择器。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        /*逗号表示并列关系, 下列标签全被选中*/
        div, p, span {
            color: green;
        }

        /*后代选择器*/
        div p span {
            color: green;
        }

        #d1 .c1 span {
            color: red;
        }
    </style>
</head>
<body>

<!--    <div>div</div>-->
<!--    <p>p</p>-->
<!--    <span>span</span>-->


<div id="d1">div
    <p id="p1" class="c1">p
        <span>span</span>
    </p>
    <p>
        <a href=""></a>
    </p>
</div>

<p>p11</p>
<span>span111</span>
</body>
</html>

伪类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        /*默认就是link*/
        a:link {
            color: red;
        }

        /*当鼠标悬浮时,触发的颜色, 掌握*/
        a:hover {
            color: green;
        }

        /*当鼠标点击左键不放时,触发的颜色*/
        a:active {
            color: blue;
        }

        /*访问连接之后的颜色*/
        a:visited {
              color: purple;
        }

				/*鼠标悬浮时,触发输入框颜色*/
        input:focus {
            background-color: red;
        }
    </style>
</head>
<body>

<a href="http://www.baidu.com">点我点我</a>

<!--input获取焦点,失去焦点-->
<input type="text">
</body>
</html>

伪元素选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*p:first-letter {*/
        /*    color: red;*/
        /*    font-size: 30px;*/
        /*}*/


        p:before {
            content: "我很帅";
            font-size: 30px;
            color: red;
        }

        p:after {
              content: "洋哥很帅";
            font-size: 30px;
            color: red;
        }

    /*    它可以解决父标签塌陷问题*/
    </style>
</head>
<body>
    <p>当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化(渲染)。</p>
</body>
</html>

选择器的优先级

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

<!--    <style>-->
<!--        div {-->
<!--            color: red;-->
<!--            font-size: 20px;-->
<!--        }-->
<!--    </style>-->
<!--

     <link rel="stylesheet" href="mycss.css">-->


    <style>
        #d1 {
            color: red;
        }

        .c1 {
            color: blue;
        }

        div {
            color: purple;
        }
    </style>
</head>
<body>
<!--

选择器优先级有两种:
    1. 选择器相同的情况下
            行内式  > style  外联
            style 和 外联,谁后执行就听谁的
    2. 选择器不同的情况下
          	行内式 >  id > class >  标签

-->

<!--<div style="color: red;font-size: 30px">div</div>-->
<!--<div>div</div>-->


<div id="d1" class="c1" style="color: green">div</div>
</body>
</html>

行内式

行内式,就是将css样式代码写在具体网页中的一个html标签元素内;行内式要在特定的HTML标记内使用,使用style属性来设置特定HTML标记的样式。比如:<div style="color:#f00"></div>
特点:
1、行内式放在代码中的HTML元素中
2、使用行内样式时,样式只会影响你选择的元素
3、行内样式没有选择器

注:HTML中定义的行内样式只适用于它们添加到的标记。

CSS属性相关

设置长宽

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*块级元素可以设置长宽*/
        div {
            width: 200px;
            height: 200px;
            background-color: red;
        }

        /*行内元素不能设置长宽*/
        span {
            width: 100px;
            height: 100px;
            background-color: green;
        }
    </style>
</head>
<body>
    <div>div</div>
    <span>span</span>
</body>
</html>

字体相关

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p {
            font-size: 14px;
            /*加粗*/
            font-weight: bolder;
            /*数字越大加粗程度越大, 100-900*/
            font-weight: 100;
            color: red;
            /*rgb 0-255  255 * 255 * 255*/
            color: rgb(101, 250, 100);

            /*rgba => a:透明度,范围0-1,数字越小,越趋向于透明*/
            color: rgba(101,250,100, 0.9);

            /*它有1600w种颜色*/
            color: #424242;
            color: #6f7071;

        }
    </style>
</head>
<body>
<p>我是大帅哥</p>
</body>
</html>

文本相关

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p {
            /*让文本居中*/
            text-align: center;
            /*让文本居右*/
            text-align: right;
            /*默认文本居左*/
            text-align: left;

            /*下划线*/
            text-decoration: underline;
            /*中划线*/
            text-decoration: line-through;
            /*上划线*/
            text-decoration: overline;
            /*常用于去除超链接的下划线*/
            text-decoration: none;
        }
        a {
            /*掌握*/
            text-decoration: none;
        }
    </style>
</head>
<body>
<a href="">点我</a>
<!--    <p>当浏览器读到一个样式表,</p>-->
</body>
</html>
这篇关于TUE.HTML 表单及 CSS的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!