欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  web前端

Html标签使用--文字、列表、表格、超链接_html/css_WEB-ITnose

程序员文章站 2022-04-13 07:51:56
...
Html内容

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

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

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

4. Html代码由开始结束。里面由头部分

和体部分两部分组成。

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

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

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

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

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

l 格式：数据内容标签>

操作思想：

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

常用标签的使用

字 体

1. 字体标签：

例：字体标签示例

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

2. 标题标签：

…..

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

3. 特殊字符：

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

<

>

>

&

&

"

“

®

®

©

©

™

?

空格

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

列 表

4. 列表标签：

：上层项目

：下层项目

例：

游戏名称

星际争霸

红色警戒

部门名称

技术部

培训部

效果：

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

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

    ：符号标签（○●■）

  • ：具体项目内容标签。此标签只在
        中有效。

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

    图 像

    5. 图像标签：Html标签使用--文字、列表、表格、超链接_html/css_WEB-ITnose

    例：Html标签使用--文字、列表、表格、超链接_html/css_WEB-ITnose

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

    6. 图像地图：

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

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

    Html标签使用--文字、列表、表格、超链接_html/css_WEB-ITnose

    表 格

    7. 表格标签：

    组成：标题标签：

    单元格标签：

    和。
    ，给表格提供标题。

    表头标签：

    ，一般对表格的第一行或者第一列进行格式化，就是粗体显示。并不常用。

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

    格式：

    表格标题
    姓名 年龄
    张三 23

    效果：

    个人信息
    张三 23

    效果：

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

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

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

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

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

    超 链 接

    8. 超链接标签：

    两种用法：

    一、超链接

    例：

    新浪

    二、定位标记

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

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

    例：

    标记位置

    …….

    返回标记位置

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

    框 架

    9. 框架标签：

    注：框架标签不可以放到

    ，一般为了代码的可读性，会到和之间。

    例：

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

    效果：

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

    10. 画中画标签：

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

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

    ø表 单ø

    11. 表单标签：

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

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

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

    l 文本框 text。输入的文本信息直接显示在框中。

    l 密码框 password。输入的文本以原点或者星号的形式显示。

    l 单选框 radio 如：性别选择。

    l 复选框 checkbox 如：兴趣选择。

    l 隐藏字段 hidden 在页面上不显示，但在提交的时候随其他内容一起提交。

    l 提交按钮 submit 用于提交表单中的内容。

    l 重置按钮 reset 将表单中填写的内容设置为初始值。

    l 按钮 button 可以为其自定义事件。

    l 文件上传 file 后期扩展内容，会自动生成一个文本框，和一个浏览按钮。

    l 图像 image 它可以替代submit按钮。

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

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

    例：

    头 标 签

    头标签都放在

    头部分之间。包括：title base meta link

    12.

    ：指定浏览器的标题栏显示的内容。 <p>13. <base>：</p> <p>href 属性：指定网页中所有的超链接的目录。可以是本地目录，也可以是网络目录。注意值得结尾处一定要用/表示目录。只作用于相对路径的超链接文件。</p> <p>target 属性：指定打开超链接的方式。如_blank 表示所有的超链接都用新窗口打开显示。</p> <p>14. <meta>：</p> <p>name 属性：网页的描述信息。当取keywords时，content属性的内容就作为搜索引擎的关键字进行搜索。</p> <p>http-equiv 属性：模拟HTTP协议的响应消息头。</p> <p>例：</p> <p><meta http-equiv="refresh" content="3;url=http://www.sina.com.cn"></p> <p>表示打开此页面3秒后自动转到新浪页面。</p> <p>15. <link>：</p> <p>rel 属性：描述目标文档与当前文档的关系。</p> <p>type 属性：文档类型。</p> <p>media：指定目标文档在哪种设备上起作用。</p> <p>例：</p> <p><link rel="stylesheet" type="text/css" media="screen,print" href="a.css"></p>

    Other

    16. 让内容动起来。

    direction 属性：left right down up

    behavior 属性：scroll alternate slide

    17. 

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

    XHTML XML

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

    l XHTML是w3c组织在2000年的时候为了增强HTML推出的，本来是想替代HTML，但是发现Internet上用HTML写的网页太多，未遂！可以理解为它是HTML一个升级版（HTML4.01）。

    l XHTML的代码结构更为严谨，是基于XML的一种应用。

    XML是可扩展标记语言（Extensible Markup Language）

    l XML是对数据信息的描述。HTML是数据显示的描述。

    l XML代码规定的更为严格，如：标签不结束被视为错误。

    l XML规范可以被更多的应用程序所解释，将成为一种通用的数据交换语言。

    l 各个服务器，框架都将XML作为配置文件。
    Html标签使用--文字、列表、表格、超链接_html/css_WEB-ITnose

    声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn核实处理。

    相关文章

    相关视频

    网友评论

    文明上网理性发言，请遵守 新闻评论服务协议

    我要评论
  • Html标签使用--文字、列表、表格、超链接_html/css_WEB-ITnose

    • 专题推荐

    作者信息
    Html标签使用--文字、列表、表格、超链接_html/css_WEB-ITnose

    认证0级讲师

    发布技术文章
    • 最新文章
    • 热门排行
    推荐视频教程
  • Html标签使用--文字、列表、表格、超链接_html/css_WEB-ITnosejavascript初级视频教程
  • Html标签使用--文字、列表、表格、超链接_html/css_WEB-ITnosejquery 基础视频教程
    • 视频教程分类

    ：公益在线php培训，帮助PHP学习者快速成长！

    Copyright 2014-2021 https://www.php.cn/ All Rights Reserved | 苏ICP备2020058653号-1Html标签使用--文字、列表、表格、超链接_html/css_WEB-ITnose关于我们免责申明赞助与捐赠广告合作

    Html标签使用--文字、列表、表格、超链接_html/css_WEB-ITnose   Html标签使用--文字、列表、表格、超链接_html/css_WEB-ITnose
    相关标签： Html标签使用--文字、列表、表格、超链接

    上一篇： 如何使用纯CSS实现iPhone 价格信息图（附源码）

    下一篇： sass+require实现侧边栏

    推荐阅读