html知识自结（2

3.CSS

CSS (Cascading Style Sheets) 用于渲染HTML元素标签的样式.

CSS 是在 HTML 4 开始使用的,是为了更好的渲染HTML元素而引入的.
CSS 可以通过以下方式添加到HTML中:

  • 内联样式 在HTML元素中使用”style” 属性
  • 内部样式表 在HTML文档头部 <head>区域使用<style>元素来包含CSS
  • 外部引用 使用外部 CSS 文件
    最好的方式是通过外部引用CSS文件

常见的CSS格式有:

text-align:                     <!--center居中,left左对齐,right右对齐-->
border-radius:              <!--边角圆滑度-->
width:                           <!--长度-->
height:                          <!--宽度-->
background-color:        <!--背景颜色-->
border:                         <!--边框颜色-->

4.列表

列表分无序、有序、定义三种

  • 无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。
  • 有序列表也是一列项目，列表项目使用数字进行标记。
  • 自定义列表不仅仅是一列项目，而是项目及其注释的组合。
<!--无序列表-->
<ul>
<li>列表中一项</li>
<li>列表中另一项</li>
</ul> 
<!--有序列表-->
<ol>
<li>列表第一项</li>
<li>列表第二项</li>
</ol> 
<!--定义列表-->
<dl>
<dt>列表第一项</dt>
<dd>第一项定义</dd>
<dt>列表第二项</dt>
<dd>第二项定义</dd>
</dl>

5.表单（重要

HTML 表单用于收集不同类型的用户输入

  • 表单是一个包含表单元素的区域。
  • 表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。
  • 表单使用表单标签 <form> 来设置:

    输入

    多数情况下被用到的表单标签是输入标签<input>

输入类型是由类型属性（type）定义的。大多数经常被用到的输入类型如下：

  1. 文本域
    就是本文框，可以输入文字，用<input type="text">来设定
  2. 密码字段
    与本文域类似，但是输入文字不会以明文显示，用<input type="possword">来指定
  3. 单选按钮
    单选选项框，用<input type="radio">来设定
  4. 复选框
    复选选项框，用<input type="checkbox">来设定
  5. 提交按钮
    当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。
    用<input type="submit">来设定
  6. 重置按钮
    点击之后会将重置按钮所在的表单中填写的内容重新设置为默认值
    用<input type="reset">来设定

除此之外表单中的单选按钮可以设置以下几个属性：value、name、checked

  • value：提交数据到服务器的值（后台程序PHP使用）
  • name：为控件命名，以备后台程序 ASP、PHP 使用
  • checked：当设置 checked=”checked” 时，该选项被默认选中

例如:

<form>
<p>你生活在哪个国家？</p>
<input type="radio" name="country" value="China" checked="checked">中国<br />
<input type="radio" name="country" value="the USA">美国
</form>

*注意：**同一组的单选按钮，name 取值一定要一致，比如上面例子为同一个名称“country”，这样同一组的单选按钮才可以起到单选的作用*

6.举个栗子:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>数据库提交登入</title>
<style>
#biaoti {
    text-align: center;
}
#biaodan {
    text-align: center;
    border: #4CAF50;
    border-radius: 4px；

}
#quedinganniu {
    background-color: #4CAF50;
    border-radius: 4px;
    width: 100px;
    height: 40px;
    border: #4CAF50;
    margin-right:30px
}
#chongzhianniu {
    background-color: #4CAF50;
    border-radius: 4px;
    width: 100px;
    height: 40px;
    border: #4CAF50;
}
#name {
    border-radius: 4px;
    width: 400px;
    height: 30px;
}
#passwork {
    border-radius: 4px;
    width: 400px;
    height: 30px;
    }
</style>
<meta name="author" content="kamuxiy">
</head>

<body id="body">
<div id="biaoti">
  <h1>标题</h1>
</div>
<!--标题-->
<div id="biaodan">
  <form name="input" action="http://localhost/phpMyAdmin4.8.5/tbl_change.php" method="post">
    <!--名字-->
    <input type="text" value="name" name="name" id="name">
    <br>
    <br>
    <!--密码-->
    <input type="$#password" value="password" name="password" id="passwork">
    <br>
    <br>
    <!--提交-->
    <input type="submit" value="确定" id="quedinganniu">

    <!--重置-->
    <input type="reset" name="button" id="chongzhianniu" value="重置">
  </form>
</div>
    <div id="java"> 
  <script>
        document.write("这是一个java实现的段落")
    </script>
  <noscript>
  抱歉，您的浏览器不支持JavaScript!
  </noscript>
</div>
<!--用java输出-->

</body>
</html>
赏

一只小白鸽