行级标签: 在一行中顺序排列, 从左向右
块级标签: 独占一行, 上下排列
行内块: 本质上是个行级元素, 但是有一些块级元素的特性
-
<hr>
-
<br>
-
<h1>-<h6>
-
<div> <a>
-
<p>
-
<img>
-
<input>
-
< textarea >
-
< select >
-
<ol>--<ul>
-
< table >--<tr>---<td>---<th>
-
< form >
idea设置启动浏览器:
1.头部标签
<title>
<meta>
为搜索引擎定义关键词:
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
为网页定义描述内容:
<meta name="description" content="免费 Web & 编程 教程">
定义网页作者:
<meta name="author" content="Runoob">
每30秒钟刷新当前页面:
<meta http-equiv="refresh" content="30">
<link>
<link> 标签定义了文档与外部资源之间的关系。
<link> 标签通常用于链接到样式表
<link rel="stylesheet" type="text/css" href="css1.css">
<style>
<style> 标签定义了HTML文档的css样式文件引用.
在<style> 元素中你也可以直接添加样式来渲染 HTML 文档
<script>
<script>标签用于加载脚本文件,如: JavaScript
2.body标签
<hr>分割线
noshade:颜色是否有阴影(纯色)
size:高度( 厚度,不同于height,不带单位时--默认px )
width:宽度(不带单位时--默认px)
align:对其方式
<hr>
<hr />
<hr noshade="noshade">3
<hr noshade="noshade" size="50">4
<hr noshade="noshade" size="50" width="50">5
<hr noshade="noshade" size="50" width="50%">6
<hr noshade="noshade" size="50" width="50%" align="left">7
<br>换行
123<br>
456<br> 789
<h1>
<h1><h2><h3><h4><h5><h6>是一系列的标签
只有<h1>---<h6>, 不存在<h7>…
<h1>…<h6>被称为标题标签, 用来定义标题.
<h1> 定义最大的标题。<h6> 定义最小的标题。
注意: <h1>只能在一个html文本中出现一次,并且不得出现在<h2>-<h6>之后
<h>属性
Left:左对齐内容(默认值)
Center:右对齐内容
Right:居中对齐内容
<div>
<div> 可定义文档中的分区或节(division/section)。
<div>是块级标签,会自动换行
<div> 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具,并且不使用任何格式与其关联。
<div>是最常用的布局标签
属性
Left:左对齐内容(默认值)
Center:右对齐内容
Right:居中对齐内容
<a>
<a> 标签定义超链接,用于从一张页面链接到另一张页面
<a> 元素最重要的属性是 href 属性,它指示链接的目标
属性(重要)
target属性:
超链接属性target的value值时默认是_self。
_self:它使目标文档显示在超链接所在框架或者窗口中(原窗口打开)。
_blank:在新窗口打开(新窗口打开)。
_parent:在父窗口打开。
_top:在顶级窗口打开。
同组值:通过单击一个窗口中的不同链接控制另一窗口内容变化 ; 浏览器会找与target值相符的框架或者窗口中的文档,有则在其中显示文档。如果不存在,浏览器打开一个新窗口。
<p>段落
<p> 标签定义段落。
<p> 元素会自动在其前后创建一些空白。浏览器会自动添加这些空间,您也可以在样式表中规定。
<img>
<img>为图片标签,在html文档中引入图片资源
<img>是单标签
<img>行级标签
<img src="'" alt="加载错误" width="200" height="200" />
src指向图片路径
alt表示图片未显示成功情况下加载的字段
wdth宽度
height高度
<input>
<input>是一个输入框。
<input>是一个单标签。
<input>是一个行级元素。
输入框的type属性(重要)
Button 按钮
Checkbox 定义复选框。
file 文件上传
hidden 隐藏
image 图片
password 密码
radio 单选框
reset 重置按钮,用于form表单
submit 提交
text 单行文本
checkbox 复选框
radio 单选框
reset:重置按钮(重置按钮会清除表单中的所有数据),用于form表单;
submit:提交,用于form表单
输入框的其它属性
Min: 最小值
Max: 最大值
Multiple: 多文件上传
Required: 必须填写提示
Placeholder: 输入提示
Readonly: 输入框只读
多文件上传
提示
只读
<textarea>多文本
属性
Cols:列
Rows:行
Maxlength:最大
Placeholder:提示
Required:必填
Readonly:只读
0
<select>下拉选择
<select>和<option>需要配合使用
option: selected(选中状态)
select : multiple(multiple ="multiple" 允许多选)
select : size(size ="4"下拉可见数4)
<ol>有序列表
<ol> 标签定义有序列表。
<ol> 标签要结合<li>标签使用
<ol> 标签常用于列表渲染
type属性 : 规定在列表中使用的标记类型(1,A,a,I,i)。
start属性 : 规定有序列表的起始值
reversed : 规定列表顺序为降序。(9,8,7...)
<ul>无序列表
<ul> 标签定义一个无序列表
<ul> 标签要结合<li>标签使用
<ul> 标签常用于列表渲染
<ul> 唯一区别于<ol>在于无序性
type属性
disc:默认。实心圆。
circle:空心圆。
square:实心方块
<table>表格
<table>标签定义html表格
<table>有一系列子标签
子标签<tr>定义行
子标签<td>定义单元格
子标签<th>定义表头
注:另外<thead><tbody><tfoot>也是<table>的子标签,主要作用是把一个<table>表格分为”页头,主体,页脚”三个部分,然后再进行行(<tr>)以及具体单元格的编辑
<thead><tbody><tfoot>必须结合起来使用
<thead><tbody><tfoot>它们的出现次序是:<thead>、<tfoot>、<tbody>
必须在 <table> 元素内部使用这些标签。
依旧包含<tr><td><th>等子元素
<thead> 标签定义表格的表头。该标签用于组合 HTML 表格的表头内容。
<tbody> 标签表格主体(正文)。该标签用于组合 HTML 表格的主体内容。
<tfoot> 标签定义表格的页脚(脚注或表注)。该标签用于组合 HTML 表格中的表注内容。
<table>:
border : 规定表格边框的宽度
cellpadding : 规定单元边沿与其内容之间的空白。
cellspacing : 规定单元格之间的空白
frame : 规定外侧边框的哪个部分是可见的
rules : 规定内侧边框的哪个部分是可见的。
<tr>
align 属性规定表格行中内容的水平对齐方式(left, right , center)。
<td><th>
rowspan: 规定单元格可横跨的行数。
colspan: 规定单元格可横跨的列数
<form>表单
<form>标签可以向服务器传输数据
<form>表单在网页中主要负责数据采集功能,也就是和里面包含的数据将被提交到服务器。
<form>表单有三个基本组成部分:
表单标签:这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。
表单域:包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。
表单按钮:包括如提交按钮、复位按钮和一般按钮。
<form>标签重要属性:
1. action 属性:定义在提交表单时执行的动作。
向服务器提交表单的通常做法是使用提交按钮,
如果省略 action 属性,则 action 会被设置为当前页面。
2.method 属性:规定在提交表单时所用的 HTTP 方法(GET 或 POST):
<form action="***" method="GET"> 或
<form action=="***" method="POST">
HTML 表单包含表单元素,表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等。