html结构简介
- <html>称为根标记，用于告知浏览器其自身是一个 HTML 文档
- <html lang="en"> 向搜索引擎表示该页面是html语言，并且语言为英文网站
- <head>标记用于定义HTML文档的头部信息
- <title>标记用于定义HTML页面的标题 <title>网页名称</title>
- <body>标记用于定义HTML文档所要显示的内容
html标签之间的关系
1.嵌套关系
2.并列关系
html标签分类
1.双标记: <标记名></标记名>
2.单标记: <标记名/>
路径详解:
- 相对路径:相对路径不带有盘符，通常是以HTML网页文件为起点，通过层级关系描述目标图像的位置(返回上一级目录使用../)
*绝对路径:绝对路径一般是指带有盘符的路径(“D:\img\logo.gif”，
或完整的网络地址，例如“http://www.baidu.cn/images/logo.gif”)
单标记详解
- <hr />是单标记，在网页中输入一个<hr />，就添加了一条默认样式的水平线
- :快捷键(command + ?)
- 换行标记<br />
-
标记.png
- 无序列表
<ul type="disc">
� <li>列表项1</li>
� <li>列表项2</li>
� <li>列表项3</li>
</ul>
type取值
默认值: disc
方块: square
空心圆: circle
- 有序列表
<ol type = "1" start = "1">
<li >项一</li>
<li >项二</li>
</ol>
type:取值(1,a,A,i,I)
start:取值(数值)表示从第几个开始
- 自定义列表
<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
...
<dt>名词2</dt>
<dd>名词2解释1</dd>
<dd>名词2解释2</dd>
...
</dl>
自定义列表常用于对术语或名词进行解释和描述，自定义列表的列表项前没有任何项目符号
- meta标签
1.关键字
<meta name="keywords" content="关键字内容">
2.网页描述
<meta name="description" content="描述内容">
3.网页重定向
<meta http-equiv="refresh" content="5; http://www.baidu.com">
- link标签:
1.链接外部样式表
<link rel="stylesheet" href="1.css">
2.设置Icon图标
<link rel="icon" href="image.png">
- 表格: table
- 表格组成:表格至少由<TABLE>标签、<TR>标签和<TD>标签这3对标签组成
<table> 表格
<tr> 行
<td></td> 列
<td></td>
<td></td>
</tr>
</table>
1.属性:
border=”1” 边框(默认为0,即无边框)
width=”500” 宽度
height=”300” 高
cellspacing=”2” 单元格与单元格的距离
cellpadding=”2” 内容距边框的距离
align=”left | right | center”
如果直接给表格用align=”center” 表格居中
如果给tr或者td使用 ，tr或者td内容居中。
bgcolor=”red” 背景颜色(可以给table,tr,td使用)。
-
创建表格步骤
-
第一步：创建表格标签< table>…</table>。
-
第二步：在表格标签table>…</table>里创建行标签<tr>...</tr>，可以有行
-
第三步：在行标签<tr>...</tr>里创建单元格标签<td>...</td>，可以有多个单元格。
-
表格的标准结构(其他部分)
-
caption 元素定义表格标题: caption 标签必须紧随 table 标签之后
-
th元素:表头一般位于表格的第一行或第一列，其文本加粗居中,只需用表头标记<th></th>替代相应的单元格标记<td></td>即可
-
在使用表格进行布局时，可以将表格划分为头部、主体和页脚
-
<thead></thead>：用于定义表格的头部，必须位于<table></table>标记中，一般包含网页的logo和导航等头部信息。
-
<tfoot></ tfoot >：用于定义表格的页脚，位于<table></table>标记中<thead></thead>标记之后，一般包含网页底部的企业信息等。
-
<tbody></tbody>：用于定义表格的主体，位于<table></table>标记中<tfoot></ tfoot >标记之后，一般包含网页中除头部和底部之外的其他内容。
-
补充知识
-
内容垂直对齐方式:<td valign="top|middle|bottom"></td>
-
合并单元格:colspan=”2” 合并同一行上的单元格,rowspan=”2” 合并同一列上的单元格,td标签的属性,
表单
- 表单(输入框等必须放在表单域中才有效果)
<form name="form_name" action="url" method="get|post">…</form>
name ：定义表单的名称
method: 定义表单结果从浏览器传送到服务器的方式，默认参数为：get ；
action ：用来指定表单处理程序的位置(服务器端脚本处理程序）
- 文本输入框
<input type="text" maxlength="6" readonly="readonly" disabled="disabled" name="username" value="大前端">
maxlength="6" 限制输入字符长度
readonly=”readonly” 将输入框设置为只读状态（不能编辑）
disabled="disabled" 输入框未激活状态
name="username" 输入框的名称
value="大前端" 将输入框的内容传给处理文件
- 密码输入框
<input type="password" name="pwd">
文本框所有属性对密码框都有效
- 单选框
<input type="radio" name="gender" checked="checked">男
只有将name的值设置相同的时候，才能实现单选效果
checked=”checked” 设置默认选择项。
- 下拉列表
<select multiple="multiple">
<option>下拉列表选项1</option>
<option selected="selected">下拉列表选项2</option>
</select>
Multiple=”multiple” 将下拉列表设置为多选项
Selected=”selected” 设置默认选中项目
<optgroup label="北京市">
<option>海淀区</option>
<option selected="selected">昌平区</option>
</optgroup> 对下拉列表进行分组。
label为分组名称
- 多选框
<input type="checkbox" checked="checked">111
<input type="checkbox" checked="checked">111
<input type="checkbox" checked="checked">111
- 多行文本框
<textarea cols="10" rows="10"></textarea>
cols 控制输入字符的长度。
rows 控制输入的行数
- 文件上传按钮
<input type="file">
- 文件提交按钮
<input type="submit">
可以实现信息提交功能
- 普通按钮
<input type="button" value="普通按钮">
不能提交信息，配合JS使用
- 图片按钮
<input type="image" src="image.png">
图片按钮可实现信息提交功能
- 重置按钮
<input type="reset" >
将表单重置到默认状态
- 表单信息分组
<form name="form_name" action="url" method="get|post">
<fieldset> 对表单信息分组
<legend>分组名</legend> 表单信息分组名称
</fieldset>
</form>
- h5新增表单input控件
type = url,date,time,email,number,range
网友评论