HTML语言基础应用

时间 2020-08-04

标签 html 语言基础应用栏目 HTML 繁體版

原文原文链接

Html文档能够包含的内容：javascript

文本：html

HTML对文本的支持是最丰富的，你能够设置不一样级别的标题，分段和换行，能够指定文本的语义和外观，能够说明文本是引用自其它的地方，等等等等。java

连接浏览器

连接用来指出内容与另外一个页面或当前页面某个地方有关。框架

图片ide

图片用于使页面更加美观，或提供更多的信息。布局

列表字体

列表用于说明一系列条目是彼此相关的。url

表格spa

表格是按行与列将数据组织在一块儿的形式。也有很多人使用表格进行页面布局。

表单

表单一般由文本输入框，按钮，多选框，单选框，下拉列表等组成，使HTML页面更有交互性。

框架

框架使页面里能包含其它的页面。

Html语言有几个部分组成：

<html></html>标签，其包含两个部分<head></head>和<body></body>。

<head></head>用于包含整个文档的信息，如<title></title>标签表示为浏览器标签内容。

<body></body>是html语言的主要构成部分，连包含了众多内容。

<a href=“”></a>在body内提供跳转的页面地址，a表示超连接能够包含文本，也能够包含图片，href属性指定连接到地址。

因为html的标签均用尖括号，若是要在文本中使用尖括号，须要转义，html提供的转义用&lt表示<,&gt表示大于。而“&”用&amp表示。

<div></div>分类，一般用div定义页面的各个模块、位置。

font定义字体的尺寸、类型、颜色。

<font size="6" color="red" face="微软雅黑">字体</font>

还有一些字体效果如：<b>加粗</b>，<u>下划线</u>， <i>斜线</i>

<h1>,<h2>,<h3>,<h4>,<h5>,<h6>用于表示一级标题、二级标题、三级标题...

<hr>用于在页面添加横线，能够指定横线的宽度和颜色

<hr width="100%" color="red" />

<img>标签用于添加图片，src属性指定图片的地址，其中src指定的路径在window下为相对路径，格式为.\path\to\p_w_picpaths。若是src未指定图片位置，一般页面会显示alt属性定义的文本。<img src='.\工做文件\CCS功能.PNG' alt="tupian"></img>

<a href=>
   <img src=".\工做文件\CCS功能.PNG" alt="html30分钟简易教程">
</a>

<table><\table> HTML文档在浏览器里一般是从左到右，从上到下地显示的，到了窗口右边就自动换行。为了实现分栏的效果，不少人使用表格（<table>）进行页面排版（虽然HTML里提供表格的本意不是为了排版）。

<tr>表明表格里的一行。<tr>标签又会包含<td>标签，每一个<td>表明一个单元格。

<tr>标签还能够被<table>里的<thead>或<tbody>或<tfoot>包含。它们分别表明表头，表正文，表脚。在打印网页的时候，若是表格很大，一页打印不完，<thead>和<tfoot>将在每一页出现。

<th>和<td>很是类似，也用在<tr>里边，不一样的是<th>表明这个单元格是它所在的行或列的标题。

  <table>
  <thead>
   <tr>
    <th>时间</th><th>地点</th>
   </tr>
  </thead>
  <tbody>
   <tr>
    <td>2000</td><td>悉尼</td>
   </tr>
   <tr>
    <td>2004</td><td>雅典</td>
   </tr>
   <tr>
    <td>2000</td><td>北京</td>
   </tr>
   </tbody>
  </table> 
 </body>
</html>

表格用于表示二维数据（行，列），一维数据则用列表表示。列表能够分为无序列表（<ul>），有序列表（<ol>）和定义列表（<dl>）。前两种列表更常见一些，都用<li>标签包含列表项目。

<ul>
  <li>章节1</li>
  <li>章节2</li>
  <li>章节3</li>
</ul>
<ol>
  <li>打开冰箱门</li>
  <li>把大象赶进去</li>
  <li>关上冰箱门</li>
</ol>

html透明效果

方法1
background-color：rgba（0,152,50,0.7）70%不透明
background-color:transparent;彻底透明
方法2
background:url(path/my_png_bg.png) no-repeat center center scroll;
方法3
background:url(path/my_bg.jpg) no-repeat center center scroll; opacity:0.7;
IE6-IE8的方式
background-color:rgb(0,152,50);
scroll;opacity:0.7;
filter:alpha(opacity=70);

注意：opacity或者alpha的值强调的是“不”透明度