Html总结

最新推荐文章于 2024-05-02 21:34:43 发布

pengkv

最新推荐文章于 2024-05-02 21:34:43 发布

阅读量738

点赞数

文章标签： html 语言浏览器

本文链接：https://blog.csdn.net/pengkv/article/details/25957773

版权

wHTML 简介

ü HTML（HyperText Mark-up Language，超文本标记语言），是构成网页文档的主要语言

ü网页上看到的文字、图形、动画、声音、表格、链接等元素大部分都是由 HTML语言描述的

ü HTML 语言的基本组成部分是各种标签，一张生动的网页往往含有大量的标签

ü使用标签，实际上就是采用一系列指令符号来控制输出的效果

ü如：<BR>，是最常使用的控制格式的标签，它表示在网页上换行

üHTML 有两种类型的标签，一类是单标签，<BR>就是一种单标签，它只需要单独一组符号就可以表示完整的功能

ü另一类是双标签，形如<B>内容</B>，表示将"内容"显示为粗体，这种标签所围绕的内容就是标签作用的作用域

üHTML 语言对于大小写不敏感，比如表示 HTML 文档的标签：<html> </html>，可写为<HTML> </ HTML>，甚至可以写为<HtmL></htMl>

ü一般推荐，自始至终使用同一种书写方式

HTML 文档的基本结构如下：

<html> 
	<head> 
       头部信息
	</head> 
	<body> 
	  主体 
	</body> 
</html>

w文字布局及字体标签

ü 标题、换行、段落标签

Ÿ<hn>是标题标签，形式是<hn>内容</hn>，n取1～6

Ÿ<br>是换行标签，在需要换行的地方加上此标签即可

Ÿ<p>是段落标签，形式是<p>内容</p>，常用属性align

<hr>是水平线段标签，此标签较为常用的属性有：

Ÿsize：水平线的宽度，单位为像素

Ÿwidth：水平线的长，如不设置则默认为页面长度，单位默认为像素，但也可以使用百分制，如 width=50%表示长度为页面长度的50%

<hr>是水平线段标签，此标签常用的属性有：

Ÿalign：水平线的对齐方式，有 left、center、right。

Ÿnoshade：无阴影属性，若设置，则线段为实心线段

Ÿcolor：线段内部的颜色

ü 文字设计标签

<font>是字体标签，此标签常用的属性有：

Ÿsize：用来设置字体大小，有两种写法：一种为 size=X，其中 X 为从 1 到7，值越大，字体越大，属性值 3 是默认大小；另一种方法是 size=+X 或-X，X 同样为从 1 到 7 的值，意思是以基准字体大小为标准大 X 号字体或者小 X 号字体

Ÿface：用来设置字体类型，默认为宋体。需要注意的是，只有电脑中安装的字体才可以在浏览器中出现相应风格，如果用户没有安装该字体，则会显示默认字体的风格

Ÿcolor：用于设置字体颜色

Ÿ常见的设置文字风格的标签有：

Ÿ<b>内容</b>：将内容设置为粗体

Ÿ<u>内容</u>：将内容设置下划线

Ÿ<i>内容</i>：将内容设置为斜体

Ÿ<sup>内容</sup>：将内容设置为上标

Ÿ<sub>内容</sub>：将内容设置为下标

w列表标签分为两种，一种是有序的，一种是无序的

w<ul>内容</ul>，表示它所包围的内容是无序列表标签，即列表中每一项目前不会加上序号，而是会加上●、○、■等符号。其中列表的每一项用<li>列表项</li>标示。

w<ol>内容</ol>表示有序标签，意义与使用方法和无序列表标签大致相同，不同点为它会在每个列表项前加上数字

w表格基本设计

ü编写表格所用到的标签如下：

Ÿ<table></table>：定义表格，表格所有内容都写在这个标签内

Ÿ<caption></caption>：定义标题，自动出现在整张表格的上方

Ÿ<tr></tr>：定义表行

Ÿ<th></th>：定义表头，包含在<tr></tr>之间，文字会自动粗体

Ÿ<td></td>：定义表元(表格的具体数据)，包含在<tr></tr>之间

w 以下为制作表格标签中的公共属性

üalign：水平布局方式，left、right、center，默认左对齐

übgcolor：设置背景颜色

üborder：设置边框宽度，取整数，默认值 0即没有边框

üwidth：宽度，默认单位为像素，也可以使用百分制单位

üheight：高度，默认单位为像素；也可以使用百分制单位

w 对于整张表格，以下为 <table> 标签常用属性

übordercolor：表格边框的颜色，默认为黑色

ücellpadding：表元边框的宽度

ücellspacing：表元的边框与表格边框之间的宽度

w 合并单元格必须对 <td> 标签中的 rowspan 、 colspan 进行设置，属性值都为整数，默认为 1 ，表示没有合并。

w 这两个属性的意思分别为：从该表元起，该表元在行或者列上占有的单元格数，比如设置某个 <td> 标签 rowspan=2 ，表示该表元及其下面的表元合并成一个

     <html>
      <body>
       <table bgcolor="#ffff99" border="1" width="700">
        <tr align="left">
         <td colspan="2">横向合并</td>
        </tr>
        <tr align="center">
          <td>第二行第一格</td>
          <td>第二行第二格</td>
          <td>第二行第三格</td>
        </tr>
       </table>  
      </body>
     </html>

w 链接标签可以链接到另一个页面，它的写法是 <a> 内容 </a> ，标签内的内容为链接所显示的内容，可以是文字、空格占位符、图片等

w 此标签的一个重要属性是： href ，它的值表示链接所指向的资源地址

w 以下为图片标签常用的标签

ü src ：表示图片储存的位置

ü width ， height ， border ， align ：作用与前文所提到属性相同

ü alt ：当图片未载入或者载入失败时提供的替代性的文字说明

	<html>
 	  <body>
 	    这是A页面
	    <a href="1_4_2.html">转到B页面</a>
 	  </body>
	</html> 
	<!--例1_4_2-->
	<html>
	  <body>
 	    这是B页面
  	    <img src="1_4_2.jpg" width="100" border="2" align="top">
 	  </body>
	</html>

表单元素最基本的标签是<input>标签

属性type 可以为以下值：

ütext：文本框，text 也为 type 的默认属性

üpassword：密码框

üradio：单选按钮，可以将多个单选按钮的 name 属性设置相同，使其成为一组。checked属性可设置默认被选

ücheckbox：复选框，checked 属性可设置默认被选

üreset：重置按钮，按下之后，所有的表单元素内容变为默认值

übutton：普通按钮

üsubmit：提交按钮，按下之后，网页会将表单的内容提交给 action 设定的网页，action的值为空时提交给本页

üimage：图片，但是点击它的效果与提交按钮一样，都会提交表单

w<textarea></textarea>表示多行文本框，rows属性表示其行数，cols属性表示其列数

w<select></select>表示下拉菜单，选项使用<option></option>表示，multiple属性表示多选，size属性为下拉菜单显示的项目数

<html>
 <body>
  欢迎注册<br>
  <form>
     输入帐号：<input type="text"><br>
     输入密码：<input type="password"><br>
     选择性别：<input type="radio" name="sex" checked>男
     <input type="radio" name="sex">女<br>
     选择爱好：<input type="checkbox">唱歌
     <input type="checkbox">跳舞
     <input type="checkbox" checked>打球
     <input type="checkbox">打游戏<br>
     <input type="submit" value="注册">
     <input type="reset" value="清空"> 
     <input type="button" value="普通按钮">   
  </form></body></html>

<html><body>
  <form>
    填写个人信息：<br>
    <textarea rows="5" cols="20"></textarea><br>
    选择家乡：
    <select>
     <option>上海</option>
     <option selected>北京</option>
     <option>纽约</option>
    </select><br>
    选择爱好：<br>
    <select size="5" multiple>
     <option>唱歌</option>
     <option selected>打球</option>
     <option>游戏</option>
    </select><br>
  </form></body></html>

w<frameset>框架标签，属性rows、cols

w<frame>标签是框架中的内容，表示一个窗口

w<frame>属性src是地址，noresize表示大小不可变，scrolling表示是否有滚动条

<frame src=“left.html” noresize scrolling=“no”

name="left"></frame>

<frame src=“right.html” noresize scrolling=“no”

name="right"></frame>

</frameset>

w在链接时，可以根据target属性，确定目标位置

<html>
 <frameset rows="20%,80%" border="5"> 
   <frame src="1_7_3.html" noresize scrolling="no" name="top"></frame> 
   <frameset cols="30%,70%"> 
      <frame src="1_7_1.html" noresize scrolling="no" name="left"></frame>
      <frame src="1_7_2.html" noresize scrolling="no" name="right"></frame>
   </frameset>
 </frameset>
</html> 
<!--例1_7_1-->
<html><body>这是左框架</body></html> 
<!--例1_7_2-->
<html><body>这是右框架</body></html> 
<!--例1_7_3-->
<html><body>这是上框架</body></html>

pengkv

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Html总结

wHTML简介ü HTML（HyperText Mark-up Language，超文本标记语言），是构成网页文档的主要语言ü网页上看到的文字、图形、动画、声音、表格、链接等元素大部分都是由 HTML语言描述的ü HTML 语言的基本组成部分是各种标签，一张生动的网页往往含有大量的标签ü使用标签，实际上就是采用一系列指令符号来控制输出的效果ü如：，是最常使用
复制链接

扫一扫