zoukankan      html  css  js  c++  java

  • Html标签使用——文字、列表、表格、超链接

    注：文章来源于传智播客毕向东老师使用课件和网络。整理学习如下：

    一、Html内容

    1.   Html就是超文本标记语言的简写，是最基础的网页语言。

    2.   Html是通过标签来定义的语言，代码都是由标签所组成。

    3.   Html代码不用区分大小写。

    4.   Html代码由<html>开始</html>结束。里面由头部分<head></head>和体部分<body></body>两部分组成。

    5.   头部分是给Html页面增加一些辅助或者属性信息，它里面的内容会最先加载。

    体部分是真正存放页面数据的地方。

    l  多数标签都是有开始标签和结束标签，其中有个别标签因为只有单一功能，或者没有要修饰的内容可以在标签内结束。

    l  想要对被标签修饰的内容进行更丰富的操作，就用到了标签中的属性，通过对属性值的改变，增加了更多的效果选择。

    l  属性与属性值之间用“=”连接，属性值可以用双引号或单引号或者不用引号，一般都会用双引号。或公司规定书写规范。

    l  格式：<标签名属性名=’属性值’>数据内容</标签>

    <标签名属性名=’属性值’/>

    l  操作思想：

          为了数据操作都需要将数据进行不同标签的封装，通过标签中的属性对封装的数据进行操作。标签就详单与容器。对容器中的数据进行操作，就是在不断地改变容器中的属性值。

    二、常用标签的使用

    1、字  体

    1.   字体标签：<font>

    例：<font size=5 color=red>字体标签示例</font>

    注：简单颜色可是直接写对应的英文，复杂颜色用16进制表示，表现形式#FF0000两个数为一组，按红，绿，蓝排列，如：#00FF00表示绿色。建议用工具选取。

    2.   标题标签：<h1><h2>…..<h6>

    因为标题是文本中常用的内容，为了方便操作而定义的。其实就是某个字号和粗体的组合。

    3.  特殊字符：

    如果要在网页上显示一些特殊符号，比如< > & 等。因为这些符号在代码中会被浏览器识别并解释，所以用一些特殊的方式来表示。

    &lt;

    < 

    &gt;

    > 

    &amp;

    &

    &quot;

    “

    &reg;

    ®

    &copy;

    ©

    &trade;

    ™

    &nbsp;

    空格

    注：在Dreamweaver8中都具有联想功能。

    2、列   表

    4. 列表标签：<dl>

    <dt>：上层项目

    <dd>：下层项目

    例：

    <dl>
    <dt>游戏名称</dt>
       <dd>星际争霸</dd>
       <dd>红色警戒</dd>
    <dt>部门名称</dt>
       <dd>技术部</dd>
       <dd>培训部</dd>
</dl>

    效果：

    列表中项目符号对应的标签

    <ol>：数字标签（a A 1 i I）

    <ul>：符号标签（○●■）

    <li>：具体项目内容标签。此标签只在<ol> <ul>中有效。

    通过type属性更改项目符号，如果想做出效果更好的列表，如：黑色圆点用图片表示，就用到CSS。

    3、图   像

    5.   图像标签：<img>

    例：<img src=”1.jpg” align=”middle” border=”3” alt=”图片说明文字”/>

    align:属性定义图片的排列方式，border用来设置图像的边框。Src  连接一个文件

    6.   图像地图：<map>

    应用：当要在图像中选取某一部分作为连接的时候。如：中国地图每个省所对应的区域。

    map标签要和img标签联合使用。Href是超连接

    <img src="Sunset.jpg"alt="图片说明文字" usemap="#Map"/>
 <map >
   <area shape="rect" coords="50,59,116,104"href="1.html" />
   <area shape="circle" coords="118,203,40"href="2.html" />
  </map>

    4、表   格

    7.  表格标签：<table>

    组成：标题标签：<caption>，给表格提供标题。

    表头标签：<th>，一般对表格的第一行或者第一列进行格式化，就是粗体显示。并不常用。

    行标签：<tr>

    单元格标签：<td>，加载行标签的里面。可以简单理解为，先有行，在行中在加入单元格。

    格式：

    <table border="1" width=”40%”><!—width值为百分比可以让表格的宽度随浏览器窗口的大小变化-->
	<caption>表格标题</caption>
	<tr><!-- 第一行 -->
		<th>姓名</th>
		<th>年龄</th>
	</tr>
	<tr algin=”center”><!-- 第二行 -->
		<td>张三</td>
		<td>23</td>
	</tr>
</table>
    效果：
    姓名 年龄
    张三 23 

    <table border="1" width="40%">
<tr>
	<tr>
	<th colspan="2"> <!-- colspan：th标签占两列 -->
	个人信息
	</th>
	</tr>
	<tr align="center">
		<td>张三</td>
		<td>23</td>
	</tr>
</tr>
</table>

    效果：


    每个表格可以有一个表头、一个表尾和一个或多个表体（即正文），分别以THEAD、TFOOT和TBODY元素表示。

    THEAD、TFOOT包含关于表格列的信息。

    TBODY作用是：可以控制表格分行下载，从而提高下载速度。（网页的打开是先表格的的内容全部下载完毕后，才显示出来，分行下载可以先显示部分内容，这样会减少用户等待时间。）

    使用TBODY的目的是可以使得这些包含在内的代码不用在整个表格都解析后一起显示，就是说如果有多个行，那么如果得到一个TBODY行，就可以先显示一行。

    TBODY这个标签可以控制表格分行下载，当表格内容很大时比较实用，在需要分行下载处加上<tbody>和</tbody>。

    5、超链接

    8.   超链接标签：<a>

    两种用法：

    一、超链接<a href=””>

    例：

    <a href=”http://www.sina.com.cn” target=”_blank”>新浪</a>

    <!-- href属性值可以是url，也可以是本地文件。target属性是指定在哪个窗口或者帧中打开。 -->

    二、定位标记<a name=””>

    一般在本页面中使用，当网页内容过长，定位标记会比拖动滚动条方便快捷。

    注：定位标记要和超链接结合使用才有效。

    例：

    <a name=”标记”>标记位置</a>

    <p>…….<!--很多空行以制造网页过长的效果 -->

    <a href=”#标记”>返回标记位置</a>

    注：使用定位标记时一定在href值的开始加入#标记名。

    6、框架

    9.   框架标签：<frameset>

    注：框架标签不可以放到<body>，一般为了代码的可读性，会到<head>和<body>之间。

    例：

    <p><framesetrows="10%,*"></p><p>    <framesrc="1.html" name="top" /></p><p>    <framesetcols="30%,*"></p><p>       <framesrc="2.html" name="left" /></p><p>       <framesrc="3.html" name="right" /></p><p>    </frameset></p><p></frameset></p>

    这段代码会需要已经存在的3个html页面，分别是：1.html,2,html,3.html

    效果：


    注：当框架大小不想被鼠标拖动而改变，可以在frame标签中加入noresize属性，这个属性没有属性值，称为标记属性，加上就为固定。在XHTML的规范中，所有的属性都要有属性值，那么标记属性的属性值就是自身，如：noresize=”noresize”

    10.  画中画标签：<iframe>

    <iframe src=”1.html” >

    很遗憾，画中画你没有看到，因为你的浏览器不支持iframe标签。

    </iframe>

    框架标签现在不是很常用，布局都用div+css+table。框架很少使用了。

    7、表单

    11.  表单标签：<form>

    表单标签是最常用的标签，用于与服务器端的交互。

    <input>：输入标签 ：接收用户输入信息。

    其中的type属性指定输入标签的类型。

    • 文本框 text。输入的文本信息直接显示在框中。
    • 密码框 password。输入的文本以原点或者星号的形式显示。
    • 单选框 radio 如：性别选择。
    • 复选框 checkbox 如：兴趣选择。
    • 隐藏字段 hidden 在页面上不显示，但在提交的时候随其他内容一起提交。
    • 提交按钮 submit 用于提交表单中的内容。
    • 重置按钮 reset 将表单中填写的内容设置为初始值。
    • 按钮 button 可以为其自定义事件。
    • 文件上传 file 后期扩展内容，会自动生成一个文本框，和一个浏览按钮。
    • 图像 image 它可以替代submit按钮。

    <select>：选择标签 提供用户选择内容。如：用户所在的省市。size 属性为显示项目个数。

    <option>：子项标签 属性 selected 没有属性值，加在子项上，其中一个子项上，子项就变成默认被选项。

    <textarea>：多行文本框。如：个人信息描述。

    <label>：用于给各元素定义快捷键。

    for 属性：指定快捷键作用的表单元素。必须与要作用的表单元素的id值相同。

    accesskey 属性：指定快捷键，此快捷键需要和alt键组合使用。

    例：

    <label for="user"accesskey="u">用户名(u)</label>

    <inputtype="text" id="user" />

    8、头  标  签

    Other

    头标签都放在<head></head>头部分之间。包括：title base meta link

    12.   <title>：

    指定浏览器的标题栏显示的内容。

    13.   <base>：

    href 属性：指定网页中所有的超链接的目录。可以是本地目录，也可以是网络目录。注意值得结尾处一定要用/表示目录。只作用于相对路径的超链接文件。

    target 属性：指定打开超链接的方式。如_blank 表示所有的超链接都用新窗口打开显示。

    14.   <meta>：

    name 属性：网页的描述信息。当取keywords时，content属性的内容就作为搜索引擎的关键字进行搜索。

    http-equiv 属性：模拟HTTP协议的响应消息头。

    例：

    <metahttp-equiv="refresh" content="3;url=http://www.sina.com.cn"/>

    表示打开此页面3秒后自动转到新浪页面。

    15.   <link>：

    rel 属性：描述目标文档与当前文档的关系。

    type 属性：文档类型。

    media：指定目标文档在哪种设备上起作用。

    例：

    <linkrel="stylesheet" type="text/css" media="screen,print"href="a.css" />

    9、Other

    16.<marquee>

    direction 属性：left right down up

    behavior 属性：scroll alternate slide

    17.<pre>：

    可以将文本内容按在代码区的样子显示在页面上。

    三、XHTML   XML比较

    XHTML是可扩展的超文本标记语言（ExtensibleHyperText Markup Language）。

    • XHTML是w3c组织在2000年的时候为了增强HTML推出的，本来是想替代HTML，但是发现Internet上用HTML写的网页太多，未遂！可以理解为它是HTML一个升级版（HTML4.01）。
    • XHTML的代码结构更为严谨，是基于XML的一种应用。
    • XML是可扩展标记语言（Extensible MarkupLanguage）
    • XML是对数据信息的描述。HTML是数据显示的描述。
    • XML代码规定的更为严格，如：标签不结束被视为错误。
    • XML规范可以被更多的应用程序所解释，将成为一种通用的数据交换语言。
    • 各个服务器，框架都将XML作为配置文件。
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>html测试Sunsea</title>
</head>

<body>
	<a href="http://cxxy.seu.edu.cn"><img src="img2_small.jpg" ="访问东大"title="访问东大成贤"/></a>

<hr color="#CC9933" size="8"/>	

	<a name="top">顶部位置</a>
	
	<a href="http://www.baidu.com" target="_blank">百度网站</a>
<br />
	<a href="mailto:xiangyang_zhu@163.com?subject=主题&cc=kk@sina.com">联系我们</a>
<br />
	<a href="thunder://hahaa">唐山大地震枪版</a>

<hr color="#CC9933" size="8"/>	
	
	<img src="testImg.jpg" alt="aaa测试图片" height="560" width="390" border="10"/>
	
<hr color="#CC9933" size="8"/>
	<table border="1" bordercolor="#CC3366" width="70%" cellspacing="0" cellpadding="10">
		<caption>表格标题</caption>
		<tbody>
		<tr>
			<th colspan="2">单元格1</th> <!--如果是列用Rolspan-->
			<!--th>单元格2sfs</th-->
		</tr>
		</tbody>
		<tbody>
		<tr>
			<td align="center"><b>单元格1</b></td>
			<td>单元格2</td>
		</tr>
		</tbody>
	</table>
<a href="#top">回到顶部</a> <!--这里面要用#，强制定位标记，而不启动文件引擎"矛"-->
</body>
</html>
  • 相关阅读:
    Adobe Illustrator CS6 界面文字按钮太小，高分屏win10PS/AI等软件界面字太小解决方法
    暗网，又称深网。据估计，暗网比表面网站大几个数量级。
    HexDump.java解析,android 16进制转换
    excel第一次打开报错 向程序发送命令时出错 多种解决办法含终极解决方法
    小黄人IP营销的四种玩法思维导图
    Window下PHP三种运行方式图文详解,window下的php是不是单进程的？
    全球海底光缆分布图
    redis删除单个key和多个key，ssdb会落地导致重启redis无法清除缓存
    图解人工智能机器学习深度学习的关系和区别
    B轮公司技术问题列表
  • 原文地址：https://www.cnblogs.com/xiangyangzhu/p/4260835.html
Copyright © 2011-2022 走看看