文本标签

h1 h2 h3 h4 h5 h6  

<span></span> 

<p></p>

<pre></pre>  预定义标签，里面怎么写的，就怎么展示,里面可以放图片标签

<i></i> 可以被拿来放列表前面的图标

特殊标签

1.特殊符号

2.滚动标签


<marquee direction='right'  scrolldelay='1'>哈喽<img src="images/1.png"/></marquee>

标签属性：
1.滚动方向  direction  up  down left  right
2.滚动延迟时间  scrolldelay（单位是毫秒）

图片标签

<img src="" alt="图片路径不对的提示"  title="鼠标悬浮图片上显示">

相关知识点：

关于图片知识

链接标签

1.外部超链接

 <a href="http://www.baidu.com" target="_blank">百度一下</a>

2.两种空链接

<a href="#"></a>
<a href="javascript:void(0)"></a>

3.通过链接下载文件

<a href="download/001.png" download="download"></a>

4.跳转到顶部（跳底部打锚点）

<a href="#top"></a>

5.设置锚点

能够从一个位置跳转到另一个位置（上下跳转）

单向跳转
    开始位置 <a href="#anchor">开始跳转</a>  
    结束位置 <a id="anchor">页面</a>  或者  <a name="anchor">页面</a> //一般用name
    
相互跳转
	<a href="#chor01" name="chor02">跳转1</a>
        <div></div>
	<a name="chor01" href="#chor02">跳转2</a>
	
调转到另一页面
    开始位置 <a href='demo.html#o'>开始跳转</a>
    结束位置 <a name='o'>页面</a>

小技巧：有href="# "号的地方就是跳转的开始位置，有name=""的是跳转的结束位置

6.打开图片

    <a href="imgs/1.png">打开图片</a>

7.打开外部文件

    <a href="textdoc/ceshi.txt" target="_blank">打开text文件</a>  
    <a href="textdoc/第1章.md" target="_blank">打开.md文件</a>

列表标签

<ul><li>无序列表</li></ul>                     
<ol><li>有序列表</li></ol>          
<dl><li>自定义列表</li></dl>

无序列表前的样式图标，一般加一个i标签，名字为dot，然后设置css样式。
有序列表的属性

reversed 有序列表的倒叙
start 规定有序列表起始值
type 规定有序列表显示类型

表格标签

table标签

        <table>
            <tr >
                <th>标题1</th>
                <th>标题2</th>
            </tr>
            <tr>
                <td>内容1</td>
                <td>内容2</td>
            </tr>  
        </table>

colspan属性 rowspan属性

        <table>
            <tr >
                <th colspan="2">标题1</th>
            </tr>
            <tr>
                <td>内容1</td>
                <td>内容2</td>
            </tr>  
        </table>
   
        <table>
            <tr >
                <th rowspan="2">标题1</th>
                <th>标题2</th>
            </tr>
            <tr>

                <td>内容2</td>
            </tr>
        </table>

cellspacing 单元格间距 cellpadding 单元格边距

        <table cellpadding="200px" cellspacing="100px" >
            <tr >
                <th bgcolor="red">标题1</th>
                <th>标题2</th>
            </tr>
            <tr>

                <td>内容2</td>
                <td>内容2</td>
            </tr>
        </table>

注意01

如果在设置表格的时候，发现背景有边框为白色，无法取消掉，可能是cellspacing cellpadding未设置为0的缘故，当然也可以使用border-collapse: collapse;边框合并来解决问题。

表单标签

前言知识


动态网页技术：能够实现数据交互的叫动态网页技术。

    数据交互：能够去后台交换数据（ajax,php,java,.net等）

静态网页技术：不能实现交互(html,css,javascript等) 
    
    javascript是静态网页上面的动态效果

form标签

信息收集与提交，提交表单数据到后台，接着数据库会存储提交的信息。
登陆信息、注册信息、收集信息、反馈信息、搜索引擎


action='#' 提交数据的地址   //提交到 #当前页面（给个空值） post.html内部页面      http://www.baidu.com外部页面

method="post/get" 表单提交方式

    post/get 的区别
    - method='post' 向服务器发送数据，安全性高，传输数量大
    - method='get'  从服务器获取数据，安全性低，传输数量小


<form action="#" method="post">
 
</form>

input 标签

1. type="text/password"属性

name="" 表单的名字,提交表单专用，起名尽量语义化

<input type="text"     name="userName" >
<input type="password" name="userPassworld">

2. type="radio"属性

单选多选框的默认状态： checked="checked"

<input type="radio" name="sex"  value="保密" checked="checked">保密
<input type="radio" name="sex"  value="男">男
<input type="radio" name="sex"  value="女">女

3. type="checkbox"属性

 <input type="checkbox" name="games"  value="王者荣耀" checked="checked"/>王者荣耀
 <input type="checkbox" name="games"  value="使命召唤"/>使命召唤
 <input type="checkbox" name="games"  value="英雄联盟"/>英雄联盟
 <input type="checkbox" name="games"  value="绝地求生"/>绝地求生

4. type="submit/button/reset/image" tutton

<input type="submit" value="提交">
<input type="button" value=按钮">
<input type="reset"  value="重置">
<button>注册</button>

<input type="image" src="imgs/2.png" title="Google Chrome" alt="图片按钮">

注意：按钮标签，如果里面要加入图片背景，可以将值直接写在input的value里面或者button里面，图片是不会覆盖文字的。

textarea标签

<textarea placeholder="让大家更快地认识你"></textarea>

resize: none;属性能够让文本域宽高无法被设置

select标签

 <select name="years">
        <option value="2017" style="#aaa">请选择</option>
        <option value="2018">2018</option>
        <option value="2019">2019</option>
        <option value="2020">2020</option>
        <option value="2021">2021</option>
        <option value="2022">2022</option>
        <option value="2023">2023</option>
        <option value="2024">2024</option>
    </select>

optgroup

   <!--optgroup 定义选项组-->
    <select>
        <optgroup label="年">
            <option value="2017">2017</option>
            <option value="2018">2018</option>
            <option value="2019">2019</option>
            <option value="2020">2020</option>
        </optgroup>

        <optgroup label="月">
            <option value="1月">1月</option>
            <option value="2月">2月</option>
            <option value="3月">3月</option>
            <option value="4月">4月</option>
        </optgroup>

        <optgroup label="日">
            <option value="1日">1日</option>
            <option value="2日">2日</option>
            <option value="3日">3日</option>
            <option value="4日">4日</option>
        </optgroup>
    </select>

detelist 提示列表

    <!--提示列表 detelist-->
    <input list="aaa" placeholder="请选择你的英雄">
    <datalist id="aaa">
        <option value="庄周" selected="selected">辅助英雄</option>
        <option value="孙尚香">ADC</option>
        <option value="亚瑟">战士</option>
        <option value="鲁班">射手</option>
    </datalist>

布局方式

框架布局

<frameset rows="20%,*">
   <frame src="a.html" noresize="noresize">
 	
 	<frameset cols="20%,60%,20%">
		<frame src="b.html" noresize="noresize">
		<frame src="c.html" noresize="noresize">
		<frame src="c.html" noresize="noresize">
 	</frameset>
</frameset>

优点：缺点：应用场合：

表格布局

div布局