1.<a>标签,是内联标签

href:需要跳转的网址

2.id属性:

相当于一个身份证

例如:

设置id属性

3.列表标签

<ul>: 无序列表 [type属性:disc(实心圆点)(默认)、circle(空心圆圈)、square(实心方块)]

<ol>: 有序列表

<li>:列表中的每一项.

<dl>  定义列表

<dt> 列表标题

<dd> 列表项

 

4.表格标签

表格是一个二维数据空间,一个表格由若干行组成,一个行又有若干单元格组成,单元格里可以包含文字、列表、图案、表单、数字符号、预置文本和其它的表格等内容。

表格最重要的目的是显示表格类数据。表格类数据是指最适合组织为表格格式(即按行和列组织)的数据。

表格的基本结构:
<table>
<tr>
<td>标题</td>
<td>标题</td>
</tr> <tr>
<td>内容</td>
<td>内容</td>
</tr>
</table>

属性:

border: 表格边框.

cellpadding: 内边距

cellspacing: 外边距.

width: 像素 百分比.(最好通过css来设置长宽)

rowspan:  单元格竖跨多少行

colspan:  单元格横跨多少列(即合并单元格)

 练习:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
td{
text-align: center; #设置居中
}
</style>
</head>
<body>
<table border="2px" cellpadding="20px" cellspacing="1px">
<tr>
<th colspan="3">星期一菜谱</th>
</tr>
<tr>
<td rowspan="2">素菜</td>
<td>清炒茄子</td>
<td>花椒扁豆</td>
</tr>
<tr> <td>清炒茄子</td>
<td>花椒扁豆</td>
</tr>
<tr>
<td rowspan="2">荤菜</td>
<td>油焖大虾</td>
<td>海参鱼翅</td>
</tr>
<tr> <td>红烧肉<img src="https://www.baidu.com/img/bd_logo1.png" width="150" height="180"></td>
<td>烤全羊</td>
</tr>
</table> </body>
</html>

5.表单标签:<form>

功能:表单用于向服务器传输数据,从而实现用户与web服务器的交互

表单能够包含input系列标签,比如文本字段、复选框、单选框、提交按钮等。

表单还可以包含textarea、selsct、filedset、和label标签

表单属性:

input标签(内联标签)

<1> 表单类型

type:        text 文本输入框
password 密码输入框
radio 单选框
checkbox 多选框
submit 提交按钮
button 按钮(需要配合js使用.) button和submit的区别?
file 提交文件:form表单需要加上属性enctype="multipart/form-data"
上传文件注意两点:
1 请求方式必须是post
2 enctype="multipart/form-data"

<2>name属性:

对应发送给服务器的key

name属性是内置的,不能更改

name:    表单提交项的键.

注意和id属性的区别:name属性是和服务器通信时使用的名称;

而id属性是浏览器端使用的名称,该属性主要是为了方便客户端编程,而在css和javascript中使用的

value:    表单提交项的值.对于不同的输入类型,value 属性的用法也不同:

type="button", "reset", "submit" - 定义按钮上的显示的文本

type="text", "password", "hidden" - 定义输入字段的初始值

type="checkbox", "radio", "image" - 定义与输入相关联的值

checked:  radio 和 checkbox 默认被选中

readonly: 只读. text 和 password

disabled: 对所用input都好使.

6.select标签

<select> 下拉选标签属性

name:表单提交项的键.

size:选项个数

multiple:multiple

<optgroup>为每一项加上分组

<option> 下拉选中的每一项 属性:

value:表单提交项的值.

                       selected: selected下拉选默认被选中

7.<textarea> 多行文本框

<form id="form1" name="form1" method="post" action="">

<textarea cols=“宽度” rows=“高度” name=“名称”>

默认内容

</textarea>

</form>

8.<label>标签(了解)

定义:<label> 标签为 input 元素定义标注(标记)。

说明:

1 label 元素不会向用户呈现任何特殊效果。

2 <label> 标签的 for 属性值应当与相关元素的 id 属性值相同

<form method="post" action="">

<label for=“username”>用户名</label>

<input type=“text” name=“username” id=“username” size=“20” />

</form>

9.<fieldset>标签(了解)

<fieldset>

<legend>登录吧</legend>

<input type="text">

</fieldset>

HTML常用标签3的更多相关文章

  1. HTML常用标签

    HTML常用标签: HTML文档格式: 首先,HTML是一种超文本标签语言,它是制作网页的基础. 其次,HTML文档中至少包含基本的和成对的<html> </html>.< ...

  2. html常用标签介绍

    常用标签介绍 文本 最常用的标签可能是<font>了,它用于改变字体,字号,文字颜色. 点击查看效果 <font size="6">6</font&g ...

  3. HTML常用标签总结

    HTML 的常用标签总结 <font size="字体大小1-7" color="red或0xff00ff" face="字体类型(楷体等)&q ...

  4. html新增一些常用标签

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. [刘阳Java]_MyBatis_映射文件的常用标签总结_第5讲

    MyBatis中常用标签的总结,简单给出自己的总结 MyBatis映射文件中的标签使用介绍1.<select>:用于编写查询语句用的标签 id:表示当前<select>标签的唯 ...

  6. CSS常用标签

    CSS常用标签 一 CSS文字属性 color : #999999; /*文字颜色*/ font-family : 宋体,sans-serif; /*文字字体*/ font-size : 9pt; / ...

  7. HTML基础(一)——一般标签、常用标签和表格

    第一部分  HTML <html>    --开始标签 <head> 网页上的控制信息 <title>页面标题</title> </head> ...

  8. HTML-学习笔记(常用标签)

    本篇博客讲一讲HTML中的标签 HTML 标题 标题(Heading)是通过 <h1> - <h6> 等标签进行定义的.<h1> 定义最大的标题.<h6> ...

  9. 帝国CMS文章随机调用等一些常用标签

    1.帝国CMS文章随机调用等一些常用标签 [e:loop={'news',10,18,0,'newstime>UNIX_TIMESTAMP()-86400*7','onclick desc'}] ...

  10. 9月5日网页基础知识 通用标签、属性(body属性、路径、格式控制) 通用标签(有序列表、无序列表、常用标签)(补)

    网页基础知识 一.HTML语言 HTML语言翻译汉语为超文本标记语言. 二.网页的分类 1.静态页面:在静态页面中修改网页内容实际上就是修改网页原代码,不能从后台操作,数据来只能来源于原于代码.静态网 ...

随机推荐

  1. select2插件 多选框动态初始化值

    转自https://blog.csdn.net/yiyiwyf/article/details/53521980 上一篇讲了select2的多选和大标题设置. 这周做到了修改的功能,需要将旧数据的选项 ...

  2. NEST 之旅 · 开启

    NEST 之旅 · 开启 Version:5.x 英文原文地址:Getting started 说实话,这篇文章翻译的很糟糕.但是我的能力有限,目前只有这个水平,还望各位多指导. NEST 是 Ela ...

  3. django 视图函数返回queryset对象或日期对象至浏览器ajax接收的写法

    class MyDateTimeEncode(json.JSONEncoder): def default(self, o): if isinstance(o, datetime): return o ...

  4. python全栈开发day53-mysql

    mysql的使用 (1)下载 解压到指定的目录. (2)取到C:\mysql-5.7.22-winx64\mysql-5.7.22-winx64\bin路径 添加到系统的环境变量中,后面一定要加分号. ...

  5. flink-SQL

    Table API和SQL捆绑在flink-table Maven工件中.必须将以下依赖项添加到你的项目才能使用Table API和SQL: <dependency> <groupI ...

  6. Codeforces 1092E Minimal Diameter Forest

    Minimal Diameter Forest 首先我们找出每个连通块中的特殊点, 特殊点的定义是到各种个连通块中距离的最大值最小的点, 每个连通块肯定通过特殊点连到其他连通块, 我们把有最大值的特殊 ...

  7. HBase API操作

    |的ascII最大ctrl+shift+t查找类  ctrl+p显示提示 HBase API操作 依赖的jar包 <dependencies> <dependency> < ...

  8. windows下编译php7图形库php_ui.dll

    CSDN博客 具有图形化编程才有意思,这几天看到了php ui 图形扩展,只是现在只能下载php 7.1的 本次教程编译php7.2.6的 php ui 要是linux下编译起来比较简单 但是 win ...

  9. Django之Models(二)

    Django之Models(二) 创建一对多的关系 一个出版商可以有多本出版的书 一本书只有一个出版商 创建一对多的语法: 字段名= models.ForeignKey(关联表(类名),on_dele ...

  10. 附006.harbor.cfg配置文件详解

    一 必须参数 需要在配置文件中设置这些参数.如果用户更新它们harbor.cfg并运行install.sh脚本以重新安装Harbor,它们将生效. hostname:目标主机的主机名,用于访问UI和注 ...