HTML 之基础语法

__Wwinky

于 2021-07-10 00:08:30 发布

阅读量162

点赞数 1

分类专栏： HTML

本文链接：https://blog.csdn.net/Wwinky/article/details/118607785

版权

HTML 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

实现简单的网页

HTML是由标签构成的，有两部分，分别是网页头部以及主体部分，其都有对应的标签包裹着，两个部分都要被包裹在html标签中，这是一个总的标签。
在这里插入图片描述
简单的写一个界面

<!-- DOCTYPE：告诉浏览器我们所使用的规范 -->
<!DOCTYPE html>
<html lang="en">
    
    <!-- head标签表示网页头部 -->
    <head>
        <!-- meta描述型标签，用来描述网站的信息 -->
        <meta charset="UTF-8">

        <!-- title标签表示网页标题 -->
        <title>我的第一个网页</title>
    </head>

    <!-- body标签代表网页主体 -->
    <body>
        我的第一个网页
    </body>
</html>

使用快捷键 Alt + B 就可以查看我们写的界面。
在这里插入图片描述

HTML的基本标签

HTML标签分为2种

一般标签
- 一般标签有开始符号和结束符号
- 一般标签可以在开始符号和结束符号之间插入其他标签或文字。
自闭合标签
- 自闭合标签只有开始符号没有结束符号
- 自闭合标签由于没有结束符号，不能插入其他标签或文字，只能定义自身的属性。

1. HTML标签

html是一般标签，整个网页是从 <html> 这里开始的，然后到 </html>结束。

2. Head标签

head标签代表页面的“头”，定义一些特殊内容，这些内容往往都是对浏览器不可见的内容。

head标签内还可以定义以下表格的标签。

内部标签	说明
`<title>`	定义网页的标题
`<meta>`	定义网页的基本信息（供搜索引擎）
`<style>`	定义CSS样式
`<link>`	链接外部CSS文件或脚本文件
`<script>`	定义脚本语言
`<base>`	定义页面所有链接的基础定位（用得很少）

3. body标签

body标签定义网页展示内容，下文所涉及的段落、列表等内容都是属于这一部分的内容。

段落与文字

定义在 <body> 标签内

1. 段落与文字标签

标签	语义	说明
`<h1>~<h6>`	header	标题
`<p>`	paragraph	段落
`<br>`	break	换行
`<hr>`	horizontal rule	水平线
`<div>`	division	分割（块元素）
`<span>`	span	区域（行内元素）

除了 <br> 和 <hr> 标签是自闭标签外，其他都是一般标签

2. 文本格式标签

标签	语义	说明
`<strong>`	strong（加强）	加粗
`<em>`	emphasized（强调）	斜体
`<cite>`	cite（引用）	斜体
`<sup>`	superscripted（上标）	上标
`<sub>`	subscripted（下标）	下标

我们来实现一下其中一些标签：

在body标签内输入下面代码：

我的第一个网页
<h1>这是一级标签</h1>
<h2>这是二级标签</h2>
<h3>这是三级标签</h3>
<h4>这是四级标签</h4>
<h5>这是五级标签</h5>
<h6>这是六级标签</h6>
<p>
    这是第一段第一行
    这是第一段第二行
    <strong>加粗</strong>
    <em>强调</em>
    <cite>引用</cite>
</p>
<br>
<hr>
<p>
    这是第二段第一行
    这是第二段第二行
    <sup>上标</sup>
    <sub>下标</sub>
</p>

这是实现了的效果：
在这里插入图片描述

块元素、行内元素以及行内块元素

HTML元素根据浏览器表现形式分为三种

块元素
- 特点
  - 独占一行，排斥其他元素跟其位于同一行，包括块元素和行内元素
  - 块元素内部可以容纳其他块元素或行元素
- 常见的块元素
  - <h1>~<h6>
  - <p>
  - <hr>
  - <div></div>
行内元素
- 特点
  - 可以与其他行内元素位于同一行
  - 行内内部可以容纳其他行内元素，但不可以容纳块元素，不然会出现无法预知的效果
- 常见的块元素
  - <strong>
  - <em>
  - <span></span>
行内块元素
- 特点
  - 和相邻行内元素(行内块)在一行上，但是他们之间会有空白缝隙。一行可以显示多个(行内元素特点)。
  - 默认宽度就是它本身内容的宽度(行内元素特点)。
  - 高度，行高、外边距以及内边距都可以控制(块级元素特点)
- 常见的行内块元素
  - <img/>
  - <input/>

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
        <div>这是块内元素</div>与块内元素同一行
        <br>
        <span>这是行内元素</span>与行内元素同一行
    </body>
</html>

在这里插入图片描述

列表

HTML中列表有三种：有序列表、无序列表和定义列表，有序列表和无序列表都比较常用，而定义列表比较少用。

标签	语义	说明
ol	ordered list	有序列表
ul	unordered list	无序列表
dl	definition list	定义列表

1. 有序列表

有序列表的语法：

<ol>
    <li>有序列表项</li>
    <li>有序列表项</li>
    <li>有序列表项</li>
</ol>

2. 无序列表

无序列表的语法：

<ul  type="列表项符号">
    <li>无序列表项</li>
    <li>无序列表项</li>
    <li>无序列表项</li>
</ul>

type可以定义序号类型

type属性值	列表项的序号类型
disc	默认值，实心圆“●”
circle	空心圆“○”
square	实心正方形“■”

3. 定义列表

<dl>
    <dt>定义名词</dt>
    <dd>定义描述</dd>
    ……
</dl>

<dl> 即“definition list（定义列表）”，<dt> 即“definition term（定义名词）”，而 <dd> 即“definition description（定义描述）”。

在该语法中，<dl> 标记和 </dl> 标记分别定义了定义列表的开始和结束，<dt> 后面添加要解释的名词，而在 <dd> 后面则添加该名词的具体解释。

尝试实现列表效果如下：
在这里插入图片描述
html代码为：

<ol>
<li>有序列表</li>
    <li>有序列表</li>
    <li>有序列表</li>
</ol>

<ul>
    <li>无序列表</li>
    <li>无序列表</li>
    <li>无序列表</li>
</ul>

<dl>
    <dt>定义名词</dt>
    <dd>定义描述</dd>
    <dt>定义名词</dt>
    <dd>定义描述</dd>
</dl>

表格

表格的基本标签：

标签	语义	说明
table	table（表格）	表格
tr	table row（表格行）	行
td	table data cell（表格单元格）	单元格

表格标签的基本结构标签：

标签	语义	说明
thead	table head	表头
tbody	table body	表身
tfoot	table foot	表脚
th	table header	表头单元格

只使用基本标签的话效果是这样子的
在这里插入图片描述
代码如下：

<table>
   <tr>
        <td>单元格1</td>
        <td>单元格2</td>
    </tr>
    <tr>
        <td>单元格1</td>
        <td>单元格2</td>
    </tr>
</table>

在基本标签的基础上使用了结构标签的效果如下：
在这里插入图片描述
这是html代码：

 <table>
            <caption>表格标题</caption>
            <!--表头-->
            <thead>
                <tr>
                    <th>表头单元格1</th>
            <th>表头单元格2</th>
                </tr>
            </thead>
        
            <!--表身-->
            <tbody>
                <tr>
                    <td>标准单元格1</td>
                    <td>标准单元格2</td>
                </tr>
                <tr>
                    <td>标准单元格1</td>
                    <td>标准单元格2</td>
                </tr>
            </tbody>
            <!--表脚-->
            <tfoot>
                <tr>
                    <td>标准单元格1</td>
                    <td>标准单元格2</td>
                </tr>
            </tfoot>
        </table>

合并表格

合并行使用td标签的rowspan属性，而合并列则用到td标签的colspan属性

合并行
- 语法：<td rowspan="跨度的行数">
合并列
- 语法：<td colspan="跨度的列数">

举个例子

<table border="1">
    <!--第1行-->
    <tr>
        <td colspan="2">第一行</td>
    </tr>
    <!--第2行-->
    <tr>
        <td>第二行第一列</td>
        <td>第二行第二列</td>
    </tr>
    <!--第3行-->
    <tr>
        <td>第三行第一列</td>
        <td>第三行第二列</td>
    </tr>
</table>

显示效果就是这样子的（为了方便观察，我加了边框）
在这里插入图片描述

图象标签

在HTML中，图像标签为 <img>。<img> 是一个自闭合标签。img标签只需要掌握3个属性就可以了：src、alt、title，其中src和alt这两个属性是img标签必不可少的属性。

属性	说明
src	图像的文件地址
alt	图片显示不出来时的提示文字
title	鼠标移到图片上的提示文字

语法：<img src="图片地址" alt="图片描述（给搜索引擎看）" title="图片描述（给用户看）">

1. 相对地址和绝对地址

相对路径
- 指的是同一个网站下，不同文件之间的的位置定位。
- 引用的文件位置是相对当前文件的位置而言，从而得到相对路径。
绝对路径
- 指的是文件的完整路径。

假设我想引用的照片存放在同一级的文件夹中

绝对路径就应该写为 D:/TestCode/HTMLCode/img/photo.jpg，即该照片所在的位置
相对路径写为 ../img/photo.jpg，“…/”表示上一级目录，html文件所在的文件夹和图象文件所在的文件夹属于同一级，所以需要先返回上一级文件夹才能找到img文件夹，再找到photo文件

假设我想引用的照片放于同一个文件夹中（不建议放在同一个文件夹中），相对路径的写法就简单多了，只用写成 photo.jpg 即可。

2. 图片格式

常见的图片格式有.jpg、.png和.gif，三者的特点有：

JPG可以很好处理大面积色调的图像，如相片、网页一般的图片。
PNG格式图片体积小，而且无损压缩，能保证网页的打开速度。最重要的是PNG格式图片支持透明信息。PNG格式图片可以称为“网页设计专用格式”。
GIF格式图片图像效果很差，但是可以制作动画。

链接

超链接使用a标签，语法如下：<a href="链接地址" target="目标窗口的打开方式">

可以利用target属性设置超链接跳转方式

target属性值	说明
_self	默认方式，即在当前窗口打开链接
_blank	在一个全新的空白窗口中打开链接
_top	在顶层框架中打开链接
_parent	在当前框架的上一层里打开链接

测试效果如下：
在body标签内输入 <a href="http://www.baidu.com" target="_self">百度</a>，打开浏览器预览
在这里插入图片描述
点击超链接也能成功跳转

表单

表单标签共有4个：<input>、<textarea>、<select> 和 <option>,其中 <select> 和 <option> 是配合使用的。

1. input标签

大部分表单都是用input标签完成的，语法：<input type="表单类型"/>

type属性值	说明
text	单行文本框
password	密码文本框
button	按钮
reset	重置按钮
image	图像形式的提交按钮
radio	单选按钮
checkbox	复选框
hidden	隐藏字段
file	文件上传

效果如下：在这里插入图片描述

2. textarea标签

多行文本框，语法：<textarea rows="行数" cols="列数">多行文本框内容</textarea>

效果如下：
在这里插入图片描述

3. select 和 option 标签

下拉列表由标签和标签配合使用。

语法：

<select multiple="mutiple" size="可见列表项的数目">

    <option value="选项值" selected="selected">选项显示的内容</option>

    ……

    <option value="选项值">选项显示的内容</option>

</select>

效果如下：
在这里插入图片描述

多媒体

在网页中插入音频、视频和flash都是使用embed标签。

语法：<embed src="多媒体文件地址" width="播放界面的宽度" height="播放界面的高度"></embed>

注意：

多媒体文件地址可以是相对地址，也可以是绝对地址。
width 和 height 使用px作为单位。

浮动框架iframe

浮动框架是一种较为特殊的框架，它是在浏览器窗口中嵌套的子窗口，类似于视频网站的小窗口。<iframe>框架可以完全由设计者定义宽度和高度，并且可以放置在一个网页的任何位置，这极大地扩展了框架页面的应用范围。

语法：<iframe src="浮动框架的源文件" width="浮动框架的宽" height="浮动框架的高"></iframe>

说明：

src属性是iframe的必须属性，它定义浮动框架页面的源文件地址。
在普通框架结构中，由于框架就是整个浏览器的窗口，因此不需要设置其大小。但是在浮动框架中，框架是插入到普通HTML页面中，所以可以调整框架的大小。浮动框架的宽度和高度都是以像素为单位。width和height这2个都是可选属性。

效果如下：
在这里插入图片描述
html代码为：

<!-- DOCTYPE：告诉浏览器我们所使用的规范 -->
<!DOCTYPE html>
<html lang="en">

    <!-- head标签表示网页头部 -->
    <head>
        <!-- meta描述型标签，用来描述网站的信息 -->
        <meta charset="UTF-8">

        <!-- title标签表示网页标题 -->
        <title>我的第一个网页</title>
    </head>

    <!-- body标签代表网页主体 -->
    <body>
        <h1>我的第一个网站</h1>
        <iframe src="http://www.baidu.com" width="400px" height="300px"></iframe>
    </body>
</html>

除此之外，还可以利用scrolling属性设置是否显示滚动条，scrolling属性有3种情况：根据需要显示、总是显示和不显示。

语法：<iframe src="浮动框架的源文件" width="浮动框架的宽" height="浮动框架的高" scrolling="取值"></iframe>

scrolling的属性值可以取：

scrolling属性值	说明
auto	默认值，整个表格在浏览器页面中左对齐
yes	总是显示滚动条，即使页面内容不足以撑满框架范围，滚动条的位置也预留
no	在任何情况下都不显示滚动条

将scrolling设置为no，看看效果，会发现滚动条消失了：
在这里插入图片描述

__Wwinky

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML 之基础语法

文章目录实现简单的网页HTML的基本标签1. HTML标签2. Head标签3. body标签段落与文字1. 段落与文字标签2. 文本格式标签块元素和行内元素列表1. 有序列表2. 无序列表3. 定义列表表格合并表格图象标签1. 相对地址和绝对地址2. 图片格式链接表单1. input标签2. textarea标签3. select 和 option 标签多媒体浮动框架iframe实现简单的网页 HTML是由标签构成的，有两部分，分别是网页头部以及主体部分，其都有对应的标签包裹着，两个部分都要被包裹在h
复制链接

扫一扫