新手学web之HTML快速了解及入门_怎么学会使用web和制作html-优快云博客

本文链接：https://blog.youkuaiyun.com/zero_1999/article/details/78095751

1.1 HTML简介

    HTML，超文本标记语言；
    超文本：指图、文、声、像、超链接；
    标记：即预定义标签；
    语言：计算机编程语言；

1.2 HTML结构

    <html>
        <head>
        </head>

        <body>
        </body>
    </html>

1.3 文本标签

1.3.1 文本修饰标签

    font标签：行内元素，常用属性color、size
    b标签：文字加粗；
    strong标签：文字强调；
    u标签：下划线；
    s标签：删除线；
    sub标签：下标；
    sup标签：上标；
    i标签：斜体；

1.3.2 文本排版标签

Hn标签：块级元素，标题，n的范围是1-6；
p标签：一个段落；
br标签：换行；
hr标签：分割线，常用属性：size（高）、width（宽）、color（颜色）；

1.3.3 转义字符

&nbsp; 空格

1.4 图像标签

img标签：常用属性：src（图片路径）、width（宽度）、height（高度）、alt（图片内容描述）、title（鼠标悬停提示）

路径详解：

相对路径：相对于文件（html文件）本身，图片所在的目录位置，返回上一级目录，”../”；
绝对路径：放之四海而皆准；
网络路径（URL）：http://IP(网址):端口/项目名/资源名?参数=值&参数=值

1.5 超链接

a标签：常用属性：href（资源路径）、title（鼠标悬停提示）、target（打开方式）

资源：

网络资源：要使用http协议；
本地文件资源：html文件，图片，其他文件类型；

1.6 列表

1.6.1 无序列表

<ul type="square">
            <li>第一行</li>
            <li>第一行</li>
            <li>第一行</li>
            <li>第一行</li>
            <li>第一行</li>
            <li>第一行</li>
</ul>

type属性值：square（矩形）、circle（空心圆）、disc（实心圆）

1.6.2 有序列表

<ol type="1" start="5">
            <li>这是一行</li>
            <li>这是一行</li>
            <li value="1">这是一行</li>
            <li>这是一行</li>
            <li>这是一行</li>
</ol>

1.7 表格

table标签：表格，常用属性border（边框）、width（宽）、height（高）、align（对齐方式）
tr：行
td：单元格，常用属性rowspan（合并行）、colspan（合并列）
th：标题

1.8 表单

<form action="a.html" name="" method="post">
            <p>
                用户名：<input name="user" type="text" />
            </p>
            <p>
                密码：<input name="password" type="password" />
            </p>
            <p>
                性别：
                <input type="radio" name="sex" value="男" checked="checked"/>帅哥
                <input type="radio" name="sex" value="女" />美女
            </p>
            <p>
                出生日期：
                <input name="date" type="date" /><br />
            </p>
            <p>
                学历：
                <select name="xueli">
                    <option>请选择</option>
                    <option value="中学">中学</option>
                    <option>大专</option>
                    <option>本科</option>
                    <option>研究生</option>
                </select>
            </p>
            <p>
                爱好：
                <input type="checkbox" name="hobby" value="篮球"/>篮球
                <input type="checkbox" name="hobby" value="足球"/>足球
                <input type="checkbox" name="hobby" value="乒乓球"/>乒乓球
            </p>
            <p>
                <input type="number" />
            </p>
            <p>
                备注：
                <textarea rows="10" cols="30"></textarea>
            </p>
            <input type="submit" value="注册" />
            <input type="reset" value="重置"/>
</form>

1.9 框架

1.9.1 内联框架

iframe：属性src（文件资源路径）、width（宽）、height（高）
frameset：

示例：

<frameset rows="90,*" border="0px">
        <frame src="a.html" name="top" />

        <frameset cols="150,*">
            <frame src="b.html" name="left" />
            <frame src="c.html" name="right" />
        </frameset>

</frameset>

1.10 HTML事件

1.10.1 鼠标事件

onmouseover：鼠标移入元素后执行
onmouseout：鼠标移除后执行