html常用标签

html

HTML（超文本标记语言——HyperText Markup Language），它使用标签来定义文本的显示方式

标签tag

  • 开始、结束标签和内容组成完整的元素
  • 如<a href="https://monkeyjerry.top" target="_blank">我的主页</a>
    • href和target是标签的属性
  • 容器标签，如<p></p> ，在其中间可以插入其他标签
  • 单独标签，如 <br><img> 等，在他们中则不能插入其他标签
  • 标签可是使用大小写，推荐用小写
  • 标签会被解析成一个层次的DOM树

html文档结构

  • 文档声明：<!DOCTYPE html>声明文档类型（HTML5的声明方式）
  • 根标签：html标签
  • 头部：head
    • 内部可以写meta信息、title网页标题、script脚本、样式表等标签
    • <meta charset="utf-8"> 定义网页编码格式为utf-8
  • 正文：body标签

常用标签

链接

如<a href="https://monkeyjerry.top" target="_blank" onclick="alert('即将新开页打开我的个人主页')">我的主页</a>

  • href属性，指定链接
  • target属性，指定是否在本窗口中打开，_blank指在新窗口打开链接
  • onclick是点击事件，等号后面往往写一个js函数或脚本执行
    • 很多HTML标签都支持很多事件属性，常见有onclick、ondblclick、onkeydown、onkeyup、onkeypress、onmousedown、onmousemove、onmouseover、onsubmit、onchange等等
    • 后面写的函数称作事件响应函数或事件回调函数
  • 默认情况下，超链接点击后会发起一个HTTP GET请求

图片

如<img src="https://www.baidu.com/img/dong_8f1d47bcb77d74a1e029d8cbb3b33854.gif" alt="baidu_logo">

  • src指定图片路径
  • 图片会发起一个HTTP GET请求

标题

  • <h1>~<h6>
  • 现在用的少

图层

如<div id="logo" class="logo"></div>

  • id属性，标签的唯一标识
  • class属性，常用于样式表定位并附加样式，具体样式控制可参考常用CSS选择器
  • 目前<div>标签加上CSS，被广泛用于网页布局中

列表

  • 无序列表
<ul>
    <li>Java</li>
    <li>Python</li>
</ul>
  • 有序列表
<ol>
    <li>Java</li>
    <li>Python</li>
</ol>

表格

  • HTML表格的基本结构
    • <table>…</table>：定义表格
    • <tr>…</tr>：table row，定义表格的行
    • <th>…</th>：table header cell，定义表格的标题列即表头（文字默认加粗）
      • 现在th用的少，表格表头是否字体加粗，都用css控制
    • <td>…</td>：table data cell，定义表格的数据单元
<table border="1">
    <tr>
        <th>1,1</th>
        <th>1,2</th>
    </tr>
    <tr>
        <td>2,1</td>
        <td>2,2</td>
    </tr>
    <tr>
        <td colspan="2">占2列</td>
    </tr>
</table>

表单

  • 示例
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>my html</title>
    <script src="jquery.js"></script>
    <style>
        td { padding: 5px}
    </style>
</head>

<body>
    <form action="" method="POST" enctype="application/x-www-form-urlencoded">
        <table border="1" style="border-collapse: collapse">
            <tr>
                <td colspan="2">用户注册</td>
            </tr>
            <tr>
                <td>用户名</td>
                <td><input type="text" placeholder="用户名"></td>
            </tr>
            <tr>
                <td>密码</td>
                <td><input type="password" name="password" id="password"></td>
            </tr>
            <tr>
                <td>性别</td>
                <td>
                    <input type="radio" name="gender" id="gender" checked value="M">男
                    <input type="radio" name="gender" id="gender" value="F">女
                </td>
            </tr>
            <tr>
                <td>爱好</td>
                <td>
                    <input type="checkbox" name="interest" id="interest" value="music">音乐
                    <input type="checkbox" name="interest" id="interest" checked value="movie">
                    电影
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <input type="submit" value="提交">
                    <input type="reset" value="重置">
                </td>
            </tr>
        </table>
    </form>
</body>

</html>
  • 表单控件如果要提交数据，必须使用name属性，否则不能提交到服务端
  • form标签
    • action：表单数据submit提交到哪里
    • method：提交的方法，常用POST
    • enctype：对提交的数据编码，application/x-www-form-urlencoded表示在发送前编码所有字符（默认），空格转换为 "+" 加号，特殊符号转换为 ASCII HEX 值；multipart/form-data表示不对字符编码，在使用包含文件上传控件的表单时，必须使用该值；text/plain表示空格转换为 "+" 加号，但不对特殊字符编码

更多