字体标签
字体标签： <font> ... </font>
作用： 规定文本的字体、字体尺寸、字体颜色
示例： <font size = "3" color = "red"> 我是红色 </font>
<p><font size = 14 face = "楷体" color = "blue"> 我也是蓝色 </font></p>
段落标签
段落标签： <p> ... </p>
作用： 定义一个段落
示例： <p> 我是段落 </p>
<p> 和 <br> br只是换行不换段
<P> 换段 <br> 换行
注释
注释标签： <!--.......-->
作用： 注释
示例：<!-- 我是一个注释 -->
标题标签
标题标签： <h?> ... </h?>
作用： 定义标题头的六个不同文字大小，依次显示重要性的递减，也就是权重依次降低
示例： <h1>我是<font color = "red" > 1 </font> 级标题</h1>
小贴士：尽量靠在html中的<body>标签，越贴近越好，让搜索引擎最快领略主题
行级元素：满了换行
块级元素：独占一行
图片标签
img标签： <img src = "***" />
作用： 在浏览器显示图片
示例： <img src = "image/logo.jpg" alt = "*(提示信息)" />
<img src = "../image/logo.jpg" alt = "*(提示信息)" />
../是返回上一级 (跳跃文件夹找路径)
常用属性： src、alt、height、width
（注意平级关系）
绝对路径：从根本的盘符出发 (d:/image/logo.jpg)
相对路径：从相对于的位置出发 (../image/logo.jpg)
超级链接
a标签: <a>...</a>
块级元素：独占一行 两个及以上<a>若没换行默认行级元素
作用： 使用超级链接与网络上的另一个文档相连
示例： <a href = "page2.html"> 打开另一个页面 </a>
小贴士：超链接可以是一个字，一个词，或一组词，也可以是一副图像
您可以点击这些内容来跳转到新的文档或当前文档中的某个部分
A标签的target属性
| 标签 | 格式 |
|---|---|
| _blank | 在新打开、未命名的窗口打开链接 |
| _parent | 在父窗口打开链接 |
| _self | 当前窗口打开 |
| _top | _top目标是会清除所有被包含的frame框架 |
锚点(标志跳转)
小贴士： 锚点必须先定义，再使用
------------------------------------------------------
先定义：<a href="#abc">段落标签</a>
后使用：<h2><a href="icon.png" id="abc">字体标签</a></h2>
无序列表
无序列表： <ul><li> ... </li></ul>
作用： 此列项目使用粗体圆点进行编辑
示例： <ul><li> 我的文件 </li></ul>
小贴士： 列表项内部可以使用段落、换行符、图片、链接以及其他列表等
li*5 + Tab = 快速生成五个<li>
有序列表
有序列表： <ol><li> ... </li></ol>
作用： 列表项目使用数字进行标记
示例： <ol><li> 我的文件 </li></ol>
小贴士： 列表项内部可以使用段落、换行符、图片、链接以及其他列表等
oi*5 + Tab = 快速生成五个<oi>
表格
表格： table、caption、tr、th、td、border、width
colspan=""是左右合并
rowspan=""是上下合并,""中填写的是合并表格的个数
<td colspan="2" rowspan="2"></td>
作用： 用于表格、行、列、宽度、边框的制作
示例： 制作商品库存表等
---------------------------------------------
合并行列： colspan(列)、rowspan(行)
作用： 用于将表格内的某些行、列进行合并
例题： 合并表格标题等位置
---------------------------------------------
属性标签： caption、tbody、tfoot、thead
作用：用于分组设置表格的格式
<body>
<form action="" method="post">
<table bgcolor="black" width="800px" height="400px" align="center" cellspacing="4px">
<caption>
<h1 align="center">细线表格基础练习1</h1>
</caption>
<tr align="center" bgcolor="white">
<td></td>
<td></td>
<td></td>
</tr>
<tr align="center" bgcolor="red">
<td></td>
<td></td>
<td></td>
</tr>
<tr align="center" bgcolor="orange">
<td colspan="2" rowspan="2"></td>
<td></td>
<td></td>
</tr>
<tr align="center" bgcolor="#adff2f">
<td rowspan="2"></td>
<td></td>
<td></td>
</tr>
<tr align="center" bgcolor="blue">
<td></td>
<td></td>
<td></td>
</tr>
</table>
</form>
</body>
| 属性 | 值 | 描述 |
|---|---|---|
| align | right、left、center、justify、char | 定义在列组合中内容的水平对齐方式 |
| char | character | 规定根据哪个字符来对齐列组中的内容 |
| charoff | number | 规定第一个对齐字符的偏移量 |
| span | number | 规定列组应该横跨的列数 |
| valign | top、middle、bottom、baseline | 定义在列组合中内容的垂直对齐方式 |
| width | pixels % | 规定列组合的宽度 |
| 属性 | 属性值 | 作用 |
|---|---|---|
| border | 1 | 设置边框 |
| width | npx , n% | 表格宽度 |
| bgcolor | 颜色值 | 表格背景 |
| align | left、center、right | 表格在文档中的对齐方式 |
| cellpadding | npx | 内容和边框之间的间距 |
| cellspacing | npx | 单元格之间的间距 |
| 属性 | 属性值 | 作用 |
|---|---|---|
| frame | void | 不显示外边框 |
| frame | border | 四周都显示 |
| frame | above | 显示上部的外边框 |
| frame | below | 显示下部的外边框 |
| frame | hsides | 显示上下的外边框 |
| frame | lhs | 显示左部的外边框 |
| frame | rhs | 显示右部的外边框 |
| frame | vsides | 显示左右的外边框 |
| 属性 | 属性值 | 作用 |
|---|---|---|
| rules | none | 内边框将不被显示 |
| rules | rows | 内边框将在行之间显示 |
| rules | cols | 内边框在列之间显示 |
| rules | all | 内边框将被显示 |
| align | left、center、right | 三种水平对齐方式 |
| valign | bootom、middle、top | 三种垂直对齐方式 |
表单
表单 Why？ 什么是表单？
作用： 用于收集用户信息，进行人机交互操作
包含元素： 文本框、单选按钮、列表框、图片框、复选框等这些元素，统称“控件”
| 属性 | 作用 |
|---|---|
| name | 指定控件的名称，可重复 |
| id | 指定标签的唯一标识 |
| value | 输入(收集、设置)控件的值 |
| checked | 复选框(单选)组默认被选中的项目 |
| selected | 列表框组默认被选中的项目 |
| src | 图片框的图片来源 |
| onclick | 鼠标单击事件 |
| disabled | 禁用该控件 |
| multiple | 允许多选(适合普通列表框) |
<input type = "text" name="" id="">
- name 给当前文本框取名字 (可重复 给后台使用)
- id 为唯一识别的名字 (给js使用)
<label> 在文字上进行统一展现的标签
↓ name一样可单选 value内容传给后端 ↓
<label id="">兴趣爱好</label>
【单选框 radio】
<input type="radio" name="xb" id="" value="男"/>男
<input type="radio" name="xb" id="" />女
----------------------------------------------------------
【复选框 checkbox】
<input type="checkbox" name="" id="" value="1"/>游泳
<input type="checkbox" name="" id="" value="2"/>看书
----------------------------------------------------------
【下拉框 option】 默认的话 selected = "selected"
<select> //若<select size="4(个数)" multiple="true"(允许多选)> 不会有选项
<option value="1995">1995</option>
<option value="1996">1996</option>
<option value="1997" selected="selected">1997</option>
<option value="1998">1998</option>
</select>年
----------------------------------------------------------
【submit】会提交 <form action = "" method = ""> 到后台
<input type="button" value="普通按钮" />
<input type="submit" value="提交按钮" />
----------------------------------------------------------
<textarea rows="3" cols="30" name="" id="">请输入</textarea>
<input type = "file">
----------------
| 请输入 |
| |
---------------- Choose File[选择文件file]
----------------------------------------------------------
321<input type = "hidden" name="" id="">123
隐藏域 用于传递私密数据给前后端
----------------------------------------------------------
【提交方式】post隐匿提交(安全性高) get显示提交
项目综合展示
