HTML自学笔记#2

最新推荐文章于 2024-08-09 08:30:00 发布

Zerg Wang

最新推荐文章于 2024-08-09 08:30:00 发布

阅读量233

点赞数 1

分类专栏： Web Development

转载请注明出处，谢谢合作！

本文链接：https://blog.csdn.net/Zerg_Wang/article/details/90678710

版权

Web Development 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

环境：VS Code

插件：HTML Snippets、open in browser

表格

内容与边框

通过<table>声明一个表格，在每个表格中，通过<tr>声明每一行，在每一行中，通过<td>声明每个单元格及其内容。

表格的设置不一定非要n×m，如下图：

<table border="5">
    <tr>
        <td>1</td>
        <td>2</td>
    </tr>
    <tr>
        <td>3</td>
        <td>4</td>
        <td>5</td>
    </tr>
</table>

当然，如果在第一行写了三个<td>，但第三个仅仅是<td></td>，则会显示出其边框，无内容：

可通过<table>处的属性border设置外边框，不写则为0，内、外边框都无。若大于0，则外边框按这个值变化，内边框不变。

除了border，属性cellspacing用于设置单元格间距，属性cellpadding设置单元格边距。（即单元格中的内容与单元格边框的距离）

此外，整个table或单个单元格都可通过background属性设置背景、align设置对齐方式等等。

表头及标题

假设有3列，则表头可如下设计：

<tr>
    <th>Column 1</th>
    <th>Column 2</th>
    <th>Column 3</th>
</tr>

则内容会对应加粗，出现在每一列中间。

如果要表头在列表上端，则要写于其他行之前。

表头不一定要与实际列数相匹配，可自由设计。此外，表头也可以是每行一个，这样一来<th>要在每个<tr>中声明。

标题写在<table>中，但不需要声明<tr>：

<caption>我的标题</caption>

标题内容会显示在表的上方居中位置，无论这段代码写在何处。

单元格合并

通过colspan（合并相邻列）和rowspan（合并相邻行）进行操作。

<tr>
    <th>Name</th>
    <th colspan="2">Phone Number</th>
</tr>
<tr>
    <td>John</td>
    <td>1521336</td>
    <td>1526688</td>
</tr>

列表

无序列表

以<ul>开头，以<li>定义每一项。

<ul>
    <li><h2>Chapter I</h2></li>
    <li><h2>Chapter II</h2></li>
</ul>

有序列表

以<ol>开头，以<li>定义每一项。每一项开头不再是黑点，而是按顺序排列的数字：

可在<ol>处通过属性start定义序号的开始值，默认为1。

若连续定义多个有序表，且start为默认值，则序号不会在表间延续，到下一个表，又从1、2、3开始。

自定义列表

以<dl>开头，以<dt>定义每一项。每项开头无黑点也无数字。

此外，在<dt>下还可通过<dd>补充对该项的描述，每项可有多个<dd>对其进行描述。

<dl>
    <dt>Mike</dt>
    <dd>27</dd>
    <dd>worker</dd>
    <dt>James</dt>
    <dd>23</dd>
    <dd>engineer</dd>
</dl>

代码结构

块元素与内联元素

HTML中元素可分为块元素（block level element）以及内联元素（inline element）。

浏览器显示块元素时，通常会在其开始和结束前以一空行与其他元素相隔，如<h1>、<p>。内联元素则不会，如<a>、<img>。

<div>与<span>

这两个相当于C++中的大括号{}，相当于Pascal中的begin和end，逻辑上为一体的一部分代码可以写在一个<div>或<span>中，两者的区别在于，<div>为块元素，<span>为内联元素。

此外，通过在<div>或<span>处的属性设置，可同时将多组代码设置为同一风格，如：

<div style="color:rgb(125, 17, 134)">
    <h1>Chapter II</h1>
    <p>blablabla...</p>
</div>

此外，更可以为每个<div>设置类别，相同类别设置为同一风格，不同类别设置为不同风格，然后在<body>之外可为每一类设计显示风格，例如：

<html>
<head>
    <style>
        .fruits {
            background:red;
            color:white;
            margin:20px;
        }
        .animals{ 
            background:rgba(53, 29, 1, 0.829);
            color:white;
            margin:20px;
        }
    </style>
</head>
<body>
    <div class="fruits">
        <h1>Apple</h1>
    </div>

    <div class="animals">
        <h1>Cat</h1>
    </div>
</body>
</html>

除了class，也可以使用<div id="animals">这种形式，在<style>处编辑则在类名前加“#”而不是“.”。

此外，还可以替换掉<div>，使用自定义的布局：

<!DOCTYPE html>
<html>
<head>
    <style>
        header {
            color:purple;
            text-align:center;
    </style>
</head>

<body>
    <header>
        <h1>My Diary</h1>
    </header>
</body>
</html>

框架

将当前页面分割为多个框架，使其可显示多个页面，用<frameset>设置：

<html>
<frameset cols="50%,50%">
    <frame src="index.html"/>
    <frame src="index2.html"/>
</frameset>
</html>

通过在<frameset>中添加属性来确定为水平分割（rows）或者垂直分割（cols），还可通过百分比为每个框架分配大小，可写任意个百分比（对应多个页面），只要加起来为100%即可。（其实不为100%也不会报错……）

<frame>设置每个框架内显示的页面，可以为网址，也可以为本地的文档。

框架之间的分割线可用鼠标拖拽来调整页面大小，若要禁用，可在相应<frame>处设置属性noresize="noresize"。

另外要注意的是，<frameset>写于<body>之外，或者说，<frameset>与<body>不能同在，除非使用<noframes>，在<noframes>中使用<body>，从而当浏览器无法正确显示框架时显示出<body>中的相应信息：

<html>
<frameset cols="50%,50%">
    <frame src="index1.html"/>
    <frame src="index2.html"/>
    <noframes>
        <body>您的浏览器无法处理框架！</body>
    </noframes>
</frameset>
</html>

若要在当前页面不仅仅有框架，还要求有其他元素，可以使用内联框架，这个是写在<body>之中的：

<iframe src="URL"></iframe>

src可以是本地网页，也可以是网址、图片等等。在src后面可以使用width、height定义框架大小，frameborder设置边框粗细。

以下为与内联框架的互动：（通过按钮使内联框架内显示不同页面）

<!DOCTYPE html>
<html>
<body>
    <p>原来是页面1</p>
    <iframe src="index.html" name="new_page"></iframe>
    <p><a href="index2.html" target="new_page">点击打开页面2</a></p>
</body>
</html>

头部元素

即<html>中的<head>部分，一般写于<body>之前，提供关于页面本身的信息（如页面标题、默认设置等等）

<title>元素

规定页面在浏览器标签页所显示的标题，若没有，则会显示本地网页的文件名。

<html>
<head>
    <title>我是标题</title>
</head>
<body>
    <p>我是正文</p>
</body>
</html>

<base>元素

规定页面上所有链接的默认地址以及默认目标（target）

<!DOCTYPE html>
<html>
<head>
    <base href="index.html"/>
    <base target="_blank" />
</head>

<body>
    <a href="">不写网址也可打开</a>
</body>
</html>

即使在<a>中不设置target，页面也还是会在新标签页打开（因为在<base>）中规定了默认为_blank。

然而，即使在<base>中规定了默认网址，href却不能省，写成空字符串即可。

若<a>中有具体URL或本地文件，打开网页时会按照<a>中网址来。但有例外：

<!DOCTYPE html>
<html>
<head>
    <base href="https://www.bilibili.com"/>
    <base target="_blank" />
</head>

<body>
    <a href="index2.html">不写网址也可打开</a>
</body>
</html>

打开的是不是本地的index2.html，而是http://www.bilibili.com/index2.html，若用绝对地址则不会出现以上情况。

<link> 元素

定义网页与外部资源之间的关系，常用于连接外部样式表来设计内容显示效果。

<meta> 元素

定义网页的元数据（metadata），即描述数据的数据（data about data），可使用<meta>定义网页内容简介、作者、修改日期、关键字等，按一定规则定义这些内容可方便搜索引擎对网页的索引。

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="author" content="ZergWang" />
    <meta name="keywords" content="simple, naive" />
    <meta name="description" content="Just a simple page" />
</head>
<body>
    <p>这是一个简单的网页</p>
</body>
</html>

第一个<meta>定义了网页内容的形式和编码方式。

通过http-equiv，可以设置网页的重定向：

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Refresh" content="5;url=index.html" />
</head>
<body>
    <p>该网页不存在，5秒后会跳转到首页</p>
    <p>若未跳转，请点击：<a href="index.html">首页</a></p>
</body>
</html>

表单

<form>，用于收集用户输入。

<input>元素

属性type定义用户的输入类型，有单行的文本输入框，但有两种形式：type="text"的用户可见自己的输入；type="password的不可见。

<!DOCTYPE html>
<html>
<body>
    <form>
        <p>请输入用户名：</p>
        <input type="text" /><br/>
        <p>请输入密码：</p>
        <input type="password" />
    </form>
</body>
</html>

单选按钮（type="radio"）

<form>
    <input type="radio" name="sex" />男
    <br>
    <input type="radio" name="sex" />女
</form>

复选框（type="checkbox"）

<form>  
    <input type="checkbox" />1
    <br/>
    <input type="checkbox" />2               
</form>

按钮（type="button"），这里写了一个点击后弹出“Hello World”提示信息的按钮。实际上，单独的<button>元素也有，写法略有不同。

<form>
    <button onclick="alert('Hello World!')">点我</button>
    <input type="button" onclick="alert('Hello World!')" value="Click Me!" />       
</form>

向表单处理程序提交表单的按钮（type="submit"）。

<form>
    <input type="submit" />
</form>

<input>不仅在输入方式上多样，在辅助用户输入方面也有不少功能强大的属性：

value属性：规定输入字段的初始值。

<form>  
    <p>请输入</p>
    <input type="text" value="Zerg" />       
</form>

readonly属性：输入框内的内容由value确定，无法由用户更改。

<input type="text" value="Zerg" readonly />

disabled属性：输入框被禁用，其值不会被提交。disabled下框变成灰色，内容无法被选中。（readonly下可被选中）

<input type="text" value="Zerg" disabled />

maxlength属性：规定用户输入内容的最大长度。例如下面设为5，则用户在这个框内只能输入5个字符（无论中英文）。

<input type="text" maxlength="5" />

HTML5为<input>加入了大量输入类型，功能极为强大，也加入多种属性，可对用户的输入进行更为灵活、全面的辅助，此处暂不列举。

<select>元素

与<input>一样也是输入框，为下拉列表形式。

<form>
    <select>
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
    </select>
</form>

<fieldset>元素

用于组合表单中的数据，其中<legend>元素用于为<fieldset>定义标题。

<form>
<fieldset>
    <legend>用户登录</legend>
    <p>请输入用户名：</p>
    <input type="text" /><br/>
    <p>请输入密码：</p>
    <input type="password" />
</fieldset>
</form>

action属性

定义提交表单时执行的动作，若无该属性，则默认为点击submit后打开当前页面。一般所执行的内容通过脚本规定。

<form action="action.php">

要使用户输入内容能正确提交且被脚本所用，一般获取用户输入的元素<input>、<select>要配有相应的name属性，使得脚本可以通过此进行对应。

method属性

规定提交表单时所用的 HTTP 方法。有GET和POST两种。

<form action="action.php" method="GET">

参考资料：

http://www.w3school.com.cn/

Zerg Wang

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML自学笔记#2

环境：VSCode插件：HTMLSnippets、open in browser表格内容与边框通过<table>声明一个表格，在每个表格中，通过<tr>声明每一行，在每一行中，通过<td>声明每个单元格及其内容。表格的设置不一定非要n×m，如下图：<table border="5"> <tr>...
复制链接

扫一扫

专栏目录