零基础学html第一天

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

html:超文本标记语言

unicode（UTF-8）：万国码

<...>：标记标签

  :空格

<br>:换行

<hr>:水平线

<p></p>:段落标签

<sup></sup>:上角标（如：y=x^2）

<sub></sub>:下角标

<h1></h1>:标题标签（h1~h6）

<strong></strong>:字体加粗

<i></i>:字体倾斜

<pre></pre>:原格式输出（需要空格时按空格键，tab键不可以）

········标签中输入lorem后按tab键添加测试数据

------------------------------------------------------------------------------

无序列表：

<ul>

</ul>

属性：

type="disc" :实心圆点（默认）

type="circle" :空心○

type="square" :实心方块

---------------------------------------------------------------------------

有序列表：

<ol>

</ol>

属性：

type="1" :序号为数字

type="a" :序号为小写字母

type="A" :序号为大写字母

type="i" :序号为小写罗马数字

type="I" :序号为大写罗马数字

---------------------------------------------------------------------------

自定义列表：

<dl>

</dl>

dt:第一级标题

dd:第二级标题

----------------------------------------------------------------------------

超链接：

属性：

href="" :中写要跳转页面的地址

target="_blank" :跳转时打开新的一页

回顶部功能：

<a name="a01"></a> :放在最顶部

----------------------------------------------------------------------------

图片：

属性：

src="" :中写图片地址

title="" :提示（鼠标放在图片上时的提示）

alt="" :当图片加载失败时的提示

注（相对路径、绝对路径）：

绝对路径：文件在计算机中真正的路径

相对路径：谁要获取资源就相对谁

----------------------------------------------------------------------------

form表单：

<form>
用户名：<input type="text" name="user" /><br>
密 码：<input type="password" name="password" /><br>
性别：<input type="radio" name="sex">男
<input type="radio" name="sex">女<br>
省份：
<select>
<option>辽宁省</option>
<option>吉林省</option>
<option>内蒙古自治区</option>
</select><br>
城市：
<select>
<option>大连</option>
<option>沈阳</option>
</select><br>
<input type="submit" value="登录">
</form>

select为下拉选择

input属性：

type="text" ：文本输入框

type="password" ：密码输入框

type="radio" ：单选（name需要相同）

type="submit" ：提交按钮

----------------------------------------------------------------------------

以下为学习时的代码

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>文升谁都打不过</title>

</head>

<body>

    <a name="a01"></a>

    听闻爱情，<br>    十人九悲！<hr>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure commodi esse odio nobis officia sed reiciendis, amet, voluptas nihil consequatur fugiat molestias. Ratione beatae aliquam ullam, optio! Culpa, asperiores suscipit.</p>

    &copy;

    &reg;

    &gt;

    &lt;

    y=x<sup>2</sup>

    H<sub>2</sub>O

    <h1>这是H1标题</h1>

    <h3>这是H3标题</h3>

    <h6>这是H6标题</h6>

    <strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate repellendus laboriosam suscipit voluptatibus vel dolore culpa quisquam modi quis provident incidunt minus veniam, sunt sit quam id repellat debitis exercitationem!</strong>

    <i>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet aut facilis voluptatibus, earum libero error atque sunt veniam unde sapiente corrupti vero fugit voluptas. Minima nemo est velit earum dicta.</i>

    <pre>

                凉州词

    葡萄美酒夜光怀，欲饮琵琶马上催。

    醉卧沙场君莫笑，古来征战几人回。

    </pre>

    <ul type="square">

        <li>香蕉</li>

        <li>苹果</li>

        <li>大鸭梨</li>

    </ul>

    <ol type="a">

        <li>抽烟</li>

        <li>喝酒</li>

        <li>烫头</li>

    </ol>

    <dl>

        <dt>辽宁</dt>

            <dd>沈阳市</dd>

            <dd>大连市</dd>

        <dt>吉林</dt>

            <dd>长春市</dd>

            <dd>吉林市</dd>

        <dt>内蒙古自治区</dt>

            <dd>呼和浩特市</dd>

            <dd>包头市</dd>

    </dl>

    <h1>我的电脑</h1>

    <ul type="circle">

        <li>本地磁盘（C:）

            <ul type="square">

                <li>我的文档</li>

                <li>我的程序</li>

            </ul>

        </li>

        <li>本地磁盘（D:）

            <ul type="square">

                <li>我的电影</li>

                <li>我的游戏</li>

            </ul>

        </li>

    </ul>

    <a href="index1.html" target="_blank">点这里你会发现惊喜</a>

    <a href="#a01">回顶部</a>

    <img src="../zly.jpg" title="这是赵丽颖" alt="图片走丢了">

    <form>

        用户名：<input type="text" name="user" /><br>

        密&nbsp;码：<input type="password" name="password" /><br>

        性别：<input type="radio" name="sex">男

              <input type="radio" name="sex">女<br>

        省份：

        <select>

            <option>辽宁省</option>

            <option>吉林省</option>

            <option>内蒙古自治区</option>

        </select><br>

        城市：

        <select>

            <option>大连</option>

            <option>沈阳</option>

        </select><br>

        <input type="submit" value="登录">

    </form>

</body>

</html>