Html tag usage--text, list, table, hyperlink_html/css_WEB-ITnose

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。

Column table

4. List tag:

图   像

5.   图像标签：

例：

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

6.   图像地图：

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

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

 

   

   

 

: upper-level project

: lower-level project Example:

Game name

;Department name                                                                                                                      Effect: Label corresponding to the bullet in the list

: numeric label (a A 1 i I)

: symbol tag (○●■)
• : specific project content tag. This tag is only valid in
  . Change the bullets through the type attribute. If you want to make a better list, such as black dots represented by pictures, use CSS.

Image td>

5. Image tag: Example: align: attribute defines the arrangement of the image, and border is used to set the border of the image. Src Connect a file 6. Image map:

表   格

7.   表格标签：

组成：标题标签：

单元格标签：

和。

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

行标签：

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

格式：

   

   

      

      

   

   

      

      

   

表格标题

姓名	年龄
张三	23

效果：

   

   

   

   

      

      

   

个人信息
张三	23

效果：

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

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

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

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

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

超  链  接

8.   超链接标签：

两种用法：

一、超链接

例：

新浪

二、定位标记

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

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

例：

标记位置

…….

返回标记位置

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

Table

7. Table tag: Composition: Title tag: Cell label: and where branch downloading is required.

, generally format the first row or column of the table, which is displayed in bold. Not commonly used. Row label:

, load inside the row label. It can be simply understood as, there are rows first, and cells are added in the rows. Format: ;th>Name     >   🎜>

Age	Zhang San

Effect:   >

Personal information

Zhang San

Effect: Each table can have a header, a footer and One or more table bodies (i.e. text), represented by THEAD, TFOOT and TBODY elements respectively. THEAD, TFOOT contain information about table columns. The function of TBODY is to control the downloading of table branches, thereby increasing the download speed. (The web page is opened after all the contents of the table are downloaded before it is displayed. For branch downloads, part of the content can be displayed first, which will reduce the user's waiting time.) The purpose of using TBODY is to make these include The code included does not need to be displayed together after the entire table is parsed. That is to say, if there are multiple rows, then if a TBODY row is obtained, one row can be displayed first. The TBODY tag can control the downloading of tables in separate rows. It is more practical when the table content is large. Add

Super link

8. Hyperlink tag: Two uses: 1. Hyperlink Example: Sina 2. Positioning tag is generally used on this page. When the web page content is too long, the positioning tag will be slower than dragging the scroll bar. Convenient and fast. Note: Positioning tags must be used in conjunction with hyperlinks to be effective. Example: Mark position

……. Return to mark position Note: When using positioning tags Be sure to add the # tag name at the beginning of the href value.

框   架

9.   框架标签：

注：框架标签不可以放到

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

例：

   

   

      

      

   

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

效果：

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

10. 画中画标签：

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

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

Frame

9. Frame tag: Note: The frame tag cannot be placed in . Generally, for the sake of code readability, it will Between and . Example: ; ;   This code will Requires 3 existing html pages, namely: 1.html, 2, html, 3.html Effect: Note: When the frame size does not want to be To change by dragging the mouse, you can add the noresize attribute to the frame tag. This attribute has no attribute value and is called the mark attribute. If added, it is fixed. In the XHTML specification, all attributes must have attribute values, so the attribute value of the mark attribute is itself, such as: noresize=”noresize” 10. Picture-in-picture tag: Frame tags are not very commonly used now, and div css table is used for layout. Frames are rarely used anymore.

tr>

ø表   单ø

11. 表单标签：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

例：

用户名(u)

头  标  签

头标签都放在

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

12.

øTable Singleø

11. Form tag:

Other

16. 让内容动起来。

direction 属性：left right down up

behavior 属性：scroll alternate slide

17.

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

The form tag is the most commonly used tag and is used for interaction with the server.

: Input tag: Receive user input information.

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作为配置文件。

The type attribute specifies the type of input tag.

l text box text. The entered text information is displayed directly in the box.
l Password box password. The entered text is displayed as an origin or asterisk. l radio button such as: gender selection. l Checkbox checkbox Such as: interest selection. l Hidden field hidden is not displayed on the page, but is submitted with other content when submitted. l Submit button submit is used to submit the content in the form. l Reset button reset sets the content filled in the form to the initial value. l Button button can have custom events for it. l File upload file will automatically generate a text box and a browse button after expanding the content. l Image image It can replace the submit button. : Select tag to provide users with content selection. For example: the province or city where the user is located. The size attribute is the number of displayed items. : Subitem label attribute selected has no attribute value and is added to the subitem. On one of the subitems, the subitem becomes the default selected option. : multi-line text box. Such as: personal information description. <label>: used to define shortcut keys for each element. for attribute: Specify the form element that the shortcut key works on. Must be the same as the id value of the form element to be applied. accesskey attribute: Specify the shortcut key. This shortcut key needs to be used in combination with the alt key. Example: <label for="user" accesskey="u">username(u)</label> <input type="text" id="user"> </label>

Header tag

Head tags are placed between the header parts. Includes: title base meta link 12.

Other

16. Let the content move. direction attribute: left right down up behavior attribute: scroll alternate slide 17.

: The text content can be displayed as it is in the code area. on the page.  

XHTML XML td>

XHTML is Extensible HyperText Markup Language. l XHTML was launched by the w3c organization in 2000 to enhance HTML. It was originally intended to replace HTML, but it was found that there were too many web pages written in HTML on the Internet, so it failed! It can be understood that it is an upgraded version of HTML (HTML4.01). l XHTML has a more rigorous code structure and is an application based on XML. XML is Extensible Markup Language (Extensible Markup Language) l XML is a description of data information. HTML is the description of the data display. l XML code regulations are more strict. For example, if the tag does not end, it is considered an error. l The XML specification can be interpreted by more applications and will become a universal data exchange language. l Each server and framework uses XML as a configuration file.