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属性,指定控件处于只读状态,针对输入框有效,对按钮无意义
- type
- 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快速入门教程