html

1.注释标签 command+/
2.换行标签 <br/>
3.水平线标签<hr/>
4.段落标签<p></p>:上下自动生成空白行,<br/>不会生成空白行
5.h1-h6 标题标签,h1在一个页面只能出现一次
6.文本标签  <font>文本内容</font>

9文本格式化标签:
9.1加粗标签:<strong></strong>  (更有语义强调的意思,尽量用strong)
9.2加粗标签:<b></b>
9.3文本倾斜:<em></em>(有语气加强的意思)
9.4文本倾斜:<i></i>
9.5删除线:<del></del>(用这个)
9.6删除线:<s></s>
9.7下划线标签:<ins></ins>(用这个)
9.8下划线标签:<u></u>

10图片标签:<img src = "lay.jpg" alt = "林志玲" title = "我的女神" widtd = "300" height= "500" />
src 图片来源
alt 替换文本,图片不显示的时候用这个文本显示
title鼠标放到图片上显示的文字
width图片宽度
height图片高度,不设置宽高,图片按原大小显示,只设置一个图片按比例放缩,都设置,图片变形

11.路径
文件和图片(html文档)在同一个文件夹目录(文件夹),直接写文件名
图片(html)在文件的下一级目录里,文件夹名称+/+图片(html文件)名称
图片(html)在文件的上一级目录里,..+/+图片名称
图片在文件的上一级的其他目录里,../文件夹名称/图片名称

12超链接
<a href ="03图片标签.html"  title = "图片标签" target="_self">超链接</a>
href  去往的路径(跳转的页面) 必须写的属性
title  鼠标放到超链接上显示的文字
target ="_self"  默认值 在自身页面打开(关闭自身页面,打开连接页面)
target = "_blank" 打开新页面(自身页面不关闭,打开一个新的连接页面)

13锚链接
 先定义一个锚点
<p id="sd">
超链接到锚点
<a href="#sd">回到顶部</a>

14空链接:
<a href="#">空链接</a>当页面不知道链接到哪个页面的时候用空链接
15压缩文件的下载,不推荐使用
<a href = "01-ppt.rar">压缩文件</a>
16超链接的优化写法
在head里面写
<base target="_blank"> 让所有页面在新页面中打开

17特殊符号

Snip20170531_1.png

18.无序列表
<ul type="circle">
<li>独立思考见到过读后感</li>
<li>独立思考见到过读后感</li>
<li>独立思考见到过读后感</li>
<li>独立思考见到过读后感</li>
</ul>

type = "square" 实心小方块
type = "circle" 空心小圆点
type = "disc" 实心小圆点

19. 有序列表
<ol type="I" start = "III">
<li>独立思考见到过读后感</li>
<li>独立思考见到过读后感</li>
<li>独立思考见到过读后感</li>
<li>独立思考见到过读后感</li>
</ol>

type 的值可以是I(大写i罗马数字) ,A,a,i,1
start决定开始项

20自定义列表
<dl>
 <dt></dt> 小标题
<dd></dd> 解释标题
<dd></dd> 解释标题
<dd></dd> 解释标题
</dl>

21音乐标签
<embed src = "1.mp3" hidden="true">
hidden隐藏播放器

22滚动标签
<marquee>...</marquee>
中间的内容可以是文字,图片,也可以是由程序生成的文字或图片
属性:height 设置高度 width设置宽度 bgcolor设置背景颜色
behavior:设置滚动的方式
alternate:表示在两端之间来回滚动
scroll:表示有一段滚动到另一端,会重复
slide:表示有一段滚动到另一端,不会重复
direction:设置滚动方向
down向下滚动 
left想左滚动
right向右滚动
up向上滚动
loop设置滚动次数 -1 一直滚下去

23meta
23.1 Charset 编码,
Ascll,Ansi,Unicode,Gbk,Gbk,Gb2312,Big5,Utf-8(通用字符集)
<meta charset="UTF-8">
23.2关键字     文章的中心词汇,给搜索引擎看的
<meta name="keywords" content="java,android,培训">
23.3网页描述
<meta name="description" content = "显示在搜索页面介绍网页整体内容的文字描述">
23.4网页重定向
<meta http-equiv="refresh" content = "5;http://www.baidu.com">
5秒时候跳到百度

24link,可以链接外部样式表文件
<link rel="stylesheet" href = 1.css>
//图标
<link rel="icon" href="favicon.ico">

25表格
25.1
<table border="1" width = "500" height="300" cellspacing="0" cellpadding="10" align="center" bgcolor="yellow" >
<tr>
    <td>张三</td>
    <td>18</td>
    <td>ios</td>
</tr>
<tr>
    <td>李四</td>
    <td>20</td>
    <td>Android</td>
</tr>
</table>

tr:行
td:列,一个td一个单元格
border:边框
width:宽度
height:高度
cellspacing:单元格与单元格之间的距离
cellpadding:内容距离边框的距离
align  如果直接给表格yongalign="center" 表格居中
         如果给tr或者td使用,tr或者td内容居中
bgcolor:背景颜色

25.2表格的标准结构
<table border = "2" width= "500" height = "300>
<thead>
   <tr>
        <td></td>
        <td></td>
        <td></td>
   </tr>
</thead>
<tbody>
   <tr>
        <td></td>
        <td></td>
        <td></td>
   </tr>
</tbody>
<tfoot>
   <tr>
        <td></td>
        <td></td>
        <td></td>
   </tr>
</tfoot>
</table>

简写table>tr*3>td*3

25.3合并单元格


<table border="1" cellspacing="5" cellpadding="2">
        <caption> 表头</caption>
            <tr>
                <td colspan="2">张三</td>
                <!--<td  >22</td>-->
                <td rowspan="3">iOS</td>
            </tr>
                <tr>
                <td>李四</td>
                <td>23</td>
                <!--<td >Android</td>-->
            </tr>   <tr>
                <td>王五</td>
                <td>29</td>
                <!--<td>html</td>-->
            </tr>
        </table>

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

25.4表格的标题,边框颜色,内容垂直对齐方式
<tr>
<th>张三</th>
<th>张三</th>
<th>张三</th>
</tr>
bordercolor = "red"//边框颜色
<td valign="bottom">张三</td>//内容垂直对齐方式

valign top,center,bottom三种方式

25.5细线表格
<table  cellspacing="0.5"  bgcolor="green">
        <caption> 表头</caption>
            <tr bgcolor="white">
                <th >张三</th>
                <th >22</th>
                <th >iOS</th>
            </tr>
                <tr bgcolor="white">
                <td>李四</td>
                <td>23</td>
                <td >Android</td>
            </tr>   
            <tr bgcolor="white">
                <td>王五</td>
                <td>29</td>
                <td>html</td>
            </tr>
        </table>
25.6 细线课表

<table  cellspacing="0.5"  bgcolor="green" width="700" height="300">
        <caption> 表头</caption>
            <tr bgcolor="white" align="center" valign="center">
                <th colspan="2" ></th>
                <!--<th >22</th>-->
                <th >星期一</th>
                <th >星期二</th>
                <th >星期三</th>
                <th >星期四</th>
                <th >星期五</th>
            </tr>
            <tr bgcolor="white" align="center" valign="center" height="50">
                <td rowspan="2">上午</td>
                <td>1</td>
                <td >Android</td>
                <td >Android</td>
                <td >Android</td>
                <td >Android</td>
                <td >Android</td>
            </tr>   
                <tr bgcolor="white" align="center" valign="center" height="50">
                <!--<td>李四</td>-->
                <td>2</td>
                <td >Android</td>
                <td >Android</td>
                <td >Android</td>
                <td >Android</td>
                <td >Android</td>
            </tr>
                <tr bgcolor="white" align="center" valign="center" height="50">
                <td rowspan="2">下午</td>
                <td>1</td>
                <td >Android</td>
                <td >Android</td>
                <td >Android</td>
                <td >Android</td>
                <td >Android</td>
            </tr>
                <tr bgcolor="white" align="center" valign="center" height="50">
                <!--<td>李四</td>-->
                <td>2</td>
                <td >Android</td>
                <td >Android</td>
                <td >Android</td>
                <td >Android</td>
                <td >Android</td>
            </tr>
                    
        
        </table>

26表单
26.1表单域
<form aciton="1.php" method="get">
action:处理信息
method:get post
get通过地址栏提供(传输)信息,安全性差
post通过php来处理信息,安全性高
文本输入框

用户名:<input type="text" maxlength = "6" readonly = "readonly" username="username">
maxlength限制字符长度

用户名:<input type="text" maxlength = "6" disabled="disabled" username="username" value =" 输入框中的值">
disabled:输入框未激活状态,不能用
username:是输入框的名字,区别输入框
value:是输入框中的值

将username中的value提交给action.

密码:<input type="password" name="pwd">
文本输入框中的属性,对于密码输入框都适用


26.2单选框
<input type="radio" name="gender">男
<input type="radio" name="gender" checked= "checked">女
name只有将name的值设置成相同的才能实现单选效果
checked="checked"的默认被选中

27下拉列表
27.1省
<select >
<option>河北</option>
<option>河北</option>
<option>河北</option>
<option selected = "selected">河北</option>  默认选中项
</select>
27.2市
<select multiple = "multiple"> 设置可多选
<option>河北</option>
<option>河北</option>
<option>河北</option>
<option selected = "selected">河北</option>
</select>

27.3分组的下拉列表
<select >
<optgroup lable = "中国">
<option>河北</option>
<option>河北</option>
<option>河北</option>
<option >河北</option>  
</optgroup>
<optgroup lable = "中国">
<option>河北</option>
<option>河北</option>
<option>河北</option>
<option >河北</option>  
</optgroup>
</select>

28多选框
<input type="checkbox" checked= "checked>啦啦
<input type="checkbox" checked= "checked>啦啦
<input type="checkbox" checked= "checked>啦啦

29多行文本框
<textarea cols="130" rows="10"></textarea>
cols 控制输入字符的长度
rows 控制输入的行数

30文件上传控件
<input type="file">
可以实现文件的上传功能
文件提交按钮
<input type=submit">

<input type ="button" value="普通按钮">
普通按钮不能提交信息,配合js使用
<input type="image" src="按钮.jpg">
图片按钮可实现信息提交功能
<input type="reset">
重置按钮将信息重置到默认状态;

31分组
<fieldset>
<legend>分组信息</legend>//分组的名称
...............................................//组内的内容
</fieldset>

32
<input type= "url">
type的类型可以使url,date,time,email,number,range,submit等等
类型不同输入的内容也不相同

33标签语义化