Html基础汇总---全是干货

1.1 <img>标签的属性:


src 指定图片来源
Alt 替换文本，一般在图片未加载成功时显示
title 鼠标放置图片上时显示的图片描述
width 图片宽度
height 图片高度


1.2 <a></a>超链接标签属性：


href 必填属性，去往的路径，即跳转的页面的链接
title 鼠标放置在链接上的提示文本
target="_self" 默认值，链接在当前页面打开
target="_blank" 链接在新页面打开，且自身页面不被关闭


1.3 锚链接


1.先定义一个锚点
<p id="sd"></p>
     
2.超链接到锚点
<a href="#sd"></a>


1.4 列表包含有序列表、无序列表、自定义列表 。


自定义列表：
<dl>
<dt></dt>
<dd></dd>
<dd></dd>
<dd></dd>
</dl>


1.5 <embed>音乐标签：


<embed src="像风一样自由.mp3" hidden="true">
src 引入音乐文件
hidden 设置是否显示播放按钮


----------------------------------------------------
1.6 marquee标签（设置页面自动滚动滚动效果）的属性：


width 设置宽度
height 设置高度
bgcolor 设置背景颜色


behavior 设置滚动的方式 
alternate 表示在两端之间来回滚动
scroll 表示从一端滚动到另一端，重复
slide 表示从一端滚动到另一端，不重复


direction 设置滚动的方向 
down 向下滚动 left 向左滚动 right 向右滚动 up向上滚动
loop 设置滚动次数 -1表示一直滚动
-----------------------------------------------------




2.1 单标签：


1.水平线标签：<hr>
2.注释标签
3.换行标签


2.2 双标签：


1.段落标签 <p></p>
2.h1-h6
3.文本标签 <font></font>
4.图片标签 <img/>
5.<strong></strong>  <b></b>
  <em></em>   <i></i>
  <ins></ins>   <u></u>
  <del></del>    <s></s>
  ^上标   _下标


2.3 特殊字符：


&nbsp;  空格
&lt;    <
&gt;    >
&copy;  
&yen;






2.4 关键字：


<meta name="keyword" content="...">
网页描述：
<meta name="description" content="..."> 
网页重定向：
<meta name="refresh" content="url"> 
链接外部样式：
<link rel="stylesheet" href="text.css">
设置网页图标
<link rel="icon" href="favicon.ico">


3.1 表格格式：


<table>    表格
<tr>       行
<td></td> 列
<td></td>
<td></td>
</tr>
</table>
表格属性：
border="1" 边框
width="500" 宽度
height="200" 高度
cellspacing="2" 单元格之间的距离
cellpadding="2" 文本内容距单元格边框的距离
align="left | right | center"
bgcolor="red" 背景色




3.2 表格的标准结构：


<table>
<thead>
<tr>
<td></td>
<td></td>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td></td>
</tr>
</tfoot>
</table>




３.2 表头和单元格合并


表头  <caption></caption>
colspan=”2”  合并同一行上的单元格
rowspan=”2”  合并同一列上的单元格


3.3 表格标题、边框颜色、内容垂直对齐


1.表格标题 <th></th>用法和td一样
2.边框颜色 border-color="red"
3.内容垂直对齐方式 Valign="top   |  middle   |  bottom"






4.1 表单(表单的作用是收集信息)


表单的组成:提示信息、表单控件、表单域、文本输入框、密码输入框、单选框、下拉列表、多选框
、多行文本、文件上传控件、文件提交按钮、普通按钮、图片按钮、重置按钮




4.2 表单域


<form action="1.php" method="Post"></form>


属性：action:处理信息
Method=”get | post”   
Get通过地址栏提供（传输）信息，安全性差。
Post 通过1.php来处理信息，安全性高。


4.3 文本输入框


<input type="" maxlength="" readonly="" disabled="" name="" value=""/>


maxlength="6"    限制输入字符长度
readonly=”readonly”  将输入框设置为只读状态（不能编辑）
disabled="disabled"  输入框未激活状态
name="username"   输入框的名称
value="大前端"     将输入框的内容传给处理文件




4.4 密码输入框


<input type="password" name="pwd"/>




4.5 单选框


<input type="radio" name="gender" checked="checked"/>女


1.只有将name的值设置相同的时候，才能实现单选效果
2.checked=”checked” 设置默认选择项




4.6 下拉列表


<select multiple="multiple">
<optgroup label="cityname">
<option>北京</option>
<option select="selected">上海</option>
<option>广州</option>
<option>成都</option>
<option>重庆</option>
</optgroup>
</select>


属性：
1.Multiple=”multiple”  将下拉列表设置为多选项
2.Selected=”selected”  设置默认选中项目
3.<optgroup></optgroup>   对下拉列表进行分组
4.label="cityname" 为分组名称




4.7 多选框


<input type="checkbox" checked=""/>
<input type="checkbox" checked=""/>
<input type="checkbox" checked=""/>
<input type="checkbox" checked=""/>




4.8 多行文本框


<textarea cols="130" rows="10"></textarea>


属性：
Cols  控制输入字符的长度。
Rows  控制输入的行数




4.9 文件上传控件


<input type="file"/>




4.10 文件提交按钮


<input type="submit"/>


4.11 普通按钮、图片按钮、重置按钮


<input type="button" value="button1"/>
<input type="image" src="1.img"/>
<input type="reset"/>


4.12 表单信息分组


<form action="1.php" method="post">
<fieldset>
<legend>分组信息</legend> 
</fieldset>
</form>


说明：
<fieldset></fieldset>    对表单信息分组
<legend></legend>      表单信息分组名称








5.1 标签语义化意义


1:网页结构合理
2:有利于seo:和搜索引擎建立良好沟通，有了良好的结构和语义你的网页内容自然容易被搜索引擎抓取；
3:方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）
4:便于团队开发和维护


注意： 1：尽可能少的使用无语义的标签div和span；


2：在语义不明显时，既可以使用div或者p时，尽量用p, 因为p在默认情况下有上下间距，对兼容特殊终端有利；


3：不要使用纯样式标签，如：b、font、u等，改用css设置。


4：需要强调的文本，可以包含在strong或者em标签中strong默认样式是加粗（不要用b），em是斜体（不用i）