H5之html初识

什么是HTML5?
html5是一门超文本标记语言,在html中,对于大小写是不敏感的,同时html中所有出现的内容都是节点.
在html中的跟标签是html,一个页面只有一个根标签,根标签中有两个子标签:head和body.
html和css,js并称网络三剑客;各自有各自的分工
html主要负责界面框架的搭建,css主要负责页面元素的设置,js主要负责给页面添加上动态事件,实现交互
html中常见标签
标签主要分为单标签和双标签,单标签主要是功能性标签,双标签主要是结构性标签.
标签也可以分为:行标签,快标签和航快标签
行标签:可以和别的标签同行显示,会在标签后面加一个空格.行标签在设置的时候是不能设置宽高的
快标签:只能单独一行显示,在标签后面会自动换行,块标签是可以设置宽高的
行块标签:同行显示,但是可以设置宽高.
div和span标签是最常用到的两个标签:
<div>我是块级标签</div>;
<span>我是行级标签</span>;

其它还有一些常用到的标签有:

标题标签:
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>
换行标签:
<br>
<!--图片标签:行块标签:内联块标签,具有行与块各自的优点,多张图片时,图片默认是图片下对齐-->
<!--alt是图片加载失败后的文本解释,title是给图片起的名字-->
<img style="vertical-align: middle;" src="./image/宇智波鼬.jpg" alt="隐分身之术" />
<img style="vertical-align: " src="./image/宇智波鼬2.jpg" alt="多重隐分身之术" title="mmp" />
<!--行标签是没有宽高的,块级标签是可以设置宽高的-->
<!--超链接标签:使用超链接的时候,要带上协议https://;如果不带上协议就会访问同根目录下的相同名的文件-->
<a href="https://www.baidu.com">前往百度</a>
<!--超链接标签:如果链接标签后面没有target,就会在本页面中前往目标页面,如果有target,就会重新打开一个页面,前往目标页面-->
<a href="http://www.sina.com.cn" target="_blank">前往新浪</a>
<!--5.文本相关标签-->
<p>我是文本标签</p>
<!--强调标签:strong是字体加粗强调,em是斜体强调,b标签也是加粗和strong完全一样,i和em也完全一样-->
<strong>加粗强调</strong>
<em>斜体强调</em>
<b>加粗</b>
<i>斜体</i>
<!--span里面一般存放存文本  角标sup,sub-->
<span>文本<sup>上角标</sup></span>
<span>文本<sub>下角标</sub></span>
<!--小文本-->
<small>小文本</small>
<!--区域标签-->
<section>section1</section>
<section>section2</section>
<!--组合标签-->
<!--列表:无序列表和有序列表-->
<ul>
    <li>列表项</li>
    <li>列表项</li>
    <li>列表项</li>
</ul>
<!--reversed(倒叙):布尔类型的属性,属性值为本身,可以省略-->
<ol start="100" type="1" reversed="">
    <li>列表项</li>
    <li>列表项</li>
    <li>列表项</li>
</ol>
<!--其他列表-->
<dl>
    <dt>列表头</dt>
    <dd>列表项</dd>
    <dd>列表项</dd>
    <dd>列表项</dd>
</dl>
<!--表格-->
<table border="1" width="600" height = "400" cellspacing="0" cellpadding="20" rules="all">
    <caption>
        课程表
    </caption>
<thead>
<tr>
    <th>标题</th>
    <th>标题</th>
    <th>标题</th>
</tr>
</thead>
<tbody>
<tr>    
    <td>单元格</td>
    <td>单元格</td>
    <td>单元格</td>
</tr>
</tbody>
<tfoot>
<tr>    
    <td>单元格</td>
    <td>单元格</td>
    <td>单元格</td>
</tr>
</tfoot>
</table>

表单标签form也是经常会被用到登录界面中:
form表单经常是需要和input的表单联合使用的;
input标签根据type的不同,会有很多种形式

<!--表单 action:服务器响应文件的具体地址或者服务器接口地址-->
<!--method(请求方式) :GET|POST,默认是GET-->
<form action="page02.html" method=""><input><br>
    <table >用户名</table><input><br>
    <table style="color: red">密码</table><input type="password"><br>
    <input type="date">
    <input type="time">
    <input type="file">
    <input type="number" step="10" max="100" min="10">
    <input type="range">
    <input type="button" value="按钮">
    <input type="submit" name="提交">
</form>