1. body中的相关标签

1.1 标题标签：hn

HTML提供<hn>系列标签，用于修饰标签，包含：<h1>、<h2>、<h3>、<h4>、<h5>、<h6>。<h1>定义最大的标题。<h6>定义最小的标题。

例如：

<html>

    <head>

        <meta charset="utf-8"/>

        <title></title>

    </head>

    <body>

        <!-- 标题标签 -->

        <h1>小灰灰</h1>

        <h2>小灰灰</h2>

    </body>

</html>

1.2 水平线标签：hr

<hr/>：标签在HTML页面中创建一条水平分隔线，用于定义内容中的主体变化。

size属性：水平线的高度，单位像素。

noshade属性：没有阴影，取值，noshade，表示显示纯色。

例如：

<html>

    <head>

        <meta charset="utf-8"/>

        <title></title>

    </head>

    <body>

        <!-- 水平线 -->

        <hr />

        <hr size="5" />

        <hr noshade="noshade" />

    </body>

</html>

1.3 字体标签：font

<font>：用于设置字体尺寸、字体颜色等。

size属性：设置字体的大小。可能的值：从1到7的数字。浏览器默认值是3。

color属性：设置字体的颜色。

　　颜色的取值：#xxxxxx或colorname

　　　　#xxxxxx表示使用红绿蓝三原色设置颜色。

　　　　　　红绿蓝分别取值：00--ff，此处使用16进制。(ff就是十进制的255)

　　　　　　#000000 黑色，#ffffff 白色

　　　　　　#ff0000 红色，#00ff00 绿色，#0000ff蓝色

　　　　　　红绿蓝2位取值相同可以省略成1位。例如：#112233简化成#123

　　　　colorname使用英文单词确定颜色。red红色，blue蓝色，green绿色

例如：

<html>

    <head>

        <meta charset="utf-8"/>

        <title></title>

    </head>

    <body>

        <!-- 字体-->

        <font size="7">我最大</font>

        <font color="#ff0000">我最红</font>

        <font color="blue">我最蓝</font>

    </body>

</html>

1.4 格式化标签：b、i

<b>：粗体。

<i>：斜体。

例如：

<html>

    <head>

        <meta charset="utf-8"/>

        <title></title>

    </head>

    <body>

        <!-- 格式化-->

        <b>粗体</b>

        <i>斜体</i>

    </body>

</html>

1.5 段落标签：p、br

<p>：定义段落。p标签会自动在其前后创建一些空白。

<br/>：插入单个换行。

例如：

<html>

    <head>

        <meta charset="utf-8"/>

        <title></title>

    </head>

    <body>

        <!-- 段落-->

        <p>我是段落1</p>

        <br />

        <p>我是段落2</p>

    </body>

</html>

1.6 图片标签：img

<img>：在html页面中引用一张图片。

src：指定需要显示图片的URL（路径）。

alt：图片无法显示时的替代文本。

width：设置图像的宽度。

height：定义图像的高度。

实例：

<html>

    <head>

        <meta charset="utf-8"/>

        <title></title>

    </head>

    <body>

        <!-- 显示图片 -->

        <img src="img/1.jpg" alt="我躲起来了" width="200px" height="200px" title="鼠标移上显示"/>

        <img src="img/0.jpg" alt="我躲起来了" width="200px" height="200px" title="鼠标移上显示"/>

    </body>

</html>

1.7 列表标签：ul、ol

<ol>：定义有序列表。

　　type：列表类型，取值：A、a、I、i、1等。

<ul>：定义无序列表。

　　type：符号的类型，取值：disc 实心圆、square 方块、circle 空心圆。

<li>：定义列表项。是<ul>或<ol>的子标签。

例如：

<html>

    <head>

        <meta charset="utf-8"/>

        <title></title>

    </head>

    <body>

        <!-- 列表标签 -->

        <ul type="circle"> <!-- 以“空心圆”显示无序列表 -->

            <li>无序</li>

            <li>无序</li>

            <li>无序</li>

        </ul>

        <ol type="I"> <!-- 以大写阿拉伯数字显示序号 -->

            <li>有序</li>

            <li>有序</li>

            <li>有序</li>

        </ol>

    </body>

</html>

1.8 超链接标签：a

<a>：标签是超链接，是在html页面提供一种可以访问其他位置的实现方式。

href：用于确定需要显示页面的路径（URL）。

target：确定以何种方式打开href所设置的页面。常用取值：_blank、_self等。

　　_blank：在新窗口中打开href确定的页面。

　　_self：默认。使用href确定的页面替换当前页面。

例如：

<html>

    <head>

        <meta charset="utf-8"/>

        <title></title>

    </head>

    <body>

        <!-- 超链接 -->

        <a href="http://www.baidu.com" target="_self">

            访问百度，以默认方式打开

        </a><br />

        <a href="http://www.cnblogs.com" target="_blank">

            访问博客园，以新窗口方式打开

        </a><br />

    </body>

</html>

Web前端基础(2):HTML(二)的更多相关文章

Web前端基础(5):CSS(二)
1. 盒模型在CSS中,"box model"这一术语是用来设计和布局时使用,然后在网页中基本上都会显示一些方方正正的盒子.我们称为这种盒子叫盒模型. 盒模型有两种:标准模型和I ...
web前端基础知识-（二）CSS基本操作
1. 概述 css是英文Cascading Style Sheets的缩写,称为层叠样式表,用于对页面进行美化. 存在方式有三种:元素内联.页面嵌入和外部引入,比较三种方式的优缺点. 语法:style ...
Web前端基础——jQuery（二）
一.jQuery 中的常用函数 1) $.map(Array,fn); 对数组中的每个元素,都用fn进行处理,fn将处理后的结果返回,最后得到一个数组 //因为这些操作,没有与dom元素相关的,所以可 ...
Web前端基础(8):JavaScript(二)
1. 数据类型转换 1.1 将数值类型转换成字符串类型 1.1.1 隐式转换在js中,当运算符在运算时,如果两边数据不统一,CPU就无法计算,这时我们编译器会自动将运算符两边的数据做一个数据类型转换 ...
web前端基础知识及快速入门指南
web前端基础知识及快速入门指南做前端开发有几个月了,虽然说是几个月,但是中间断断续续的上课.考试以及其它杂七杂八的事情,到现在居然一直感觉自己虽然很多前端的知识很眼熟,却也感觉自己貌似也知识在门口 ...
进击的Python【第十六章】：Web前端基础之jQuery
进击的Python[第十六章]:Web前端基础之jQuery 一.什么是 jQuery ? jQuery是一个JavaScript函数库. jQuery是一个轻量级的"写的少,做的多&quo ...
进击的Python【第十五章】：Web前端基础之DOM
进击的Python[第十五章]:Web前端基础之DOM 简介:文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口.它给文档提供了一种结构化的表示 ...
进击的Python【第十四章】：Web前端基础之Javascript
进击的Python[第十四章]:Web前端基础之Javascript 一.javascript是什么 JavaScript 是一种轻量级的编程语言. JavaScript 是可插入 HTML 页面的编 ...
进击的Python【第十三章】：Web前端基础之HTML与CSS样式
进击的Python[第十四章]:Web前端基础之HTML与CSS样式一.web框架的本质众所周知,对于所有的Web应用,本质上其实就是一个socket服务端,用户的浏览器其实就是一个socket客 ...

随机推荐

火车票买不到？看我用python监控票源
同事说最近火车票难买,我就帮他用个脚本监控一下. 最近高铁票比较难买,还有什么候补.要不停的刷,才有时候可以捡漏.有时候明明候补了,到快开车告诉你余票不足,候补失败. 凡事预则立,我打算写个脚本提前 ...
swoole为什么不能代替nginx
Swoole不能代替Apache和Nginx这些通用的HTTP服务器. 但基于Swoole开发的PHP应用不依赖Apache和Nginx也能提供生产级别的HTTP服务. 有需要学习交流的友人请加入交流 ...
Win10(64位)安装汇编环境(MASM)
1:需要的文件需要的安装包:这些百度都能下载找到 1).DOSBox 链接: 2) .MASM5.0 链接: 3).DEBUG 链接: 下面给出我们打包的环境直接可用: (汇编我并不需要关注安装这 ...
pandas.apply()函数
1.介绍 apply函数是pandas里面所有函数中自由度最高的函数.该函数如下: DataFrame.apply(func, axis=0, broadcast=False, raw=False, ...
三行Jquery代码实现简单的选项卡
今晚,我们来用实现一个简单的选项卡切换代码,主要代码只有两行. 效果: 思路:通过切换JQuery控制div的显隐和样式的改变其中那个一个div显示,其余全隐藏实现: <!DOCTYPE h ...
拥抱webpack4，有效缩减构建时间57%+
背景最近有感觉到,随着系统模块数量的增加,wepack编译打包的速度越来越慢,于是我想给项目做一下优化升级,也借此机会系统地学习一下webpack4. 升级过程当前版本 "depende ...
实现用SQL查询连续发文天数/连续登录天数
当月最长连续发文天数: //临时:id_time_table: select distinct app_id, from_unixtime(create_date_time, 'yyyy-MM-dd' ...
【nodejs原理&源码赏析（4）】深度剖析cluster模块源码与node.js多进程（上）
目录一. 概述二. 线程与进程三. cluster模块源码解析 3.1 起步 3.2 入口 3.3 主进程模块master.js 3.4 子进程模块child.js 四. 小结示例代码托管在: ...
SpringCloud的入门学习之深入理解Eureka注册中心
1.Eureka 注册中心三种角色. 答:a.Eureka Server,注册中心,通过 Register.Get.Renew 等接口提供服务的注册和发现. b.Application Service ...
Spring Cloud（一）：入门篇
Spring Cloud 简介 Spring Cloud 是一个基于 Spring Boot 实现的微服务架构开发工具,可以快速构建分布式系统中的某些常用模式,如配置管理.服务治理.断路器.智能路由. ...

Web前端基础(2):HTML(二)