2020.2.29 HTML

2020-02-29 本文已影响0人是桃子气泡水呀

HTML样式-CSS
CSS（Cascading Style Sheet）可译为“层叠样式表”或“级联样式表”，它定义如何显示 HTML 元素，用于控制Web页面的外观。通过使用CSS实现页面的内容与表现形式分离，极大提高了工作效率。样式存储在样式表中，通常放在<head>部分或存储在外部CSS文件中。
网页现在的新标准是W3C。目前的模式是html+css+javascript，如何理解呢，就是html是网页的结构，CSS是网页的样式，javascript是行为。

CSS 可以通过以下方式添加到HTML中:

内联样式- 在HTML元素中使用"style" 属性。当特殊的样式需要应用到个别元素时，就可以使用内联样式。

<p style="color:blue;margin-left:20px;">This is a paragraph.</p>

内部样式表 -在HTML文档头部 <head> 区域使用<style> 元素来包含CSS。当单个文件需要特别样式时，就可以使用内部样式表。

<head>
 <style type="text/css">
 body {background-color:yellow;}
 p {color:blue;}
 </style>
 </head>

外部引用 - 使用外部 CSS 文件。当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。

<head>
 <link rel="stylesheet" type="text/css" href="mystyle.css">
 </head>

最好的方式是通过外部引用CSS文件。

HTML图像

使用<img>标签定义 HTML 页面中的图像。<img>标签有两个必需的属性：src和alt。

<img>是空标签，意思是说，它只包含属性，并且没有闭合标签。要在页面上显示图像，你需要使用源属性src。src指 "source"。源属性的值是图像的 URL 地址。

<img src="url" alt="some_text">

alt属性用来为图像定义一串预备的可替换的文本。

<img src="boat.gif" alt="Big Boat">

在浏览器无法载入图像时，替换文本属性告诉读者他们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。

height（高度）与width（宽度）属性用于设置图像的高度与宽度。

<img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228">

指定图像的高度和宽度的一个很好的习惯。如果图像指定了高度宽度，页面加载时就会保留指定的尺寸。如果没有指定图片的大小，加载页面时有可能会破坏HTML页面的整体布局。

在<img>标签中您可以使用border属性以像素为单位指定边框粗细。厚度为 0 表示图片周围没有边框。

<img src="/statics/images/course/pulpit.jpg" alt="Pulpit rock" border = "3">

默认情况下，图像在页面中将显示为左侧对齐，在<img>标签中您可以使用align属性将设置图像的对齐方式：center(居中)或right(右侧)。

<img src="/statics/images/course/pulpit.jpg" alt="Pulpit rock" align="right">

<map> 定义图像地图
<area> 定义图像地图中的可点击区域

HTML表格

HTML 表格的基本结构：
<table>…</table>：定义表格
<th>…</th>：定义表格的标题栏（文字加粗）、居中
<tr>…</tr>：定义表格的行
<td>…</td>：定义表格的列

<table border="1">
   <tr>
       <td>row 1, cell 1</td>
       <td>row 1, cell 2</td>
   </tr>
   <tr>
       <td>row 2, cell 1</td>
       <td>row 2, cell 2</td>
   </tr>
</table>

HTML 表格和边框属性
如果不定义边框属性，表格将不显示边框。使用边框属性border来显示一个带有边框的表格：

<table border="1">
    <tr>
        <td>Row 1, cell 1</td>
        <td>Row 1, cell 2</td>
    </tr>
</table>

<caption> 定义表格标题 此标签在较新版本的HTML / XHTML中已弃用。

HTML表格高度和宽度
在<table>标签中您可以使用width（宽）和height（高）属性设置表格宽度和高度。您可以按像素或可用屏幕区域的百分比来指定表格宽度或高度。

<table border = "1" width = "400" height = "150">
    <tr>
        <td>Row 1, Column 1</td>
        <td>Row 1, Column 2</td>
    </tr>
    <tr>
        <td>Row 2, Column 1</td>
        <td>Row 2, Column 2</td>
    </tr>
</table>

HTML表格的背景

bgcolor属性 - 可以为整个表格或仅为一个单元格设置背景颜色。

background属性 - 可以为整个表设置背景图像或仅为一个单元设置背景图像。使用background属性需要提供图像 URL 地址。

bordercolor属性 - 可以设置边框颜色。

HTML表格空间

cellspacing属性-定义表格单元格之间的空间

cellpadding属性-表示单元格边框与单元格内容之间的距离

HTML表格头部、主体、页脚
<thead>定义表格的页眉
<tbody>定义表格的主体
<tfoot>定义表格的页脚
表可以包含多个<tbody>元素以指示不同的页面。
但值得注意的是<thead>和<tfoot>标签应出现在<tbody>之前。

HTML列表

HTML无序列表
无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。无序列表适合成员之间无级别顺序关系的情况。无序列表使用 <ul> 标签：

 <ul>
 <li>Coffee</li>
 <li>Milk</li>
 </ul>

HTML有序列表
有序列表始于<ol> 标签。

<ol>
 <li>Coffee</li>
 <li>Milk</li>
 </ol>

HTML 自定义列表
自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

 <dl>
 <dt>Coffee</dt>
 <dd>- black hot drink</dd>
 <dt>Milk</dt>
 <dd>- white cold drink</dd>
 </dl>

HTML表单

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

<form>
.
input elements
.
</form>

输入元素
<input>元素是最重要的表单元素。
输入类型是由类型属性（type）定义的。

文本域通过<input type="text"> 标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域。

<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>

密码字段通过标签<input type="password">来定义。密码字段字符不会明文显示，而是以星号或圆点替代。

<form>
Password: <input type="password" name="pwd">
</form>

<input type="radio">标签定义了表单单选框选项。

<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>

<input type="checkbox">定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。

<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car 
</form>

<input type="submit">定义了提交按钮.
当用户单击确认按钮时，表单的内容会被传送到另一个文件。

<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>

<form>定义供用户输入的表单
<input>定义输入域
<textarea>定义文本域 (一个多行的输入控件)
<label>定义了 <input> 元素的标签，一般为输入标题
<fieldset>定义了一组相关的表单元素，并使用外框包含起来
<legend>定义了 <fieldset> 元素的标题
<select>定义了下拉选项列表
<optgroup>定义选项组
<option>定义下拉列表中的选项
<button>定义一个点击按钮
<datalist> 指定一个预先定义的输入控件选项列表
<keygen>定义了表单的密钥对生成器字段
<output>定义一个计算结果

HTML框架

<iframe>标签规定一个内联框架。
一个内联框架被用来在当前 HTML 文档中嵌入另一个文档。通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。

<iframe src="URL"></iframe>

该URL指向不同的网页。将窗口内容显示为URL地址指向页面。

height和width属性用来定义iframe标签的高度与宽度。

frameborder属性用于定义iframe表示是否显示边框。设置属性值为 "0" 移除iframe的边框。

HTML颜色
HTML 颜色采用的是 RGB 颜色，是通过对红(R)、绿(G)、蓝(B)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的，RGB即是代表红、绿、蓝三个通道的颜色。
具体看这：https://www.w3cschool.cn/html/html-colors.html

2020.2.29 HTML

猜你喜欢

热点阅读