day50 HTML5【超文本标记语言】

HTML
　　超文本标记语言，一个网页的骨架，给前端看的页面文件【服务端给客户端】
　　HTML文档结构
<!DOCTYPE html>
<!-- html：页面根标签 lang="zh"告诉浏览器页面的语言 -->
<html lang="zh">
<!-- head：头标签 - 页面编码、页面标签标题、页面样式、页面脚本 -->
<head>
    <!--页面编码-->
    <meta charset="utf-8">
    <!--页面标签标题-->
    <tItlE>标签</tItlE>
    <!--页面样式-->
    <style></style>
    <!--页面脚本-->
    <script></script>
</head>
<!-- body：体标签 - 页面内容、页面脚本 -->
<hr>

<!-- 用于内容显示的标签全部书写在body中 -->
<!-- 标题：h1~h6 -->
<h1 id="top">一级标题</h1> <!-- 一般一个页面只出现一次，代表该页面的主内容解释 -->
<h2>二级标题</h2>
<h6>六级标题</h6>
<!-- 段落：p -->
<p>段落</p>
<!-- 文本相关：一般会被p标签嵌套 -->
<span>span标签</span>
<b>加粗标签</b>
<strong>以加粗方式强调的标签</strong>
<i>斜体标签</i>
<em>以斜体方式强调的标签</em>
<sup>上角标</sup>
<sub>下角标</sub>

<!--功能标签-->
<!--换行-->
1<br />2
<!--分割线-->
<hr>

<!--超链接: target: _self _blank-->
<a href="https://www.baidu.com" target="_self">前往百度</a>
<a href="1.第一个页面.html" target="_self">第一个页面</a>
br*100
<a href="#top">go top</a>

<!-- 图片标签: src：图片源  alt：资源加载失败的文本提示 title：鼠标悬浮的文本提示 -->
<img title="你是它" alt="二哈" src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1925405117,207445978&fm=26&gp=0.jpg">

<!-- 组合标签 -->
<!-- 列表 -->
<!--ul>li{列表项}*3-->
<ul>
    <li>列表项</li>
    <li>列表项</li>
    <li>列表项</li>
</ul>
<!--ol>li{第$项}*3-->
<ol>
    <li>第1项</li>
    <li>第2项</li>
    <li>第3项</li>
</ol>

<!--表格标签-->
<!-- tr: 行  th: 标题单元格  td：内容单元格 cellpadding:单元格内部间距  cellspacing：单元格间的间距 -->
<table border="1" width="500" height="300" cellpadding="10" cellspacing="0">
    <thead>
        <tr style="height: 50px">
            <th>标题</th>
            <th>标题</th>
            <th>标题</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
        <tr>
            <td colspan="2">单元格</td>
            <!--<td>单元格</td>-->
            <td rowspan="2">单元格</td>
        </tr>
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <!--<td>单元格</td>-->
        </tr>
    </tbody>
    <tfoot>
        <!--<tr>-->
            <!--<td>单元格</td>-->
            <!--<td>单元格</td>-->
            <!--<td>单元格</td>-->
        <!--</tr>-->
    </tfoot>
</table>

<!-- 表单标签: 完成前后台交互的 - 将前台用户输入的内容提交给后台 -->
<!-- form  action：提交后台的接口地址  method：提交方式 get post -->
<!-- input：name明确才会往后台提交，name是键，value是值(可以手动规定也可以用户输入) -->
<form action="" method="">
    <input type="text" name="user" placeholder="文本占位符">
    <input type="password">
    <input type="color">
    <input type="number">
    <!--提交文件-->
    <input type="file">
    <!--单选框-->
    男<input type="radio" name="sex" checked>
    女<input type="radio" name="sex">
    一班<input type="radio" name="cless">
    二班<input type="radio" name="cless" checked>
    <br>
    <!--复选框-->
    男<input type="checkbox" value="m" name="like" checked>
    女<input type="checkbox" value="f" name="like" checked>
    人妖<input type="checkbox" value="mf" name="like">

    <!--选择列表 multiple：可以多项操作-->
    <select name="subject" multiple>
        <option value="chinese">语文</option>
        <option value="math">数学</option>
        <option value="python">python</option>
    </select>

    <!--文本域-->
    <textarea></textarea>

    <!--三个按钮-->
    <button type="button">按钮</button>
    <button type="reset">重置</button>
    <button type="submit">提交</button>
    <!--提交-->
    <!--<input type="submit" value="登陆">-->
</form>


<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

<!--页面脚本-->
<script></script>
</body>
</html>
day50 HTML5【超文本标记语言】

猜你喜欢
