HTML基础1——常用的标签，表格，内联框架

最新推荐文章于 2022-05-27 14:00:00 发布

南风知我意℡

最新推荐文章于 2022-05-27 14:00:00 发布

阅读量484

点赞数

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

本文链接：https://blog.csdn.net/SouthWindKnowMe/article/details/106533974

版权

html 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

这里写目录标题

本文本用于本人学习笔记的整理。

webstorm的一些快捷键

复制当行：ctrl+d
删除当行：ctrl+y
同时编辑：alt键按住去选择

HTML

超文本语言
不区分大小写，建议小写
内容在标签里面，标签分为双标签和单标记
html中在前标签中可包含属性和值，值用“”引起来，多个属性用空格隔开，属性不区分书讯
< html >
html的基本结构
包括文档类型声明，文档标题，文档内容。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>第一个文档</title>
</head>
<body >
    <!--
    p:是段落标签（元素、标记）
    font:修饰字体
    -->
    <font size="5" color="red">aaa</font>
</body>
</html>

head表情用来定义头部，是头部元素的容器，可以引用脚本、指示浏览器在哪里找到样式表。下面这些标签可用在 head 部分：< title >、< meta>、< link>、< style>、 < script>
head里面的lang 为声明主要语言，为english，只是声明更友好，不影响显示效果
meta charset=“utf-8”：是文档的属性，表明文档使用的编码
title：显示在浏览器上面的标题，必须有
meta
元素可提供有关页面的元信息（meta-information），用来向浏览器或搜索引擎描述页面。比如文档的描述和关键词。它只可以放在head中。属于元信息标签。
常见的meta有
Keywords(关键字)　
keywords用来告诉搜索引擎你网页的关键字是什么。
< meta name=“keywords” content=“web前端开发”>
description(网站内容描述)
description用来告诉搜索引擎你的网站主要内容。
< meta name=“description” content=“北京尚学堂,web前端培训”>
标签可以相互嵌套，注意层次关系
语义化标签：明白每个标签的用途（在什么情况下使用此标签合理）比如，网页上文章的标题就可以用标题标签 h1-h6,段落用p,地址用address等

常用标签

图片 < img >

江图片加载到页面中
必须属性 src：存储图片的位置
常用属性：
width，height, alt（图片加载失败时的显示），title（鼠标停留时的显示）
< img src=“URL” width=“300” alt=”加载失败”/>

超链接 < a> < /a>

< a href="" target="" title=””>文本< /a>
href属性：链接URL
target属性：目标，可取值_blank（弹出一个新的窗口）,_self（覆盖自己）等
name属性：锚点名称（用来快速定位到本页面的某个位置）
title属性：定义了鼠标经过时的提示文字
锚点举例：

< h3> < a href="#life"> 4 个人生活< /a>< /h3>
<h5 ><a name="life">个人生活</a></h5>

则在h3的个人生活那会有超链接跳转到本页的个人生活那里。

水平分割线：hr

在 HTML 页面中创建一条水平线。可以在视觉上将文档分隔成各个部分。

属性：

align：水平对齐方式，默认居中
width：水平线的长度，可取像素（px）和百分比（%）
size：水平线的高度
color：颜色

示例——使水平线在页面中间显示，它的宽度为页面的50%

< hr align="center" width="50%" / >

格式化标签

通过标签可以看出意思

地址 address

< address>
北京海淀区。西三旗桥东。神州科技园
< /address>

原始字符串 pre

被包围在 pre 元素中的文本通常会保留空格和换行符
示例——用pre定义有换行的文本
< body>
< pre>
春眠不觉晓，
处处闻啼鸟。
夜来风雨声，
花落知多少。
< /pre>
< /body>

文本格式化标签

在这里插入图片描述

块级元素和行内元素

1.块级元素独占一行，行内元素在同一行显示
2.块级元素默认宽度为100%，行内元素由内容撑开
3.块级元素可以设置宽高，行内元素不可以设置宽高
4.块级元素可以设置margin和padding和四个方向，行内元素只可以设置margin和padding和左右值，上下不起作用
5.块级元素默认的display为block，行内元素的display为inline
6.块级元素可以包含块级元素和行内元素，行内元素一般只包含行内元素和文本
7.常见的块级元素有h1-h6，p，div等，行内元素有a，em，b，i，u等

列表标签

列表分为有序列表和无序列表
在这里插入图片描述

无序列表

<ul>    
    <li>第一项</li>           
    <li>第二项</li>
    <li>第三项</li>
</ul>

< li>的属性type 拥有的选项
disc 默认实心圆
circle 空心圆
square 小方块
none 不显示

有序列表

<ol>
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
</ol>

< li>的属性type 拥有的选项
1 表示列表项目用数字标号（1,2,3…）
a 表示列表项目用小写字母标号（a,b,c…）
A 表示列表项目用大写字母标号（A,B,C…）
i 表示列表项目用小写罗马数字标号（i,ii,iii…）
I 表示列表项目用大写罗马数字标号（I,II,III…）

自定义列表
定义列表默认为两个层次，第一层为列表项标签< DT>，第二层为注释项标签< DD>

<dl>
    <dt>第1项</dt>
    <dd>注释1</dd>
    <dt>第2项</dt>
    <dd>注释2</dd>
    <dt>第3项</dt>
    <dd>注释3</dd>
</dl>

表格 table

在这里插入图片描述

table

定义一个表格

caption

用来定义表格的标题

tr,td

tr: 定义行元素，有几行，就有几个tr标签
td: 列元素标签，有几列，就有几个td标签，属性和tr一样
在这里插入图片描述

colspan rowspan

单元格的跨列，跨行合并属性，都在td里面才有.
在进行合并的时候，就会多出来一个占位，所有原来本身的某列元素，就需要去掉。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>合并单元格</title>
</head>
<body>
    <table border="1px" width="300px"  height="300px" align="center">
        <tr>
            <td colspan="2"></td>
            <td rowspan="2"></td>

        </tr>
        <tr>

            <td rowspan="2"></td>
            <td></td>
        </tr>
        <tr>

            <td colspan="2"></td>

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

表格如图：
在这里插入图片描述

iframe 内联框架

相当于把别人做好的页面内嵌进来，是body的子级，成为一个元素在body里面。
属性
①width 可设置内联框架的宽
②height 可设置内联框架的高
③name 设置框架名称
④src 设置页面的路径 必须有
⑤scrolling规定是否在 iframe 中显示滚动条（yes，no，auto）
⑥ frameborder规定是否显示框架周围的边框（1默认有边框,0）

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Iframe框架</title>
</head>
<body>
    <iframe src="http://www.baidu.com"  frameborder="1" name="topIframe" width="100%" height="150px"  scrolling="auto" ></iframe>
    <iframe src="other/menu.html" height="480px" name="leftIframe" ></iframe>
    <iframe src="http://www.baidu.com" name="rightIframe" height="480px" width="1020px"></iframe>


    <!-- <a href="http://www.sina.com.cn"  target="topIframe">新浪</a>
    <a href="http://www.baidu.com"  target="topIframe">百度</a>-->
</body>
</html>

将百度的首页内连进来，并且定义了一个标签，点击就可以在某个框架内打开一个页面。