HTML从0到1(1)

最新推荐文章于 2024-05-20 22:08:52 发布

多喝一点热水呢

最新推荐文章于 2024-05-20 22:08:52 发布

阅读量208

点赞数

文章标签： html

本文链接：https://blog.csdn.net/weixin_50232889/article/details/108436441

版权

HTML从0开始
HTML：超文本标记语言
开发工具：

浏览器
编辑器（webstorm)

HTML文件的基本结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>html结构</title>
</head>
<body>

</body>
</html>

注释分为单行和多行

单行 ctrl+/
多行ctrl+shift+/

HTML标签

html根标签
html head标签

<meta charset="UTF-8">
<title>html</title>

html body标签

<body>


</body>

标题标签

<h1>hello</h>
<h2>hello</h>
<h3>hello</h>
.....
<h6>hello</h>

段落标签p

 <p>hello</p>

链接标签a

 <a href="">hello</a>

图片标签Img

<img src="" alt="">hello

文本类标签

<span>hello</span>
<b>hello</b>
<i>hello</i>
<strong>hello</strong>
<em>hello</em>xc
<del>hello</del>
x <sup>2</sup> + y <sup>2</sup> =z <sup>2</sup>
log<sub>c</sub> a+ log<sub>c</sub>b= log<sub>c</sub>（a+b）

列表标签

<ul>
    <li>hello</li>
</ul>
<ol>
    <li>hello</li>
</ol>
<dl>
    <dt>hello</dt>
    <dd>hello</dd>
</dl>

表格标签table

 <table border="1px" cellpadding="0" cellspacing="0" width="1500px" >
        <caption>学习计划</caption>
        <tr >
            <td colspan="6">学习卡</td>
        </tr>
        <tr>
            <td colspan="5">登记日期</td>

            <td rowspan="5" width="300px"></td>
        </tr>

        <tr>
            <td>姓名:</td>
            <td>
                <form action="">
                  性别：<input type="radio" name="sex" value="男">男
                       <input type="radio" name="sex" value="女">女
                </form>
            </td>
            <td colspan="2">电话:</td>
            <td>住址:</td>
        </tr>
        <tr>
            <td>qq邮箱:</td>
            <td>主讲老师:</td>
            <td width="100px"></td>
            <td>辅导老师:</td>
            <td width="100px"></td>
        </tr>
        <tr>
            <td colspan="5" align="center">基础情况:</td>
        </tr>
        <tr>
            <td colspan="5" align="center">温馨提示:</td>
        </tr>
    </table>

在这里插入图片描述

元素分类
块级元素：h , p , ul ,li ,table , dl ,dt,dd,ol
内联元素：显示时不会以新的一行开始，所占区域由内容决定
b，td ， a ，span
替换元素 img
表单标签form

<form action="">
        <input type="hidden" name="uid" value="1">
        <!--<div>-->
            <!--身份：<input type="text" name="role" value="管理员" disabled="disabled">-->
        <!--</div>-->
        <div>
            <label for="username">身份：</label><input type="text" name="role" value="管理员" readonly id="username">
        </div>
        <div>
            姓名：<input type="text" name="username" placeholder="请输入用户账号">
        </div>
        <div>
            性别：<input type="radio" name="sex" value="男" checked>男<input type="radio" name="sex" value="女">女
        </div>
        <div>
            你喜欢的电影：
            <input type="checkbox" name="movie" value="八百标兵">八百标兵
            <input type="checkbox" name="movie" value="1942">1942
            <input type="checkbox" name="movie" value="蒙太奇">蒙太奇
        </div>
        <div>
            附件：<input type="file" name="secret">
        </div>
        <select name="fruits" multiple size="8">
            <option value="苹果">苹果</option>
            <option value="柿子" selected>柿子</option>
            <option value="梨">梨</option>
            <option value="苹果">苹果</option>
            <option value="柿子" selected>柿子</option>
            <option value="梨">梨</option>
            <option value="苹果">苹果</option>
            <option value="柿子" selected>柿子</option>
            <option value="梨">梨</option>
        </select>
        <div>
            评价：<textarea name="comments" cols="30" rows="10"></textarea>
        </div>

        <!--<button>提交</button>-->
        <input type="submit" value="注册">
        <input type="reset">
        <!--<input type="button" value="注册">-->
    </form>

在这里插入图片描述

其他标签

<br>换行
<hr>分割线

html实体
&lt 相当于 <
&gt 相当于>
&npsb 相当于空格
多媒体

<video src="" controls="controls">

</video>

<audio src="" controls="controls">
</audio>

多喝一点热水呢

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML从0到1(1)

HTML从0开始HTML：超文本标记语言开发工具：浏览器编辑器（webstorm)HTML文件的基本结构<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>html结构</title></head><body></body></html>注释分为单行和多行
复制链接

扫一扫