HTML与CSS

首先需理解浏览器访问一个网址的流程。
浏览器访问网址流程

HTML
HTML，Hyper Test Markup Language，顾名思义，是一种标记语言，利用具有特定含义的文本（标签，超文本，Hyper Text）作为标记，从而形成网页内容。
HTML网页由若干”元素“组成，而元素由”标签“和”内容组成“。

HTML源码例子：

<!DOCTYPE HTML>
<html>
	<head>
		<title>This is title</title>
	</head>
	<body>
		<h1>Hello world!</h1> <!-- 这是HTML注释 -->
	</body>
</html>

常用标签：

标签	功能
div	<div></div> 划分网页区块或区域
span	<span> this is a block</span> 表示一个小区块，可以在一行内划分
h1 - h6	<h1>title1</h1> 分级标题
p	<p>contents here</p> 分段
ul, li	<ul></ul> <li></li> ul与li结合使用，ul建立一个无序列表，li为列表中的项目
i，em，strong，hr，br	i表示斜体，em斜体，strong加粗，hr水平分割线，br换行
img	<img src = ‘path/img.png’ alt=‘文字’ title = ‘标题’> img用于显示图像，alt定义了图像非正常显示时所出现的文字，title定义了鼠标移到图像上时显示的文字
a	<a href = ‘http://www.google.com’ target = “_blank”> 谷歌</a> 超链接，target表示每次点击时都会打开一个新的标签页

CSS
CSS，Cascading Style Sheet，层叠样式表，用于给HTML网页提供更丰富的样式，CSS定义了一种格式设置规则，然后，再用这种规则改变HTML网页内元素的外观。
CSS，根据其定义的位置（和目标元素所在的HTML文件相对应而言），分为以下三种：

行内样式表

<div style="width:100px; height:100px; background:red;"></div>

内联式样式表

<html>
    <head>
        <title></title>
        <style type="text/css">
            #box{
                width: 100px;
                height: 100px;
                background: red;
            }
        </style>
    </head>
    <body>
        <div id="box"></div>
    </body>
</html>

链接式样式表

<html>
    <head>
        <title></title>
        <link rel="stylesheet" type="text/css" href="index.css"/>
    </head>
    <body>
        <div id="box"></div>
    </body>
</html>

CSS基本语法：

其中，选择符用于标识CSS样式，供后面的使用。选择符分三种，一种是以“#”开始定义的，叫做“ID选择符”，一种是以“.”开始定义的，叫做“类选择符”，还有一种是直接定义（我称作重构定义）HTML标签的“标签选择符”，下面分别是类选择符和标签选择符的例子。
```
   .box{
        width:100%;
        height:100px;
        backgroud:blue;
   }
```
```
div{
       width: 100%;
       height: 100px;
       background: blue;
}
```

标签选择符会影响（重构）HTML网页中所有此标签的样式。

表格
<table>标签定义表格， <tr>标签定义表格中的一行， <td>标签定义单元格。

<table border="1" cellspacing="0" cellpadding="0">
        <tr>
            <td>姓名</td>
            <td>班级</td>
            <td>成绩</td>
        </tr>
        <tr>
            <td>张三</td>
            <td>3</td>
            <td>80</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>3</td>
            <td>82</td>
        </tr>
</table>

表单（Form）
表单用于交互式接收用户输入，并返回给WEB服务器。

定义

<form 属性>
</form>

<form action="http://www.baidu.com/s" method="get">
        用户名: <input type="text"   name="user"/>
        密码： <input type="password"  name="password"/>
        <input type="submit" value="提交" />
</form>

属性	描述
action	提交表单的网址，<form action=‘http://www.testurl.com/test’ methord=‘get’>
methord	get: 表单发送的数据会显示在地址栏; post: 表单发送的数据不会显示在地址栏

input 元素

	<input type="text"   name="user"/>

type

type = "text"			输入框
type = "password"		密码框
type = "checkbox"		复选
type = "radio"			单选
type = "button"			普通按钮（不提交数据）
type = "submit"			按钮，提交数据
type="file"			文件选择控件
type = "hidden"			隐藏该表单元素

其它属性

name属性，规定input元素的名称，后台会根据这个属性的值来接收数据 
value属性，表单项的值 
readonly属性，指定控件处于只读状态，针对输入框有效，对按钮无意义

textarea元素，多行文本框，由rows和cols属性。
button元素，定义一个按钮
```
<button type="button">Button</button>
```

select元素和option元素，定义下拉列表框

<select name="city">
        <option value="bj">北京</option>
        <option>上海</option>
        <option>广州</option>
        <option>深圳</option>
</select>

【完】
2018年12月21日
参考材料
html+css快速入门教程

知识回顾之二：HTML与CSS

HTML与CSS

猜你喜欢