一、标签

文字标记

  1. i / em 设置文本字体的倾斜效果，双标签 内联元素 不独占一行
  2. b / strong 设置文本字体的加粗效果，双标签 内联元素 不独占一行
  3. u 设置下划线 ，双标签 内联元素 不独占一行
  4. 文字上标 sup

  5. 文字下标 sub

    特点 ： 双标签，不独占一行（内联元素）

预格式化标签 pre

特点 ： 双标签，独占一行（块元素）能保留标签里的空格和回车

标题标签 h1 - h6

h1 一个网页中只能有个一个 h1 标签；一般放 logo; h2 - h6 标签一个网页中可以出现多次；

注意：不要为了改变字体的大小或者字体的加粗而用标题标签

水平线 hr

特点；单标签 独占一行的

div : 大盒子

特点：双标签 块元素（独占一行，可以设置宽高）

主要用于划分板块的

span: 小盒子（可以装一个或多个文字）

特点：双标签 内联标签（不独占一行，不能设置宽高）

字体

  1. br 空标记，用来设置字体换行
  2. hr 空标记，用来做水平线

段落

p 段落标记，标识一个段落。默认段落与段落之间有段间距

列表

有序列表 ul 下有多个 li 无序列表 ol 下有多个 li 自定义列表 块元素独占一行

  1. <dl>
  2.     <dt> </dt>
  3.     <dd> </dd>
  4. </dl>

字符实体

  不换行空格 > >右尖括号 < <左尖括号 © 备案中图标版权 ©

首字母大小写转换

text-transform:

capitalize : 首字母大写

uppercase ：小写字母转大写

lowercase : 大写字母转小写

清除列表的默认样式 : list-style: none;

超链接 a 

<a href= “目标文件路径及全称或者连接地址” title = “提示文本”>链接文本或图片</a>
// 空链接
<a href="#">空链接</a>
// 路径
<a href=“url(路径)"  target="" title=""></a>

href 部分中 url 后边跟的是链接页面的路径(包含文件名) title 属性,加入这个属性后,当鼠标移动到热点时,则在鼠标下方显示 title 的内容 target 属性参数定义了打开链接的目标窗口。 _blank 在新窗口中打开链接 页面（会保留原窗口） _self 在当前窗口打开链接页面，此为默认值

插入图片

<img src=“图片的路径” border=“边框” alt=”文本替换图片” title=”图片标题” width=”” height=”” /> 说明：> 属性 src 表示图片的来源（存放路径） border 属性标识了图片的边框 width 和 height 设定其图像在页面上显示的宽度和高度。 title 的作用: 鼠标悬停在该图片上时显示的信息，鼠标离开就没有了，HTML 的绝大多数标签都支持 title 属性，title 属性就是专门做提示信息的，图片标题

相对路径的写法： （同级）当当前文件与目标文件在同一目录下，直接书写目标文件的文件名 + 扩展名； （上级找下级）当当前文件与目标文件所处的文件夹在同一目录下，写法如下：文件夹名 / 目标文件全称 + 扩展名； （下级找上级)当当前文件所处的文件夹和目标文件在同一目录下，写法如下：../ 目标文件文件名 + 扩展名 绝对路径：完整的路径地址

二、表格

作用：显示数据

<table>
    <tr>
     <td></td>
    </tr>
</table>

表格属性

注：一对 tr 表示一行; 一对 td 表示一个单元格（一列） 表格的相关属性 1）width = “表格的宽度” 2）height = “表格的高度” 3）border = “表格的边框” 4）bordercolor = “边框色” 5）cellspacing = “单元格与单元格之间的间距” 6）cellpadding = “单元格与内容之间的距离” 7）align = “表格水平对齐方式” 取值：left、right、center、valign = “垂直对齐” top \ bottom \ middle 8）合并单元格属性：(td) 合并列： colspan = “所要合并的单元格的列数” 合并行： rowspan = “所要合并单元格的行数”

三、表单

作用：用来收集用户信息 表单标记： 1.表单框 <form name=“表单名称” method=“post/get” action=“路径"></form> 2.表单控件 <input type="" /> 语法：<input type=“” name=“” value=“” size=“” maxlength=" " /> 说明： Input：标记可以创建按钮、文本输入框、选择框等各种类型的输入字段。 name：属性标识表单域的名称； type：属性标识表单控件的类型，大概有十几种； Value：属性定义表单域的默认值，其他属性根据 type 的不同而有所变化。 maxlength：控制最多输入的字符数， Size：控制框的宽度（以字符为单位）

表单类型

1)文本框 <input type="text" value="默认值"/> 2)密码框 <input type="password" /> 3)提交按钮 <input type="submit" value="按钮内容" /> 4)重置按钮 <input type="reset" value="按钮内容" /> 5)空按钮 <input type="button" value="按钮内容" /> 6)单选按钮组 <input type=“radio” name=“ral” />男 <input type=“radio” name=“ral” checked=“checked”/>(默认选中)女 7)复选框组 <input type="checkbox" name="" /> <input type="checkbox" name="" disabled="disabled" /> disabled="disabled" (禁用) checked="checked" (默认选中) 8）label 语法 : <label for=”绑定控件的id名”></label> 说明：label 元素用来定义标签，为页面上的其他元素指定提示信息。要将 label 元素绑定到其他的控件上，可以将 label 元素的 for 属性设置为与该控件的 id 属性值相同。 9）表单域下拉列表（菜单）： 语法：

<select >
    <option>下拉选项1</option>
    <option>下拉选项2</option>
     …………
    </select>

说明： 表示下拉列表，name 属性不是必须的 默认选择项用 selected 属性； 10）表单域多行文本定义： 语法：<textarea name="" cols="" rows="" ></textarea> 说明： 多行文本。rows 属性和 cols 属性用来设置文本输入窗口的高度和宽度，单位是字符 阻止浏览器对窗口的拖动设置 :{resize:none;}（css属性）

四、扩展：post 和 get 的区别

  1. get 是从服务器上获取数据，post 是向服务器传送数据。
    1. get 是把参数数据队列加到提交表单的 action 属性所指的 URL 中，在 URL 中可以看到。post 是通过 HTTP post 机制，用户看不到这个过程 。
    2. get 传送的数据量较小，不能大于2KB。post 传送的数据量较大，一般被默认为不受限制。
    3. get 安全性非常低，post 安全性较高。但是执行效率却比 Post 方法好。

五、link

语法 <link rel="icon" href="icon.png" type="image/x-icon" /> rel 不能缺少的 icon 图标 href=”图标的地址或者路径” type 类型 “image / x-icon” 图标 可以省略

绝对路径相对路径

相对路径：同一文件夹 路径就是 图片的名族
在同一文件夹下面 一级一级使用 / 进入
在上一级文件夹 一级一级使用 ../ 进入

绝对路径：本地路径 网络路径

六、浅谈 SEO 优化

SEO: 译为搜索引擎优化

利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名

目的：为网站提供生态式的自我营销解决方案，让其在行业内占据领先地位，获得品牌收益

SEO 包含站外 SEO 和站内 SEO ,站内 SEO 包括网站的结构和内容建设方案等