HTML基础入门知识整理

 本篇博文是初识HTML时潦草整理的,欢迎补充指正~~

部分学习时的HTML代码请查看我的个人github:HTML git地址

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--UTF-8防止乱码-->
    <meta name="keywords" content="官方,原装">
    <title>小南瓜的网站</title>
</head>
<body bgcolor=#ba55d3 style="height:1500px">
<!--body的背景可以是一张图-->
    <h1 align="center">123</h1>
    <hr>
    <h2>123</h2>
    </hr>
    <h3>123</h3>
    <p>HTML 是用来描述网页的一种语言。
        HTML 指的是超文本标记语言 (Hyper Text Markup Language)
        <blockquote> HTML 不是一种编程语言,而是一种标记语言</blockquote>
        (markup language)
        标记语言是一套标记标签 (markup tag)<br/>
        HTML 使用标记标签来描述网页
        <q>HTML 标签</q>
        HTML 标记标签通常段落被称为 HTML 标签 (HTML tag)。
        HTML <abbr>由尖括号包围的关键词</abbr>签是,比如
        HTML 标签通常是成对出现的,比如 <b> 和 </b>
        标签对中的第一个标签是开始标签,第二个标签是结束标签
        开始和结束标签也被称为开放标签和闭合标签</p>
    <a href="#123">查看标记段落</a>
    <a href="http://www.hao.com" target="_blank">hao123</a>
    <!--必须加协议,图片源可以是地址,跳转两种找相对路径的方式,从里向外和从外向里 快捷键Ctrl+?-->
    <a href="./12.html" target="_blank">12</a>

    <img src="logo.png" align="left" alt="标志" width="80" height="20" title="123">
    <!--行级块元素(特殊)-->
    <!--html标签语义化
    1.方便开发人员维护
    2.有利于seo(搜索引擎优化)
    -->
    <table border="2">
        <tr>
            <th>Heading</th>
            <th>Another Heading</th>
        </tr>
        <tr>
            <td>row= cell=</td>
        </tr>
        <tr>
            <td>11</td><td>22</td>
        </tr>
        <tr>
            <td>33</td><td>44</td>
        </tr>
    </table>
        <table border="3" cellpadding="10" cellsapcing="15">
            <tr>
                <td>row=1 cell=2</td><!--th和td标签都要写在tr里面-->

            </tr>
        </table>
    <ul type="disc"><!--无序列表-->
        <li>12345 <a href="">链接</a></li>
    </ul>
    <ul type="circle"><!--无序列表-->
        <li>12345 <a href="">链接</a>
            <ol>
                <li>1234567</li>
            </ol>
        </li>
    </ul>
    <ul type="square"><!--无序列表-->
        <li>12345 <a href="">链接</a></li>
    </ul>
    <ol type="1">
        <li>1234567</li>
    </ol>
    <ol type="A">
        <li>1234567</li>
    </ol>
    <ol type="a">
        <li>1234567</li>
    </ol>
    <!----order有序列表-->
    <dl>
        <dt>计算机</dt>
        <dd>用来计算的仪器 ... ...</dd>
        <dt>显示器</dt>
        <dd>以视觉方式显示信息的装置 ... ...</dd>
    </dl>

    <b>This text is bold</b>

    <br />

    <strong>This text is strong</strong>

    <br />

    <big>This text is big</big>
    <br />

    <em>This text is emphasized</em>

    <br />

    <i>This text is italic</i>

    <br />

    <small>This text is small</small>

    <br />

    This text contains
    <sub>subscript</sub>

    <br />

    This text contains
    <sup>superscript</sup>

    <pre>
这是
预格式文本。
它保留了      空格
和换行。
</pre>

    <p>pre 标签很适合显示计算机代码:</p>

    <pre>
for i = 1 to 10
     print i
next i
</pre>

    <address>
        Written by <a href="mailto:webmaster@example.com">Donald Duck</a>.<br>
        Visit us at:<br>
        Example.com<br>
        Box 564, Disneyland<br>
        USA
    </address>

    这是长的引用:
    <blockquote>
        这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。
    </blockquote>

    这是短的引用:
    <q>
        这是短的引用。
    </q>

    <p>
        使用 blockquote 元素的话,浏览器会插入换行和外边距,而 q 元素不会有任何特殊的呈现。
    </p>

    <p>一打有 <del>二十</del> <ins>十二</ins> 件。</p>

    <p>大多数浏览器会改写为删除文本和下划线文本。</p>

    <p>一些老式的浏览器会把删除文本和下划线文本显示为普通文本。</p>

    <a href="11.html" target="_top">回顶部</a>
<!--实体字符:&nbsp表示一个空格,浏览器可以正常解析;小于号&lt 大于号&gt;script,alert是一个弹出框-->
    <!--块级元素垂直分布,自己占一整行-->
    <!--水平分布行级元素-->

    <div><!---->
        布局 划分区块
    </div>
    <div><!---->
        布局 <span style="color:#ff0883">划分区块</span> 块级元素
    </div>
    <span>
        qwert 行级元素
    </span>
    <span>
        qwert
    </span>
        <form action="表单,用于对后台提供数据,可以是地址等">
            <div>
                <label for="user name">
                  <!--input获取焦点,鼠标闪动-->
                用户名:
                <input id="user name" type="text"/>
                </label>
                <br/>
                密码:
                <input type="password"/>
                <br/>
            </div>
        </form>
        性别:
        <input type="radio" name="sex"/>男
        <input type="radio" name="sex" checked/>女<!--默认-->
        <!--radio表示单选按钮;checkbox表示多选按钮;checked表示默认指定-->
        爱好:
        <input type="checkbox" name="hobby" />电影
        <input type="checkbox" name="hobby"/>游泳
        <input type="checkbox" name="hobby"/>篮球
        <select name="后台" ><!--下拉框;name是用来给后台看的-->
            <option value="1">林大</option>
            <option value="林大">林大</option>
            <option value="2">林大</option><!--value用于后台提交数据-->
        </select>
        <button>按钮,或者可以input表示</button>
        <input type="buton" onclick="">
        <input type="submit" value="aa(提交按钮)"/>
        <textarea name="qwqe" id=""abc cols="30" rows="10">qwfsdgbdhnfcn</textarea>
        <!--用于输入文本,其大小可变-->
        html5
        <input type="number"/>
        <!--数字可调-->
        <input type="email"/>
        <!--邮箱自动识别-->
        <input type="date"/>
        <!--日历框-->
        <input type="color"/>
        <!--提交颜色框-->

</body>
</html>

 

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值