前端开发学习──初识Html
html结构
html 超文本标记语言，它的结构标准如下：
<!DOCTYPE html> 声明文档类型
<html lang="en"> 根标签
<head> 头标签
<meta charset="UTF-8">
<title>Document</title> 标题标签
</head>
<body> 主体标签
</body>
</html>
html标签
-
单标签
-
注释标签
-
水平线标签
<hr> -
换行标签
<br> -
双标签
-
段落标签
<p>文本内容</p>，特点：上下自动生成空白行，而<br>标签换行不会生成空白行 -
标题标签，h1-h6 取值到h6，建议h1标签在一个页面里只能出现一次
-
文本标签
<font>文本内容</font> -
文本格式化标签：
1.文本加粗标签<strong></strong>和<b></b>，前者更具语义化
2.文本倾斜标签<em></em>和<i></i>，前者更具语义化
3.删除线标签<del></del>和<s></s>，前者更具语义化
4.下划线标签<ins></ins>和<u></u>，前者更具语义化 -
图片标签:
<img src="" alt="" title="" width="" height=""> -
src：图片来源，必写
-
alt：替换文本，当图片不显示的时显示的文字
-
title：提示文本，当鼠标放到图片上时显示的文字
-
width：图片宽度
-
height：图片高度
注：图片没有定义宽高的时候，图片按照百分之百比例显示，如果只更改图片的宽度或者高度，图片等比例缩放 -
超链接标签:
<a href="" title="" target=""></a> -
href：跳转的路径，必写
-
title：提示文本，当鼠标放到链接上时显示的文字
-
target：
_self为默认值，在自身页面打开（关闭自身页面，打开链接页面）；_blank打开新页面 （自身页面不关闭，打开一个新的链接页面） -
无序列表
<ul type="square">
<li>d</li>
<li>a</li>
<li>c</li>
<li>e</li>
</ul>
type：disc默认 实心小圆圈；square 小方块；circle 空心小圆圈
- 有序列表
<ol type="i" start="2">
<li>e</li>
<li>re</li>
<li>a</li>
<li>f</li>
</ol>
-
type:type=”1,a,A,i,I” type的值可以为1,a,A,i,I
-
start:start=”2” 决定了开始的位置
-
自定义列表
<dl>
<!-- 小标题 -->
<dt>帮助中心</dt>
<!-- 解释标题 -->
<dd>购物指南</dd>
<dd>订单操作</dd>
<dd>账户管理</dd>
<dt>帮助中心1</dt>
<dd>购物指南2</dd>
<dd>订单操作3</dd>
<dd>账户管理4</dd>
</dl>
-
meta标签：content 属性始终要和 name 属性或 http-equiv 属性一起使用。
-
搜索关键字，某些搜索引擎在遇到这些关键字时，会用这些关键字对文档进行分类
<meta name="keywords" content="html"> -
网页描述
<meta name="description" content="html"> -
网页重定向:5s后跳转到www.baidu.com
<meta http-equiv="refresh" content="5;url=http://www.baidu.com" /> -
link标签
-
链接外部样式表
<link rel="stylesheet" href="1.css"> -
设置icon图片
<link rel="icon" href="1.png">
表格
表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等
<!-- 4行3列表格 -->
<table border="4" width="300" height="400" cellspacing="2" cellpadding="10"
align="center" bgcolor="yellow" bordercolor="red">
<caption>标题</caption>
<!-- 行 -->
<tr align="left" >
<!-- 列 -->
<td align="right">1</td>
<td valign="bottom">2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
</table>
-
table属性：
Border=”4” 边框
Width=”300” 宽度
Height=”400” 高
cellspacing=”2” 单元格与单元格的距离
cellpadding=”10” 内容距边框的距离
align=”left | right | center” 如果直接给表格用align=”center” 表格居中，如果给tr或者td使用 ，tr或者td内容居中
bgcolor=”yellow” 背景颜色
bordercolor="red" 边框颜色 -
表头
<caption>标题</caption> -
单元格合并：
colspan=”2”合并同一行上的单元格;rowspan=”2”合并同一列上的单元格 -
内容垂直对齐方式
valign="top | middle | bottom"
<!-- 4行3列表格 -->
<table border="4" width="300" height="400" cellspacing="2" cellpadding="10"
align="center" bgcolor="yellow" bordercolor="red">
<caption>标题</caption>
<!-- 行 -->
<tr align="left" >
<!-- 列 -->
<td align="right">1</td>
<td valign="bottom">2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td colspan="2" valign="top">7</td>
<!-- <td>8</td> -->
<td rowspan="2">9</td>
</tr>
<tr>
<td>10</td>
<td>11</td>
<!-- <td>12</td> -->
</tr>
</table>
表单
- 表单域
<form action="form.php" method="get"></form>- action :表单提交的目标地址。
- method :POST 的安全性更加，因为在页面地址栏中被提交的数据是不可见的；GET通过地址栏提供（传输）信息，可见，安全性差
- 输入框
<form action="form.php" method="get">
<!-- 文本输入框 -->
用户名：
<input type="text" maxlength="6" readonly="readonly" disabled="disabled" name="username" value="html">
<br>
<!-- 密码输入框 -->
密码：
<input type="password" name="pwd">
</form>
-
maxlength="6" 限制输入字符长度
-
readonly=”readonly” 将输入框设置为只读状态（不能编辑）
-
disabled="disabled" 输入框未激活状态
-
name="username" 输入框的名称
-
value="html" 将输入框的内容传给处理文件
-
单选框
<input type="radio" name="gender" checked="checked"> 男
<input type="radio" name="gender" > 女
-
只有将name的值设置相同的时候，才能实现单选效果。
-
checked=”checked” 设置默认选择项
-
多选框
<input type="checkbox" checked="checked"> 1
<input type="checkbox" > 2
<input type="checkbox" > 3
- 下拉列表
<select >
<optgroup label="水果">
<option >苹果</option>
<option >香蕉</option>
</optgroup>
<optgroup label="电器">
<option >电脑</option>
<option selected="selected">冰箱</option>
</optgroup>
</select>
<select multiple="multiple">
<optgroup label="水果">
<option >苹果</option>
<option selected="selected">香蕉</option>
</optgroup>
<optgroup label="电器">
<option >电脑</option>
<option >冰箱</option>
</optgroup>
</select>
-
Multiple=”multiple” 将下拉列表设置为多选项
-
Selected=”selected” 设置默认选中项目
-
<optgroup></optgroup>对下拉列表进行分组，label=“”分组名称 -
多行文本框
<textarea cols="30" rows="10"></textarea> -
Cols 控制输入字符的长度。
-
Rows 控制输入的行数
-
文件上传
<input type="file"> -
重置按钮
<input type="reset"> -
文件提交按钮
-
<input type="submit">,可以实现信息提交功能 -
<input type="button" value="普通提交">,不能提交信息，配合JS使用 -
<input type="image" src="1.png">,图片按钮可实现信息提交功能
- 表单信息分组
<form action="1.php" method="get">
<fieldset>
<legend>分组1</legend>
<input type="text">
</fieldset>
<fieldset>
<legend>分组2</legend>
<select >
<optgroup label="水果">
<option >苹果</option>
<option >香蕉</option>
</optgroup>
<optgroup label="电器">
<option >电脑</option>
<option selected="selected">冰箱</option>
</optgroup>
</select>
</fieldset>
</form>
示意图
-
<fieldset></fieldset>对表单信息分组 -
<legend></legend>表单信息分组名称 -
其他表单控件
<form action="1.php" method="get">
<!-- 网址控件 -->
<input type="url">
<br>
<br>
<!-- 日期控件 -->
<input type="date">
<br>
<br>
<!-- 时间控件 -->
<input type="time">
<br>
<br>
<!-- 邮件控件 -->
<input type="email">
<br>
<br>
<!-- 数字控件 -->
<input type="number" step="5">
<br>
<br>
<!-- 滑块控件 -->
<input type="range" >
</form>
html特殊字符
特殊字符
标签语义化
好的语义化的网站标准就是去掉样式表文件之后，结构依然很清晰。
- 标签语义化意义：
- 网页结构合理
- 有利于seo:和搜索引擎建立良好沟通，有了良好的结构和语 义你的网页内容自然容易被搜索引擎抓取
- 方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）
- 便于团队开发和维护
- 尽可能少的使用无语义的标签div和span；
- 在语义不明显时，既可以使用div或者p时，尽量用p, 因为p在默认情况下有上下间距，对兼容特殊终端有利；
- 不要使用纯样式标签，如：b、font、u等，改用css设置。
- 需要强调的文本，可以包含在strong或者em标签中strong默认样式是加粗（不要用b），em是斜体（不用i）；
