1.HTML复习（常用的标签，属性，div布局，meta）

基础不牢,地动山摇

2018-07-29

以前没有好好的学html，现在做web项目有一种无从下手的感觉，虽然有现成的页面，但是要调整一下样式，还是会遇到不少困难，还是重头再来复习一遍，编写的效率才会高些。

常用标签 p:段落标签 hr:分割线  ol 有序 ol 无序 li 列表  table 表格 tr行 td列 form 表单 span范围   br 换行 img-alt--titile（用于提示） 图像 

a  超链接   div -分区标签

常用属性：input控件中--text 文本  button 按钮  submit 提交  password 密码   date 日期  datetime 日期时间  checkbox 复选框  radio 单选 reset 重置 select 下拉列表 image 图片按钮

textarea -文本区域  name：name用于服务器端获取数据，例如：request.getParameter("userName ")   checked 表示选中

size="控件的初始宽度" maxlength="控件中输入的最多字符个数" checked="控件是否被选中checked" />

 

 

 特殊符号：

1、因为<、>等符号在HTML中已使用，所以必须用其他符号来代替

2、都以分号结束（；）

空格：&nbsp; 大于(>)：&gt; 小于(<）: &lt; 引号（”）：&quot; 版权号() ：&copy;

注意：属性值必须用引号引起来

div：这是一个非常重要的标签 

1.HTML 全称叫做：超文本标记语言（Hypertext Markup Language）

2.meta标签的作用：

（1）描述文档类型和字符编码 （2）描述搜索关键字和描述（提供搜索关键字和内容描述信息，方便搜索引擎的搜索）

eg：

 3.HTML标签分类（方便后续的布局设计）：

• 块级标签：显示为“块”状，前后隔一行
• 行级标签：按行逐一显示

4.有序标签：order 有序 list 列表 lable 标签

<ol> <li>列表项1</li> … … </ol>

5.无序标签：unorder

<ul> <li>列表项1</li> …… </ul>

6.定义描述标签 define 定义  describe  描述

<dl> <dt>标题</dt> <dd>描述1</dd> …… </dl>

7.表单元素

<form> <table> <tr> <td>...</td> <td>...</td> </tr> ..... </table> </form>

8.超链接  

<a href="链接地址" target="目标窗口位置"> 链接热点文本或图像</a>

相对地址：相对于当前目录的地址，常用

<a href="login/login.htm">登录</a>

绝对地址：指向目标地址的完整描述 ，少用

<a href="/memAdmin/login/login.htm">登录</a>

<a href="http://www.sohu.com">搜狐</a>

上级目录：../

上上级目录：../../

锚链接的三种应用场合：

页面间链接：常用于网站导航

<a href="register/register.html">[免费注册]</a>

<a href="login/login.htm">[登录]</a>

锚链接：分为页面内锚链接和页面间锚链接

1、定义标记（锚）： <a name="标记名">目标位置</a> 2、设置链接到标记位置：<a href="#标记名">当前位置</a>

页面内锚链接：适用于页面占用大于一屏的

页面间锚链接：适用于不同页面之间

功能性链接：邮箱、QQ链接等

<a href="mailto: guimeiWebMater@gmgw.com">站长信箱</a>

9.表单元素的语法：

<form action="表单提交地址" method="提交方法"> … 文本框、按钮等表单元素… </form>

action：指定提交后，由服务器上哪个处理程序处理

method：指定向服务器提交的方法： 一般为post或get方法, post方法比较安全

input控件：名字name相同表明属于同一组

<input name="gen" type="radio" value="男" checked="checked">

<input name="gen" type="radio" value="女" >

 10.列表 select  option-选项   selected-被选中

<select name="libiaoming" >
<option value="选项值" >1豪华版</option>
<option value="选项值" >2豪华版</option>
<option value="选项值" selected="selected">3豪华版</option>
<option value="选项值" >4</option>
<option value="选项值" >5</option>
</select>

11：多行文本框 textarea

<textarea name="... " cols="列宽" rows="行宽"> 文本内容 </textarea>

12.表单的高级用法：隐藏域 ：hidden 方便服务器端“记住”客户端的信息、但又不希望客户看到的数据

<input type="hidden" name="…." value="…" />

<input type="hidden" name="userid" value="666" />

隐藏的客户代号信息：666，但客户端页面不显示

隐藏域：既方便服务器端“记住”客户端的数据，又避免因显示浏览者不关心的数据导致用户反感

13.表单的高级用法：只读和禁用属性 readonly：希望某个框内的内容只允许用户看，不能修改 disabled：因没达到使用的条件，限制用户使用

1、用户不能修改协议 2、勾选“同意以上协议”，才允许点击“注册”按钮

实际开发中常用的四种块状结构

• div-dl-dt-dd------用于图文混编的场合

 

• div  -ul（ol）- li 用于分类导航或菜单等

• form -table tr - td -  用于布局表单

• table -tr- td ：用于图文布局或显示数据