HTML格式

常见标签

注释标签

标题标签

html是一种标记语言,通过各种标签来标记要显示到网页中的各个部分~

HTML格式

基本格式:

<html>
    <head>
        <title>第一个程序</title>
    </head>
    <body>
        hello world
    </body>
</html>

vscode中快捷键生成: ! + Tab

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

常见标签

注释标签

<!--这是一个注释-->

标题标签

    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>

段落标签

    <p>第一段</p>
    <p>第二段</p>
    <p>第三段</p>

换行标签

<br>是一个单标签,不需要结束标签

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. <br/> deserunt molestiae voluptatum! Ab hic tempora nisi, eos ipsum quae quia dolor alias, doloribus odio incidunt et blanditiis? <br/>Vitae, eius doloremque.</p>

格式化标签

加粗	<strong></strong> <b></b>
倾斜	<em></em> <i></i>
删除线	<del></del> <s><s/>
下划线	<ins></ins> <u></u>

    <strong>加粗</strong>
    <b>加粗</b>
    <em>斜体</em>
    <i>斜体</i>
    <del>删除线</del>
    <s>删除线</s>
    <ins>下划线</ins>
    <u>下划线</u>

图片标签

图片标签<img>也是一个单标签:其中src是必须要有的属性,表示图片的存储位置.

<img src="D:\gitee\one-question-per-day\4_24\1.jpg">

超链接标签

<a>标签

    <a href="https://www.sogou.com">
        <img src = "D:\gitee\one-question-per-day\4_24\1.jpg">
    </a>

    <a href="https://www.sogou.com" target="blank">
        <img src = "D:\gitee\one-question-per-day\4_24\1.jpg">
    </a>

表格标签

    <table>
        <tr>
            <td>张三</td>
            <td>110</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>120</td>
        </tr>
        <tr>
            <td>王五</td>
            <td>130</td>
        </tr>
    </table>

这只是最简陋的一个表格,想要好看,就得加一些属性:

    <table border="2px " width = "200" height = "300" cellspacing = "0" cellpadding = "0" align="center">  
        <tr>
            <th>姓名</th>
            <th>电话</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>110</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>120</td>
        </tr>
        <tr>
            <td>王五</td>
            <td>130</td>
        </tr>
    </table>

列表标签

类型	标签
无序列表	ul
有序列表	ol
自定义列表	dl

    <h2>无序列表</h2>
    <ul>
        <li>电脑</li>
        <li>笔记本</li>
        <li>牛奶</li>
    </ul>

    <h2>有序列表</h2>
    <ol>
        <li>苹果</li>
        <li>香蕉</li>
        <li>梨</li>
    </ol>

    <h2>自定义列表</h2>
    <dl>
        <dt>时间安排</dt>
        <dd>上课</dd>
        <dd>睡觉</dd>
        <dd>吃饭</dd>
    </dl>

表单标签

文本框text

    <form>
        <input  type="text">
    </form>

密码框password

    <form>
        <input type="password">
    </form>

单选框radio

    <form>
        <input type="radio">男
        <input type="radio">女
    </form>

搞错了,再来~

    <form>
        <input type="radio" name = "gender">男
        <input type="radio" name = "gender">女
    </form>

使用一个name 写入相同字符使两个单选框绑定~

升级~

<form>
        <input type="radio" name = "gender" id = "male"> <label for="male">男</label>
        <input type="radio" name = "gender" id = "female" checked = "checked"><label for="female">女</label>
</form>

checked默认选中女,新增一个id来绑定label中的for中的元素, label使选中文字也可以选择~

复选框checkbox

    <form >
        <input type="checkbox">吃饭
        <input type="checkbox">睡觉
        <input type="checkbox">打豆豆
    </form>

同样可以搭配上述单选框所搭配的属性~