网页设计第一天：HTML入门

作者: 千里重 | 来源:发表于2018-08-20 20:35 被阅读0次

简介

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>

网页设计第一天：HTML入门

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读