HTML4笔记整理

最新推荐文章于 2023-06-30 11:35:08 发布

daisy0328

最新推荐文章于 2023-06-30 11:35:08 发布

阅读量302

点赞数

分类专栏： HTML笔记整理 web前端文章标签： html

本文链接：https://blog.csdn.net/daisy0328/article/details/105621694

版权

web前端同时被 2 个专栏收录

72 篇文章 0 订阅

订阅专栏

HTML笔记整理

1 篇文章 0 订阅

订阅专栏

HTML里边的快捷键

多行注释<!-- -->      ctrl +/
复制当前行到下一行   ctrl+d
标签的快捷写法       标签字母 + tab
网页格式化（网页排版较乱时使用）        ctrl + alt +d +l
搜索   ctrl + F
操作多行     alt +左键

第一节 HTML4

一、概念

1、什么是HTML?

超文本标记语言: HyperText Markup Language
不是一种编程语言，而是一种标记语言
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
HTML 文档包含了HTML 标签及文本内容
HTML文档也叫做 web 页面

2、什么是HTML 标签？

HTML 标签是由尖括号包围的关键词，比如
HTML 标签通常是成对出现的，比如 <b> 和 </b>；也有单标签的，比如：<html/>
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签

3、HTML元素

HTML 文档由 HTML 元素定义。如：<body>元素、<p>元素
元素的内容是开始标签与结束标签之间的内容。如：<p>内容这是一个段落。<p/>
大多数 HTML 元素可拥有属性

4、HTML属性

属性是HTML元素提供的附加内容

HTML 元素可以设置属性
属性可以在元素中添加附加信息
属性一般描述于开始标签
属性总是以名称/值对的形式出现，比如：name=“value”。

二、HTML网页的正常显示格式

网页结构、编码格式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

</body>
</html>

说明：

<!DOCTYPE HTML> 声明当前的文档是html
<html></html>标签里面显示当前网页的所有信息
lang=“en” 标注网页的语言（用法：<html lang=”en”><html/>） en英语 ch中文
<head><head/> 标签头标签
<body><body/> 标签显示网页的所有内容
meta 标签信息标签(在head里面)
charset=UTF-8 标注当前网页的编码格式UTF-8 （用法：<meta charset=UTF-8>）
<title><title/> 标签显示在网页的选项卡区域（在head里面）

三、HTML里边的常用标签

1、标题标签

通过 <h1> - <h6> 标签进行定义的，由大到小。
作用：文本加粗、换行

<h1>这是一个标题。</h1>
<h2>这是一个标题。</h2>
<h3>这是一个标题。</h3>

2、`<hr>`水平线标签

写法：<hr/>

3、`<p>`段落标签

定义一个段落
写法:<p></p>
功能：将文本分割为段落、换行
属性：

align=“center” 文本居中
align=“right” 文本靠右
align=“left” 文本靠左（可不写，默认文本居左）

<p align="center">这是一个段落</p>

<p align="right">这是一个段落</p>

<p align="left">这是一个段落</p>

4、`<br/>`强制换行标签

5、文本格式化标签

<i></i>标签斜体
<b></b>标签加粗
<u></u>标签添加下滑线
<sub></sub>下标标签
<sup></sup>上标标签
<em></em>斜体标签和 i一致
<small></small>小号字
<strong></strong>加粗和 b 一致
<del></del>添加删除线
<pre></pre>预定义格式化标签预先格式化标签

写法：

<i>文本格式化</i>
<b>文本格式化</b>
<u>文本格式化</u>
H<sub>2</sub>o
3<sup>2</sup>=9
<em>文本格式化</em>
<small>文本格式化</small>
<strong>文本格式化</strong>
<del>文本格式化</del>
<pre>
    文本格式化
    文本格式化
    文本格式化
</pre>

6、a链接

超文本链接，用于跳转页面。

写法：<a href=""></a>

注意：
href 里面写的是跳转地址（相对路径、绝对路径、远程路径），一般使用相对路径。
相对路径是绝对路径的一部分。
远程路径就是相对路径，只不过把项目放到远程的服务器上面，通过远程服务器来访问的路径。

各种路径应用示例：

href默认写#，代表跳转当前页面（自身）

<a href="#">百度</a>

远程路径

<a href="https://www.baidu.com/">百度</a>

相对路径

点击a链接时打开当前项目的网页，使用相对路径来做。（相对路径：相对于当前文件的位置）

a. 如果当前文件和目标文件为同级兄弟关系，href里边可以直接写文件名；也可以按照父文件去写，如“./文件名”, 一个“.”代表从当前文件向外跳转一级。

<a href="index.html">打开index.html</a>

<a href="./index.html">打开index.html</a>

b. 跳转兄弟文件的子文件

<a href="page/page1.html">打开page1页面</a>

<a href="./page/page1.html">打开page1页面</a>

说明：上例中page1.html 为目标文件，page为目标文件的父文件。

c. 跳转父文件的兄弟文件

<a href="../index.html">打开index.html页面</a>

说明：上例为“双点跳”，即跳转到父文件的父文件，再取目标文件

绝对路径

文件所在盘符的目录，如：F:/web-411/0411/index.html

<a href="F:/web-411/0411/index.html">打开index.html页面</a>

说明：上例需要从盘里边直接打开

注意：

网页从服务端打开，里面路径不能写绝对路径，很容易造成文件丢失，所以一般不使用绝对路径。（webstorm自带服务端）
http://localhost:63342/web-4.11/0411/index%E4%B8%8B%E5%8D%88.html
上面这个网页地址是服务端地址，localhost 是主机名称，63342是端口号。
绝对路径想要有效果，当前文件必须从静态文件打开

属性：1、target

targrt="_self" 在当前网页里面打开； target="_blank" 重新打开一个选项卡。

<a href="https://www.baidu.com/" target="blank">百度</a>

使用a链接制作锚标：

当前页面的锚标

方法一：
在标记位置的上方写一个a链接，如：<a name="targetinfo"></a>，将当前位置a链接的href值写为“target”,即:<a href="target">跳转当前页面的锚标记</a>，几乎不用这种方法
方法二：
给标记位置的元素加属性id="target"，将当前位置a链接的href值写为“target”,即:<a href="target">跳转当前页面的锚标记</a>

跨页面的锚标

将当前位置a链接的属性值写为"跳转地址#target",目标位置写法同上。

<a href="./page/page1.html#target">跳转到page页面的锚标记</a>

7、img 图像标签

单标签
写法：<img src="" alt=""/>，src属性是图片的路径（远程、相对），alt属性是图片加载失败时显示的内容。

<img src="https://www.runoob.com/images/pulpit.jpg" alt="加载失败"/>

属性：
align 作用的是图片,效果是后边的文字对齐,即：让图片靠左、右、中。图片默认靠左，文字在图片右下

8、列表标签

有序列表 ol li
属性 type，修改序号的显示，1、a、i、A

<ol type="1">
    <li></li>
    <li></li>
    <li></li>
</ol>

无序列表 ul li
无type属性，可以使用css样式来修改列表样式，比如，若要去掉列表前的点，给<li>的样式里边添加list-style属性list-style:none;

<ul>
   <li></li>
   <li></li>
   <li></li>
</ul>

有序列表或无序列表的嵌套

<ol>
    <li>蔬菜</li>
        <ul>
            <li>辣椒</li>
            <li>西红柿</li>
            <li>菠菜</li>
        </ul>
    <li>大肉</li>
    <li>水果</li>
</ol>

9、区块标签

div标签

定义了文档的区域，块级。
相当于一个容器，主要用来做网页的框架布局、有换行功能。

写法：

<div>

</div>

span标签

内联元素，可用作文本的容器
没有特定含义
当与css一同使用时，可用于为部分文本设置样式属性

10、表单对象元素标签

1、input标签

写法：<input/>，单标签
属性：

type属性，决定当前的input标签的类型。没有type属性时，默认为单行文本框。

<input type="text"/>

属性值：
text：单行文本框
password：密码框
button：按钮
checkbox：复选框，去掉checkbox默认的样式，给元素添加样式属性-webkit-appearance: none;
radio：单选框
file：打开文件资源管理器，用来做文件上传
submit：表单提交按钮，用于表单元素，提交表单的数据，单独用时无效
reset：重置按钮，用于表单元素，重置表单，单独用时无效

value属性，标签的值

<input type="text" value="12345"/>

max属性

属性为text、password 的标签，可以添加maxlength 属性，限定输入的最大长度

<input type="text" value="12345" maxlength="10"/>

注意事项

含有checkbox属性、radio属性的标签，标签内的value属性不是界面显示的，是给代码使用的，若要显示，还要写在标签外部

<input type="checkbox" value="篮球"/>篮球

<input type="radio" value="女"/>女

把多个radio做成单选框，给radio起相同的名称

<input type="radio" value="0" name="sex"/>女
<input type="radio" value="1" name="sex"/>男

单选框radio、复选框checkbox默认选择，使用checked

<input type="radio" value="0" checked name="sex"/>女

<input type="checkbox" value="篮球" checked/>篮球

type属性为submit 或reset 时，按钮内容默认显示为“提交”、“重置”，若要更改内容，添加value=""属性

<input type="submit" value="注册"/>

<input type="reset" value="清空"/>

2、select下拉列表标签

下拉菜单

<select>
    <option>——请选择——</option>
    <option value="西安市">——西安市——</option>
    <option value="西安市" selected>——宝鸡市——</option>
    <option value="西安市">——渭南市——</option>
</select>

默认选择 selected

3、textarea 文本域标签

文本域多行文本框

<textarea rows="10" cols="10"></textarea>

ros和cols属性，行和列，控制外观大小
placeholder属性，提示信息，也可用于text 和password，但要去掉value值

<textarea rows="10" cols="10" placeholder="请输入..." ></textarea>

<input type="text" value="" maxlength="10" placeholder="请输入账号">
<input type="password" value="" maxlength="10" placeholder="请输入密码"/>

4、label 标签

标签为 input 元素定义标注（标记）。

label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

标签在单选按钮和复选按钮上经常被使用，使用该标签后，你点击单选按钮或复选按钮的文本也是可以选中的。

标签的 for 属性应当与相关元素的 id 属性相同。
<label for="关联控件的id" form="所属表单id列表">文本内容</label>

关联控件的id一般指的是input元素的id；
在html5中还新增了一个属性form，form属性是用来规定所属的一个或多个表单的 id 列表，以空格隔开；
当标签不在表单标签中时，就需要使用form属性来指定所属表单；

11、表单元素标签

表单是一个包含表单元素的区域，允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表（select）、单选框(radio)、复选框(checkboxes)等等。
使用表单标签<form>来设置，写法：<form></form>
功能：做用户注册或登录
属性:

action 提交表单的数据到后台的路径
method 表单提交的方式，get为显示提交(不安全，数据量大)，post为隐式提交（安全，数据量小），除以上两种常用的之外，还有delete（专门针对于删除操作使用的）、insert（专门针对于增加操作）、update（修改操作）

<form action="" method="">

</form>

注意：
表单提交数据时必须设置name属性
get方式提交会把表单的数据显示到路径的后边
post方式提交，比较安全，不在路径上显示

12、table 表格元素标签

标签

<tr>为行元素标签，
<td>为列元素标签。
<th>也是列，但可以自动居中、文本加重。
<caption>表头标签

属性

border属性，设置表格的边框宽度。
width属性，设置表格的宽。
cellspacing，设置单元格之间的间距。
align，设置表格居中的方式。
cellpadding，设置单元格里边的内间距，即文字到上、左单元格线的距离，cellpadding="10"即向上向左均为10px，右和下自动设置。
在<tr>元素里边添加属性align=“center”，行内文字居中。
bgcolor，设置表格颜色，可以应用到<table><tr><td>。

<table bgcolor="#00bfff" border="1" width="400" cellspacing="0" align="center" cellpadding="10">
  <caption>202010086-学生信息</caption>
  <tr>
  <th rowspan="2">班级</th>
  <th colspan="4">学生的基本信息</th>
  </tr>
  <tr>
    <td>序号</td>
    <td>姓名</td>
    <td>性别</td>
    <td>年龄</td>
  </tr>
</table>

表格的跨行和跨列，见上例

计数的时候算自身
rowspan 跨行
colspan 跨列

13、iframe框架

内嵌框架，用于制作小型的企业系统，eg：w3c菜鸟也可以使用 ifram 框架

属性：
src 内嵌地址
width 设置宽，可以写数值，也可以写百分比
height 设置高，写百分比无效，因为浏览器没有高，只有宽
name 名称
frameborder 设置边框。值为0时，移除边框

<ifram name="iframinfo" src="https://www.baidu.com/" width="1000" height="500"></iframe>

实现点击a链接，在iframe框架中显示嵌入的网页

<a href="./index.html" target="iframeinfo">index</a>
<a href="./index-a链接.heml" target="iframeinfo">index-a</a>
<a href="./index-table.html" target="iframeinfo">index-table</a>
<a href="./标签的简单案例.html" target="iframeinfo">表单案例</a>
<iframe name="iframeinfo" src="./index.html" width="100%" height="700" frameborder="0"></iframe>

效果：点击上例四个a链接，在上例iframe框架中显示a链接的内容。

daisy0328

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML4笔记整理

HTML里边的快捷键多行注释 ctrl +/复制当前行到下一行 ctrl+d标签的快捷写法标签字母 + tab网页格式化（网页排版较乱时使用） ctrl + alt +d +l第一节 HTML4一、概念1、什么是HTML?超文本标记语言: HyperText Markup Language不是一种编程语言，而是一种标记语言标记语...
复制链接

扫一扫