html5基础用法

nercon

2020-05-04

html5用法

一、基础用法

标签对齐属性设置：align="right/left/center"，默认是left，当设置成right时标签右对齐。
target="_blank" ：当点击超链接时在新的页面中打开，如果不设置target，则超链接页面会覆盖掉当前页面，不会在新页面中打开。

<p id="foo1"><a href="http://www.baidu.com" target="_blank">百度</a>这是一个p标签</p>

html格式化

格式化标签	作用
b	定义粗体文字
big	定义大号字
em	定义着重文字
i	定义斜体文字
small	定义小号文字
strong	定义加重语气
sub	定义下标字
sup	定义上标字

注意：所有的格式化时都必须使用<>包裹单词，例如：。还有big在html5中已经取消来，被css样式替换掉了。设定被上标和下标的文字需要在这些文字的前后添加其他的内容才能对比出来，否则看不出来效果。

三种样式表的插入方法
- 外部样式表
  - rel="stylesheet"：表示的是外部样式表
  - type="text/css"：表示的是文件的类型
  - href=""：表示的是文件的来源
```
<link rel="stylesheet" type="text/css" href="css文件">
```
- 内部样式表
```
<style type="text/css">
    选择器{
        样式的设定
    }
</style>
```
- 内联样式表
```
<p style="color:red"></p>
```

二、html链接

- 链接数据
    - 文本链接
    - 图片链接
- 属性
    - href属性：指向另一个文档的链接
    - name属性：创建文档内的链接
    ```html

    <a name="tips" href="#tips1">hello</a>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <a name="tips1" href="#tips">跳转到hello</a>
    ```

name属性用于定义文档内的跳转，如果希望从文档中的一个地方跳转到另外一个地方可以使用name和href属性，需要注意的是：name属性规定好超链接的名字后，另外一个标签的href中的设置必须是"#跳转链接的名字"，必须加上#，否则会创建失败。
- img标签属性
- alt：替换文本属性，当图片加载不出来的时候显示的文本名字
- width：宽
- height：高
```html

<a href="http://www.baidu.com" target="_blank">
        <img src="release_open.png" alt="上传log" width="50rpx" height="50rpx">点击我
    </a>
    ```

注意：a标签中可以插入img图片标签，可以达到通过点击图片直接跳转链接的目的

三、表格的使用

表格	描述
table	定义表格
caption	定义表格的标题
th	定义表格的表头
td	定义表格的单元
tr	定义表格的行
thead	定义表格的页眉
tbody	定义表格主体
tfoot	定义表格的页脚
col	定义表格的列属性

<table border="1" cellpadding="20">
    <tr>
        <td>姓名</td>
        <td>课程</td>
        <td>总分</td>
    </tr>
    <tr>
        <td>李镇</td>
        <td>
            <ol>
                <li>语文</li>
                <li>数学</li>
                <li>政治</li>
                <li>军事</li>
            </ol>
        </td>
        <td>370</td>
    </tr>
</table>

注意：在标签td中也可以写入ul/ol和li标签

四、有序、无序、嵌套及自定义列表的使用

无序列表
- 使用标签：ul、li
- 属性：type="disc/circle/square"
  - disc：设置无序列表中的图标为实心圆
  - circle：设置无序列表中的图标为空心圆
  - square：设置无序列表中的方块
有序列表
- 使用标签：ol和li
- 属性：type="A/a/I/i/start"
嵌套列表
- 使用标签：ul、ol和li

<ul>
    <li>动物</li>
    <ol>
        <li>老虎</li>
        <li>狮子</li>
    </ol>
    <li>人类</li>
    <ol>
        <li>中国人</li>
        <li>美国人</li>
    </ol>
    </ul>

自定义列表
- 使用标签：dl、dt和dd

<dl>
    <dt>hello world</dt>
        <dd>课程1</dd>
    <dt>hello world</dt>
        <dd>课程2</dd>
    <dt>hello world</dt>
        <dd>课程3</dd>
</dl>

五、表单的设置

表单的设置可以使用colspan="单元格个数"来合并单元格
表单的可以通过正常的width、height和style来设置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>table布局</title>
</head>
<body marginwidth="0px" marginheight="0px">
    <table width="100%" height="950px" style="background-color:darkgray">
        <tr>
            <td colspan="2" width="100%" height="10%" style="background-color:aqua">头部</td>
        </tr>
        <tr>
            <td width="30%" height="80%" style="background-color:blue">左菜单</td>
            <td width="70%" height="80%" style="background-color:blueviolet"></td>
        </tr>
        <tr>
            <td width="100%" height="10%" colspan="2" tyle="background-color:darkcyan">这是底部</td>
        </tr>
    </table>
</body>
</html>

六、div的设置

div中可以嵌套多个div
div可以通过width、height和style来设置
div可以使用float:left/right来设置浮动，可以使用clean:both来清除浮动，清除浮动主要用在前边div设置了浮动，但是当前的div不需要浮动时。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index01</title>
    <link rel="stylesheet" href="../html5/index01.css">
    <style type="text/css">
        body{
            margin:0px;
        }
        div#container{
            width:100%;
            height:950px;
            background-color:darkgray;
        }
        div#heading{
            width:100%;
            height:10%;
            background-color:aqua;
        }
        div#content_menu{
            width:30%;
            height:80%;
            background-color:antiquewhite;
            float:left;
        }
        div#content_body{
            width:70%;
            height:80%;
            background-color:blueviolet;
            float:left;
        }
        div#footing{
            width:100%;
            height:10%;
            background-color:black;
            clear:both;
        }
    </style>
</head>
<body>
    <!--<div id="div1">
        <p>第一个</p>
        <p>第二个</p>
        <a href="https://www.toutiao.com">头条<br/>
            <img src="" alt="图片">
        </a>
    </div>
    <br/>-->
    <div id="container">
        <div id="heading">头部</div>
        <div id="content_menu">内容菜单</div>
        <div id="content_body">内容主体</div>
        <div id="footing">底部</div>
    </div>
</body>
</html>

七、表单的使用

标签：form和input
input标签的type属性：
- text：文本输入，用户用户名输入设置
- password：密码输入
- checkbox：复选框设置，即多选
- radio：单选框设置，但是需要注意的是：当设置单选的时候，每一个input的type必须设置成radio，同时name属性设置相同的名字，如果名字不同无法归类，也就无法实现单选的效果
- button：设置按钮，value可以指定显示的内容
- submit：设置提交/确认按钮，value可以指定显示的内容
下拉菜单标签：form、select和option
- 一个select包含多个option，select必须在form表单中
- option标签中的value值是当提交时传递为服务器的内容，如果没有写，则默认传递标签中的内容
文本框：textarea标签
- cols="num"：设定文本框的列数
- rows="num"：设定文本框的行数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <form action="">
        用户名:
        <input type="text">
        <br/>
        密码:
        <input type="password">
        <br/>
        你喜欢的水果有:
        <br/>
        苹果<input type="checkbox">
        香蕉<input type="checkbox">
        西红柿<input type="checkbox">
        梨<input type="checkbox">
        <br/>
        性别:
        男<input type="radio" name="sex">
        女<input type="radio" name="sex">
        <br/>
        最喜欢的网站:
        <select id="" name="">
            <option value="百度">www.baidu.com</option>
            <option value="">www.taobao.com</option>
            <option value="">www.toutiao.com</option>
            <option value="">www.ejpro.com</option>
        </select>
        <br/>
        <textarea cols="30" rows="20">请填写个人简介</textarea>
        <br/>
        <input type="button" value="按钮">
        <input type="submit" value="确认">
    </form>
</body>
</html>

八、html5框架

框架标签：frame，框架对于页面的设计有很大的作用
框架集标签：frameset
- 框架集标签定义如何把窗口分割为框架
- 每一个frameset定义一系列的行或者列
- rols/cols="num"规定了每行或者每一列占据屏幕的面积比例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>框架</title>
</head>
<frameset rows="30%,50%,20%">
   <frame src="../html5/frame01.html"></frame> 
   <frame src="../html5/frame02.html"></frame> 
   <frame src="../html5/frame03.html"></frame> 
</frameset>
</html>

注意：如果是竖向分割则使用cols，如果是横向分割则使用rows。

常用标签
- noresize：固定框架大小
- cols：列
- rows：行
内联框架：iframe标签
- frameborder="0"设置内联框架没有边框，如果不设置会显示边框
- 当内联框架中的内容很多超过当前页面设定的内联框架的大小的时候，框架会以进度条的方式来上下翻页查看

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>框架</title>
</head>
<iframe src="../html5/frame01.html" frameborder="0"></iframe>
</html>

框架嵌套
- 使用的是iframe标签
- 标签中的src属性是内联的文件或者资源的名字
- width和height设置宽和高
- frameborder="0"设置框架没有边框
- 在嵌套框架中使用a标签，标签中的target属性分为：
  - _self：在当前的框架中展示
  - _blank：生成一个空白的网页展示
  - _parent；在当前框架的上一层框架中展示
  - _top：不在框架展示，而是在当前所在的网页文件中展示，即覆盖所有的内容

<!--最顶级文件本身index03.html-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>框架</title>
</head>
<!--<frameset rows="30%,50%,20%">
   <frame src ="../html5/frame01.html"></frame> 
   <frame src ="../html5/frame02.html"></frame> 
   <frame src ="../html5/frame03.html"></frame> 
</frameset>-->
<iframe src="../html5/frame01.html" frameborder="0" width="1000px" height="1000px"></iframe>

</html>


<!--顶级文件中嵌套框架的最外层框架(frame03.html)-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body bgcolor="purple">
    Frame01
    <br/>
    <iframe src="../html5/frame02.html" frameborder="0" width="700px" height="700px"></iframe>
</body>
</html>

<!--嵌套框架的第二层框架(frame02.html)-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body bgcolor="red">
    Frame02
    <br/>
    <iframe src="../html5/frame03.html" frameborder="0" width="500px" height="500px"></iframe>    
</body>
</html>

<!--在嵌套框架的第三层框架(frame03.html)-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body bgcolor="skyblue">
    Frame03
    <br/>
    <a href="https://www.toutiao.com" target="_top"><img ="../html5/release_open.png" alt="图片">今日头条</a>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</body>
</html>

九、XHTML的规范化

简介
- 指的是可扩展的超文本标记语言
- 与HTML4.01几乎是相同的
- 是更严格和更纯净的HTML语言
- 是以XML应用的方式来定义的HTML
- 得到了所有主流浏览器的支持
为什么使用？
为了代码的完整性和良好性
文档声明：
DTD：规定了使用通用标记语言的网页语法
语法
- 元素必须有正确的嵌套
- 元素必须始终关闭
- 元素必须小写
- 文档必须有一个根元素