html | 易学教程

html版本

:html5版本

文档字符集

:字符集utf-8

html标签语义化

合适的地方给一个最为合适的标签
无语义化

常用标签

标题标签:<h1>…<h6>
段落标签: //paragraph
水平线标签:<hr /> //单标签
换行标签: //单标签
div span:没有语义,布局用
文本格式化标签: //加粗
文本格式化标签: //倾斜
文本格式化标签:<s></s><del></del> //加删除线
文本格式化标签:<ins></ins> //加下划线

<body>
    <strong>好粗的东西啊</strong><br>
    <i>斜了斜了,赶紧脉动回来</i><br>
    原价:<del>180</del> 现价:<ins>100</ins>
</body>

文本格式化标签

图像标签:

<body>
<!--src属性必写，alt是当图片不存在的时候的占位符，title是鼠标放上去的时候显示的文本-->
<img src="/i/eg_tulip.jpg"  alt="上海鲜花港 - 郁金香" title="来啊,快活啊" width="300px" height="300px" border="3px"/>

</body>

demo

链接标签

<a href=“http://www.baidu.com” target="_blank">百度</a> //跳外链,新窗口打开
<a href=“图片标签.html” target="_self">练习页面</a> //跳内链,替换窗口

锚点定位

<body>
    <div>
        <h3 id="column">目录</3>
            <a href="#movie">电影</a>
    </div>

   <p>占位</p>
   <p>占位</p>
   <p>占位</p>
   <p>占位</p>
   <p>占位</p>
   <p>占位</p>
   <p>占位</p>
   <p>占位</p>
   <p>占位</p>
   <p>占位</p>
    <div class="content">
        <h3 id="movie">电影 <a href="#column">返回目录</a></h3>
        <<杀破狼>>
            <<功夫之王>>
    </div>
</body>

锚点demo

base标签

base标签是用来指定下面的链接都使用怎样的方式打开新的链接：_self（本窗口打开）_blank（新窗口打开）

<head>
    <base target="_blank" />  //单标签
</head>

html特殊字符

特殊字符对照表

无序列表

<body>
    <h4>一个无序列表：</h4>
    <ul>
        <li>咖啡</li>
        <li>茶</li>
        <li>牛奶</li>
    </ul>
</body>

无序列表

有序列表

<body>
    <h4>最牛国家排行榜：</h4>
    <ol>
        <li>中国</li>
        <li>美国</li>
        <li>日本</li>
    </ol>
</body>

有序列表

自定义列表

<body>
    <dl>
        <dt>贵州</dt>
        <dd>凯里</dd> //dd是对dt的解释 说明
        <dd>兴义</dd>
    </dl>
    <dl>
        <dt>广东</dt>
        <dd>广州</dd>
        <dd>深圳</dd>
    </dl>
</body>

自定义列表

表格

<body>
    <!--cellspacing:单元格之间/单元格与边框之间的间隙
          cellpadding: 内容与单元格之间的间隙
           align: 表格相对周围元素的水平对齐方式 left center right
   -->
    <table border="1" width="500" align="center" cellspacing="10" cellpadding="0">
        <caption>丁丁记账</caption>
        <thead>
            <tr align="center">
                <th>Month</th>
                <th>Savings</th>
            </tr>
        </thead>
        <tbody>
            <tr align="center">
                <td>January</td>
                <td>$100</td>
            </tr>
        </tbody>
    </table>
</body>

表格demo (小说排行)

<table border="1" align="center" cellspacing="0" cellpadding="0" width="500">
        <caption></caption>
        <thead>
            <tr>
                <th>排名</th>
                <th>关键词</th>
                <th>趋势</th>
                <th>今日搜索</th>
                <th>最近七日</th>
                <th>相关链接</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>鬼吹灯</td>
                <td><img src="imgs/arrow.png" alt="" width="10" height="20"></td>
                <td>321</td>
                <td>110</td>
                <td><a href="#">贴吧</a><a href="#">图片</a><a href="#">百科</a></td>
            </tr>
            <tr>
                <td>2</td>
                <td>灯吹鬼</td>
                <td><img src="imgs/arrow.png" alt="" width="10" height="20"></td>
                <td>222</td>
                <td>111</td>
                <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
            </tr>
        </tbody>
    </table>

文件结构

合并单元格

确定合并的是列(水平方向 colspan)还是行(垂直方向 rowspan )

<table border="1" width="500" align="center" cellspacing="10" cellpadding="0">
        <caption>合并单元格</caption>
        <thead>
            <tr align="center">
                <th>Month</th>
                <th>Savings</th>
                <th>expenditure</th>
            </tr>
        </thead>
        <tbody>
            <tr align="center">
                <!--合并行需要删除对应tr下的td-->
                <td rowspan="2">January</td>
                <td colspan="2">$100</td>
                <!--合并列只需要删除当前tr下的td-->
                <!--<td>$50</td>-->
            </tr>
            <tr align="center">
                <!--<td>February</td>-->
                <td>$200</td>
                <td>$50</td>
            </tr>
        </tbody>
    </table>

input控件

<body>
    <table border="0" width="500" align="center" cellspacing="0" cellpadding="0">
       <caption>青春不常在,赶紧谈恋爱</caption>
        <tr>
            <td>姓名:</td>
            <td><input type="text" name="name" value="胡一刀"></td>
        </tr>
        <tr>
            <td>所在地:</td>
            <td><input type="text" name="address"></td>
        </tr>
        <tr>
            <td>性别</td>
            <td>男<input checked="checked" type="radio" name="gender" value="1">女<input type="radio" name="gender" value="2"></td>
        </tr>
        <tr>
            <td>爱好</td>
            <td>唱歌<input checked="checked" type="checkbox" name="hobby" value="1"> 弹吉他<input type="checkbox" name="hobby" value="1"></td>
        </tr>
        <tr>
            <td>密码:</td>
            <!--size限制控件长度 maxlength限制输入长度-->
            <td><input type="password" name="passwd" size="15" maxlength="6"></td>
        </tr>
        <tr>
            <td></td>
            <td><input type="image" src="imgs/registry.png"></td>
        </tr>
        <tr>
            <td></td>
            <!--type=color data-->
            <td><input type="button" name="按钮"> <input type="submit" name="提交"> <input type="reset" name="重置"> <input type="date" name="日期"> <input type="color" name="颜色控件"></td>
        </tr>
        <tr>
            <td>上传头像:</td>
            <td><input type="file" name="icon"></td>
        </tr>
    </table>
</body>

input控件案例

label控件(for属性)

for属性对应的input空间的id，这样点击label对应的控件就会有反应

<body>
    <label for="male">Male</label>
    <input type="radio" name="sex" id="male" />
    <br />
    <label for="female">Female</label>
    <input type="radio" name="sex" id="female" />
</body>

label控件案例

textarea文本域控件

<body>    
    给我留言<!--cols:一行多少字 rows:多少行-->
    <textarea name="给我留言" cols="30" rows="10"></textarea>
</body>

textarea控件

select下拉菜单

<body>    
    <select>
        <option selected="selectd" value="1">AAAA</option>
        <option value="2">BBBB</option>
        <option value="3">CCCC</option>
    </select>
</body>

下拉菜单

form表单

<body>
    <form action="http://localhost:8080/app/rest/cust" method="post">
        First name:<br>
        <input type="text" name="firstname" value="Mickey">
        <br> Last name:<br>
        <input type="text" name="lastname" value="Mouse">
        <br><br>
        <input type="submit" value="提交"> <input type="reset" value="重置">
    </form>
</body>

form表单

来源：CSDN

作者：wsxxjqr2

链接：https://blog.csdn.net/qq_37279374/article/details/104339101

标签