HTML样式
当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化。有以下三种方式来插入样式表:
外部样式表
当样式需要被应用到很多页面的时候,外部样式表将是理想的选择。使用外部样式表,你就可以通过更改一个文件来改变整个站点的外观。
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
内部样式表
当单个文件需要特别样式时,就可以使用内部样式表。你可以在 head 部分通过 <style> 标签定义内部样式表。
<head>
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>
内联样式
当特殊的样式需要应用到个别元素时,就可以使用内联样式。 使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。
<p style="color: red; margin-left: 20px">
This is a paragraph
</p>
<style>标签
<style>标签定义文档的样式信息
Type 属性是必需的,定义 style 元素的内容。唯一可能的值是 "text/css"
style元素在head部分中
<link>标签
<link>标签定义文档和外部资源的关系,通过<link>标签来连接外部样式表
<div>标签
<div>标签定义文档中的division或section
用id和class来标记<div>,使它更有效
用法
<div> 是一个块级元素。这意味着它的内容自动地开始一个新行。实际上,换行是 <div> 固有的唯一格式表现。可以通过 <div> 的 class 或 id 应用额外的样式。
不必为每一个 <div> 都加上类或 id,虽然这样做也有一定的好处。
可以对同一个 <div> 元素应用 class 或 id 属性,但是更常见的情况是只应用其中一种。这两者的主要差异是,class 用于元素组(类似的元素,或者可以理解为某一类元素),而 id 用于标识单独的唯一的元素。
HTML图像
HTML图像由<imag>标签定义
<imag>是一个空标签
显示图像要用到src属性,src属性值是图像的url地址
Alt属性用来为图像定义可替换的问本
<imag src = “url” alt = “ XXXXX ” />
在浏览器无法载入图像时,替换文本属性告诉读者失去的信息。此时,浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯,这样有助于更好的显示信息,并且对于那些使用纯文本浏览器的人来说是非常有用的。
显示背景图片
<body background=/i/eg_background.jpg">
图片作为连接
<a href = “url”> <imag src = “图片地址” /> <a/>
<map>标签和<area>标签
<map>标签定义一个客户端图像映射。图像映射(image-map)指带有可点击区域的一幅图像。
实例
带有可点击区域的图像映射:
<img src="planets.jpg" border="0" usemap="#planetmap" alt="Planets" />
<map name="planetmap" id="planetmap">
<area shape="circle" coords="180,139,14" href ="venus.html" alt="Venus" />
<area shape="circle" coords="129,161,10" href ="mercur.html" alt="Mercury" />
<area shape="rect" coords="0,0,110,260" href ="sun.html" alt="Sun" />
</map>
注释:area 元素永远嵌套在 map 元素内部。area 元素可定义图像映射中的区域。
注释:<img>中的 usemap 属性可引用 <map> 中的 id 或 name 属性(取决于浏览器),所以我们应同时向 <map> 添加 id 和 name 属性。
<area> 标签定义图像映射中的区域
HTML表格
每个表格由<table>标签开始
每行由<tr>标签开始
每个表格数据由<td>标签开始,每个标签是一个数据单元(table data)数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
用<table>标签的border属性设置边框
用<th>标签设置表头
表格中的空单元格用<td> </td>(空的占位符)处理避免空的单元格的边框没有被显示出来
HTML列表
无序列表
无序列表是一个项目的列表,此列项目使用粗体圆点(典型的小黑圆圈)进行标记。
无序列表始于 <ul> 标签。每个列表项始于 <li>。
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
浏览器显示如下:
Coffee
Milk
列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。
有序列表
有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
浏览器显示如下:
Coffee
Milk
定义列表
自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
浏览器显示如下:
Coffee
Black hot drink
Milk
White cold drink
块元素和内联元素
块元素在浏览器显示时会以新行来开始
例子:<h1>, <p>, <ul>, <table>
内联元素在显示时通常不会以新行开始。
例子:<b>, <td>, <a>, <img>
<span>标签
<span> 标签被用来组合文档中的行内元素。
提示:请使用 <span> 来组合行内元素,以便通过样式来格式化它们。
注释:span 没有固定的格式表现。当对它应用样式时,它才会产生视觉上的变化。
HTML表单和输入
表单
表单是一个包含表单元素的区域。
表单元素是允许用户在表单中(比如:文本域、下拉列表、单选框、复选框等等)输入信息的元素。
表单使用表单标签(<form>)定义。
<form>
...
input 元素
...
</form>
<input>输入标签,输入类型由type属性定义
文本域(Text Fields)
<input type = “text” name = “ name” />name
单选按钮
<input type = “radio” name = “sex” value = “male” />male
<br />
<input type = “radio” name = “sex” value = “female” />female
复选框
<form>
<input type="checkbox" name="bike" />
I have a bike
<br />
<input type="checkbox" name="car" />
I have a car
</form>
表单的动作属性(Action)和确认按钮
当用户单击确认按钮时,表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。
<form name="input" action="html_form_action.asp" method="get">
Username:
<input type="text" name="user" />
<input type="submit" value="Submit" />
</form>
<b>本文是对w3school上课程学习之后所写下的笔记</b>