HTML—学习（1）

1.html代码不区分大小写

<html>
<head>
    <!--设置页面的信息-->
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
</head>
<body>
    <!--显示到页面上的内容-->
</body>
</html>

2.有些html没有结束标签，比如换行标签，就得在标签内结束

<br/>

3.标题标签，h1到h6依次变小，自动换行

<h1>我是标题1</h1>
<h6>我是标题2</h6>

4.水平线标签

<hr/>

5.html适配手机屏幕，在header中添加以后代码

<meta name="viewport" content="width=device-width, initial-scale=1.0, 
minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" /> 
1、width=device-width ：表示宽度是设备屏幕的宽度 
2、initial-scale=1.0：表示初始的缩放比例 
3、minimum-scale=0.5：表示最小的缩放比例 
4、maximum-scale=2.0：表示最大的缩放比例 
5、user-scalable=yes：表示用户是否可以调整缩放比例

6.空格标签

&nbsp;

7.列表标签

<!-- 没有序号列表标签 -->
    <dl>
        <dt>山西</dt>
        <dd>太原</dd>
        <dd>晋城</dd>
        <dd>长治</dd>
        <dd>晋中</dd>
    </dl>
    <hr/>
    <!-- 有序号的列表标签，在ol中添加type属性，如何type指定1，则会按照123...排序，如何type指定a，则会按照abc...排序。 -->
    <ol type="i">
        <li>山西</li>
        <li>河北</li>
        <li>河南</li>
        <li>山东</li>
    </ol>
    <!-- 无序列表标签，在ul中加入type标签，type可以指定前面标签 -->
    <ul type="circle">
        <li>中国</li>
        <li>美国</li>
        <li>日本</li>
        <li>俄罗斯</li>
    </ul>

8.图片标签

<!--width，height:设置宽高；border设置边框-->
<img src="http://img15.3lian.com/2015/f2/136/d/63.jpg" width="200" height="200" border="1">

9.在一个区域内可以显示html网页，类似于Android的webView

<iframe src="http://www.baidu.com" width="500" height="500"></iframe>

10.表格标签

<!--rowspan：跨列，colspan:跨行-->
<table align="center" border="1" bordercolor="#f00" cellspacing="0" cellpadding="20">
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th rowspan="4">学科</th>
        </tr>
        <tr>
            <td>王五</td>
            <td>男</td>

        </tr>
        <tr>
            <td>张丽</td>
            <td>女</td>

        </tr>
        <tr>
            <td align="center" colspan="2">李四</td>
        </tr>
    </table>
posted @ 2018-03-21 21:47  我的网名  阅读(29)  评论(0)    收藏  举报