网页设计第一天：HTML入门

简介

HTML全称HyperText Markup Language属于超文本标记语言。超文本指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。

特点

HTML的特点有：

1.文件必须使用html或htm（不推荐）作为后缀

2.大小写不敏感

3.无需编译，浏览器可以直接运行

基本结构

HTML的基本结构包括：

<!DOCTYPE>声明：用来指定当前页面使用的HTML版本

根标签：html，声明当前文件是一个html文件

子标签：

head:设置当前王爷的信息，并不显示在页面上；

charset：制定当前页面使用的编码集。

description：一般写网页的关键字

title：网页的标题

body：设置页面的内容

注意：

所有内容尽量放在标签中间

标签需要按照顺序进行正确的嵌套

标签可以有属性，属性格式为：属性名=“属性值”，属性值使用引号引起来；如果有多个属性使用空格进行分割

标签

h标签

h标签属于标题标签, 用于定义标题。取值为1-6。特点：特点：字体加粗，上下留白，换行，h1最大，h6最小。常用属性：align（设置对齐方式），默认值是left（左对齐），其他可选值right/center。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>
            标题标签
        </title>
    </head>
    <body>
        <h1 align="right">1号标题</h1>
        <h2 align="center">2号标题</h2>
        <h3>3号标题</h3>
        <h4>4号标题</h4>
        <h5>5号标题</h5>
        <h6>6号标题</h6>
        普通文本
    </body>
</html>

字体标签

字体标签用于定义文本字体、大小和颜色。有三个常用属性，分别是color：设置字体颜色；size：设置字体大小（1-7，1最小，7最大）；face：设置字体。颜色值的写法分为三种，分别是：十六进制颜色, 例如#ffffff；使用英文单词, 例如red；RGB 颜色, 例如rgb(255,0,0)。一般开发用十六进制来定义颜色。而且，我们也可以在head中定义一个style来存储一个颜色并命名，方便调用。

其他常用标签

其他常用标签包括：b:粗体；strong：粗体（strong一般是给开发者看的）；i：斜体；u：下划线；br：换行；p：段落；hr：分割线（align：设置对齐方式；width：设置宽度，可以使用百分比或像素值）

示例代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>字体</title>
        <style type="text/css">
            #f1 {
                color: rgb(255, 255, 0);
            }
        </style>
    </head>
    <body>
    <font color="ff0000">所有</font>
    <font size="7">主流</font>
    <font face="楷体">浏览器</font>
    <font color="00ff00" size="1" face="黑体">都支持</font>
    </body>
</html>

img标签

img标签就是图片标签，用来定义图片。标签常用属性包括：src：图片路径；alt：代替文字，是图片加载失败的时候显示的提示文本；width：宽度；height：高度。图片的路径分为相对路径和绝对路径。相对路径参考的是本文件，./代表当前目录，可以省略。../代表上级目录。绝对路径就是带有协议和主机名的路径。

示例代码：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>图片标签</title>
    </head>

    <body>
        <img src="img/滑稽.png" width="400" height="400" alt="这是一个滑稽" />
    </body>

</html>

列表标签

列表常用标签分为三类，分别是ol标签，ul标签，li标签。ol标签用于定义有序列表，type属性，取值1（默认值），其他还有a，A，i，I。ul标签用于定义无序列表，type属性，取值disc（默认值，实心圆），circle（空心圆），square（方块）。li标签为列表项。

示例代码：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>列表标签</title>
    </head>

    <body>
        <ol start="2" type="a">
            <li>北京</li>
            <li>上海</li>
            <li>广州</li>
            <li>深圳</li>
        </ol>
        <ul type="disc">
            <li>北京</li>
            <li>上海</li>
            <li>广州</li>
            <li>深圳</li>
        </ul>
    </body>

</html>

a标签

a标签用于定义超链接。常用属性分为两种，一种是href：指定链接地址，第二种是target：指定如何打开页面。取值blank（在新窗口中打开），parent（在父框架集中打开），self（默认。在相同的框架中打开），top（在整个窗口中打开），framename（在指定的框架中打开）。

代码示例：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>a标签</title>
    </head>

    <body>
        <a href="http://www.baidu.com" target="_self">度娘</a>
    </body>

</html>

表格标签

常规设置

表格标签用于定义一个表格, 或用于页面布局。

table标签

table标签代表标签中的内容是表格。常用属性包括：border：边框宽度；width：宽度；height：高度；align：对齐方式；cellspacing：内边距,内容和边框之间的距离；cellspacing : 格子和格子之间的距离；frame : 显示外边框；rules : 显示内边框；cols :指 column，列；row : 行

caption标签

caption标签，指定表格的标题,必须写在table标签之后。

tr标签

tr标签代表一行。包含align属性, 用于定义对齐方式。

th标签

th标签代表表头, 文本会加粗并居中显示。

td标签

td标签代表数据格。

示例代码：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>表格标签</title>
    </head>

    <body>
        <table border="1px" cellspacing="0" width="50%" align="center">
            <tr>
                <th>ID</th>
                <th>name</th>
                <th>age</th>
            </tr>
            <tr>
                <td>01</td>
                <td>tom</td>
                <td>12</td>
            </tr>
            <tr>
                <td>02</td>
                <td>jerry</td>
                <td>11</td>
            </tr>
        </table>
    </body>

</html>

表格结构标签

浏览器在解析表格标签的时候，会把它当做一个整体进行解析。如果表格中数据比较多的时候，要使用表格的结构标签，提高表格的加载速度。caption 标签一定要写在table标签之后。结构标签的书写顺序不会影响到页面的显示效果，即thead的内容始终在最前，tfoot的内容始终在最后。thead : 表格的头；tbody : 表格的主体；tfoot : 表格的脚。

单元格的合并

当我们需要对单元格进行合并时，可以在td标签中增加以下属性：

rowspan ：合并行

colspan ：合并列

示例代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>单元格合并</title>
    </head>

    <body>
        <table border="1" cellspacing="0" width="50%" align="center">
            <tr>
                <td rowspan="2">指标</td>
                <td colspan="2">招生数</td>
                <td colspan="2">在校生数</td>
                <td colspan="2">毕业生数</td>
            </tr>
            <tr>
                <td>万人</td>
                <td>比上年增长(%)</td>
                <td>万人</td>
                <td>比上年增长(%)</td>
                <td>万人</td>
                <td>比上年增长(%)</td>
            </tr>
            <tr>
                <td>普通高等学校</td>
                <td>1</td>
                <td>2</td>
                <td>1</td>
                <td>2</td>
                <td>1</td>
                <td>2</td>
            </tr>
            <tr>
                <td>中等职业学校</td>
                <td>1</td>
                <td>2</td>
                <td>1</td>
                <td>2</td>
                <td>1</td>
                <td>2</td>
            </tr>

        </table>
    </body>
</html>

表格的嵌套

嵌入的表格必须是完整的结构, 即必须是table>tr>td结构。嵌入的表格要放在td标签。

框架标签

框架标签分为frameset标签和frame标签两类。

frameset标签

frameset标签用于定义框架集。属性包括：cols：垂直切割。rows：水平切割。

注意：frameset不能和body同时使用

frame标签

frame标签用于具体展示页面。常用属性包括：src：页面的路径。name：框架的名称。

示例代码：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>框架标签</title>
    </head>
    <frameset rows="20%,*,15%">
        <frame src="08_单元格合并.html" />
        <frameset cols="30%,*">
            <frame src="04_图片标签.html" />
            <frame src="05_列表标签.html" />
        </frameset>
        <frame src="02_字体.html#f1" />
    </frameset>

</html>

form标签

form标签用于为用户输入创建 HTML 表单, 收集用户填写的数据, 传递给后台服务器处理。

form的常用子标签有三个，分别是input标签；select标签和textarea标签。

input标签

input标签定义表单输入项, 收集信息。常用属性包括type（用于定义类型）；name（定义 input 元素的名称）；value（定义 input 元素的值）。注意：如果没有声明name属性, 数据是不会提交给后台的。

select标签

select标签用于定义下拉框。常用属性包括multiple：设置多选。默认情况下下拉框只能选择一个数据。size：设置下拉框中可见选项的数目。默认情况下只有一个可见。name：作用同input。

其中，select标签中还有两个子标签，分别是：optgroup：对下拉框中的选项进行分组。option：定义下拉框中的选项。

textarea标签

textarea标签用于定义一个多行多列的输入框。常用属性包括，cols：指定文本框中可见的列数。name：作用同input。

form的常用属性分为两种。action：规定当提交表单时向何处发送表单数据。

method, 指定请求方式。常用请求方式有两种：

get：传递数据的时候,以?name=value&name=value的形式拼接在URL地址后面, 传递给后台服务器。数据传输的大小受到限制，安全性相对post较低。

post：传递数据的时候, 没有拼接在URL地址后面。数据传输大小比get大，安全性相对get较高。

举例如下：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>form标签</title>
    </head>

    <body>
        <form method="post">
            用户名:<input name="user" type="text" placeholder="请输入用户名" /><br />
            密码:<input name="psw" type="password" placeholder="请输入密码" /><br /> 
            性别<input name="gender" type="radio" checked="checked" value="male" />男
            <input name="gender" type="radio" checked="checked" value="female" />女<br /> 
            爱好:<br /><input name="hobby" type="checkbox" value="basketball" />篮球<br />
            <input name="hobby" type="checkbox" value="football" />足球<br />
            <input name="hobby" type="checkbox" value="pingpang" />乒乓球<br />
            <input name="hobby" type="checkbox" value="button" />羽毛球<br /> 
            头像:<input name="picture" type="file" /><br /> 
            城市:<select name="city">
                <optgroup label="北方城市">
                    <option value="beijing">北京</option>
                    <option value="tianjin">天津</option>
                </optgroup>
                <optgroup label="南方城市">
                    <option value="guangzhou">广州</option>
                    <option value="shenzhen">深圳</option>
                </optgroup>
            </select>
            <br /> 
            自我介绍:<textarea name="self" cols="20" rows="5" placeholder="请输入自我介绍"></textarea><br />
            <input type="submit" value="注册" />
            <input type="reset" value="清空" />
            <input type="button" value="登录" />
            <input type="image" src="img/滑稽.png" />
        </form>
    </body>

</html>

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 218,036评论 6赞 506
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 93,046评论 3赞 395
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 164,411评论 0赞 354
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 58,622评论 1赞 293
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 67,661评论 6赞 392
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 51,521评论 1赞 304
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 40,288评论 3赞 418
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 39,200评论 0赞 276
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 45,644评论 1赞 314
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 37,837评论 3赞 336
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 39,953评论 1赞 348
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 35,673评论 5赞 346
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 41,281评论 3赞 329
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 31,889评论 0赞 22
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 33,011评论 1赞 269
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 48,119评论 3赞 370
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 44,901评论 2赞 355

网页设计第一天：HTML入门

推荐阅读更多精彩内容