编程小白福音之HTML基础知识（一）

最新推荐文章于 2024-09-18 09:47:26 发布

你是我家的吗

最新推荐文章于 2024-09-18 09:47:26 发布

阅读量215

点赞数 2

分类专栏：笔记文章标签： html html5

本文链接：https://blog.csdn.net/m0_46940344/article/details/107055813

版权

笔记专栏收录该内容

7 篇文章 0 订阅

订阅专栏

第一章 HTML入门

什么是网页？

由浏览器识别的，用于显示信息的文件；信息包括：新闻、购物、邮件等。

什么是网站？

由众多网页组成的群体，网页之间可能通过相互调用实现信息的查看。

网页的组成元素

文本：用来描述信息的文字
图像：增强信息的生动性和直观性
动画：强烈视觉的冲击效果
表格：布局的合理性
其它：视频、背景音乐等

网页访问的三个要素

1.网站的存储空间

服务器用于网页的存放

2.网站的域名

通过域名指向需要访问的网页

3.网页的访问地址

什么是HTML?

HTML(Hyper Text Markup Language)超文本标记语言，是构成网页的基本语言。

网页的基本结构

网页的声明
网页的头部
网页的主体

示例：

网页的标题

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>首页</title>
    </head>
    <body>

    </body>
</html>

页面显示效果：

HTML标签

1.标题标签（h1-h6）

2.段落（p)和换行(br)

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>首页</title>
    </head>
    <body>
        <p>This is paragraph</p>
        <p>This is <br> paragraph</p>
        <p>This is paragraph <br></p>
    </body>
</html>

结果：

第二章图像与超级链接

图像标签<img>

语法：

<img

src=”图像路径”

title=”提示信息”

alt=”图像路径不正确显示的内容”

width=”宽度”

height=”高度” />

图像类型：

链接路径：

相对路径

相对于当前文件的路径（推荐使用）

./ 代表当前目录

../ 代表上一级目录

../../ 代表上一级目录的上一级目录

绝对路径（链接外部资源文件时使用）

文件实际存放的位置的完整路径

超级链接

什么是超级链接？

超级链接以称为超链接，使用相互独立的页面互相链接。

使用方法：

超级链接分类：

1.页面链接

2.功能链接（我们游览网页时，邮箱链接）

3.锚链接（连接到指定的地方）

步骤1：添加锚记（给标签添加id属性）
  <标签名 id=”锚名”></标签名>
  如：
 <body id=”top”>…
 </body>
步骤2：使用a标签链接到锚记
 <a href=”#锚名”>链接文本</a>
 如：<a href=”#top”>返回顶部</a>

第三章列表

无序列表 ul-li

    UL (UnOrdered List)

            LI(List Item)

         <ul>

              <li>List Item 1</li>

              <li>List Item 2</li>

<li>List Item 3</li>

   </ul>

无序列表类型：

disc	默认值。实心圆。
circle	空心圆。
square	实心方块。
<ul type="value">

嵌套的列表：

有序列表

OL(Ordered List)

LI(List Item)

语法：

<ol>

<li>List Item 1</li>

</ol>

示例：

有序列表的类型：

1	默认值。数字有序列表。（1、2、3、4）
a	按字母顺序排列的有序列表，小写。（a、b、c、d）
A	按字母顺序排列的有序列表，大写。（A、B、C、D）
i	罗马字母，小写。（i, ii, iii, iv）
I	罗马字母，大写。（I, II, III, IV）

有序列表的start属性：

start 属性规定有序列表的开始点

属性值：

number

数字。有序列表的开始点。

定义列表

DL(Description List)

DT(Description Term)

DD(Description Definition)

语法：

<dl>

<dd>这是一台用于开发程序的电脑</dd>

<dd>这是一台用于开发游戏的电脑</dd>

</dl>

示例2:

第四章表格

表格的作用

为了页面的美观，显示数据规范

表格的属性：

</table>

1.border pixels 规定表格边框的宽度。

2．cellpadding pixels % 规定单元边沿与其内容之间的空白。

3．cellspacing pixels % 规定单元格之间的空白。

4．Width pixels % 规定表格的宽度。

单元格属性：

第五章 HTML的表单

表单的典型应用：

表单的基本语法：

‘<form action=” ” method=” ” name=” ”></form>

Form的属性：

属性名	值	说明
action	URL	当提交表单时向何处发送表单数据（自取，在Java开发中serve pack包中名称一致）
method	GET/POST	发送HTTP的方式
name	form_name	表单的名字（自取）

表单元素

单行文本框

<input type=”text”

name=”名称”

value=”值”

size=”显示宽度”

maxlength=”最多输入字符数”

readonly=”只读” />


        <tr>
            <th colspan="2">用户注册</th>
        </tr>
        <tr>
            <td width="80px">用户名称</td>
            <td>
                <input type="text" placeholder="" name="username" id="username" size="10" maxlength="12">
            </td>
        </tr>

密码框

<input type=”password”

name=”名称”

value=”值”

size=”显示宽度”

maxlength=”最多输入字符数”

readonly=”只读” />


        <tr>
            <td width="80px">密码</td>
            <td>
                <input type="password" name="password" id="password" maxlength="6" size="10">
            </td>
        </tr>

单选框

<input type=”radio”

name=”名称”

value=”值”

checked=”是否选中” />显示文本


        <tr>
            <td width="80px">性别</td>
            <td>
                <!-- checked是默认选为男性 -->
                <input type="radio" name="sex" id="sex" value="男" checked>男
                <input type="radio" name="sex" id="sex" value="女" >女
            </td>
        </tr>

复选框

<input type=”checkbox”

name=”名称”

value=”值”

checked=”是否选中” />显示文本


        <tr>
            <td width="80px">爱好</td>
            <td>
                <input type="checkbox" name="hobby" id="hobby" value="电影">电影
                <input type="checkbox" name="hobby" id="hobby" value="游戏">游戏
                <input type="checkbox" name="hobby" id="hobby" value="玩">玩
            </td>
        </tr>

下拉列表

<option

value=”选项值”

selected=”是否选中”>选项显示文本</option>

<option value=”选项值”>选项显示文本</option>

</select>


        <tr>
            <td width="80px">年级</td>
            <td>
                <!-- multiples是多选，写上 multiple="multiple"即确定  -->
                <select name="grade" id="grade">
                    <option value="1">一年级</option>
                    <option value="2">二年级</option>
                    <option value="3">三年级</option>
                </select>
            </td>
        </tr>

Select标签的属性使用：

 <tr>
            <td width="80px">年级</td>
            <td>
                <!-- multiples是多选，写上 multiple="multiple"即确定  -->
                <select name="grade" id="grade" multiple="multiple">
                    <option value="1">一年级</option>
                    <option value="2" selected>二年级</option>
                    <option value="3">三年级</option>
                </select>
            </td>
   </tr>

设置默认选中项：

<tr>
            <td width="80px">年级</td>
            <td>
                <!-- multiples是多选，写上 multiple="multiple"即确定  -->
                <select name="grade" id="grade">
                    <option value="1">一年级</option>
                    <option value="2" selected>二年级</option>
                    <option value="3">三年级</option>
                </select>
            </td>
        </tr>

多行文本框（文本域）

<textarea name=”名称”

cols=”列数” rows=”行数”>值</textarea>

     <tr>
            <td width="80px">内容</td>
            <td>
                <textarea name="text" id="text" cols="30" rows="10"></textarea>
            </td>
     </tr>

按钮

普通按钮

提交按钮

重置按钮

图片按钮

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>单行文本</title>
</head>
<body>
    <form action="index.html" method="GET" name="action">
        <!-- cellpadding 代表名称与单元格的距离 cellpacing代表单元框与边框的距离 -->
    <table border="1px" cellpadding="0" cellspacing="0">
        <tr>
            <th colspan="2">用户注册</th>
        </tr>
        <tr>
            <td width="80px">用户名称</td>
            <td>
                <input type="text" placeholder="" name="username" id="username" size="10" maxlength="12">
            </td>
        </tr>
        <tr>
            <td width="80px">密码</td>
            <td>
                <input type="password" name="password" id="password" maxlength="6" size="10">
            </td>
        </tr>
        <tr>
            <td width="80px">性别</td>
            <td>
                <!-- checked是默认选为男性 -->
                <input type="radio" name="sex" id="sex" value="男" checked>男
                <input type="radio" name="sex" id="sex" value="女" >女
            </td>
        </tr>
        <tr>
            <td width="80px">爱好</td>
            <td>
                <input type="checkbox" name="hobby" id="hobby" value="电影">电影
                <input type="checkbox" name="hobby" id="hobby" value="游戏">游戏
                <input type="checkbox" name="hobby" id="hobby" value="玩">玩
            </td>
        </tr>
        <tr>
            <td width="80px">年级</td>
            <td>
                <!-- multiples是多选，写上 multiple="multiple"即确定  -->
                <select name="grade" id="grade" >
                    <option value="1">一年级</option>
                    <option value="2" selected>二年级</option>
                    <option value="3">三年级</option>
                </select>
            </td>
        </tr>
        <tr>
            <td width="80px">内容</td>
            <td>
                <textarea name="text" id="text" cols="30" rows="10"></textarea>
            </td>
        </tr>
    </table>
</form>
</body>
</html>