文档章节

html--标签1

wytao1995
 wytao1995
发布于 09/12 02:34
字数 2145
阅读 5
收藏 0

1、标题元素<h1></h1>~<h6></h6>

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<h1>h1到h6的标题元素</h1>
<h2>h1到h6的标题元素</h2>
<h3>h1到h6的标题元素</h3>
<h4>h1到h6的标题元素</h4>
<h5>h1到h6的标题元素</h5>
<h6>h1到h6的标题元素</h6>
</body>
</html>

    在页面中以醒目的方式显示文本

    特点:

            1⃣️字体大小变化

            2⃣️ 字体加粗

            3⃣️单独成行,上下  有垂直间距

    属性:align设置标记内容水平对齐

    取值:left/center/right         

 

2、段落标记paragraph

    以突出的形式显示一段文本

    <p></p>

    特点:单独成行,文本上下有空白距离

    属性:align

    取值:left/center/right

3、换行标记

<br>或者<br/>

4、水平分割线

<hr>或者<hr/>

属性:

size:水平线的尺寸,粗细,单位为px

width:表示水平线的宽度,单位为px或者%

align:水平对齐方式 left/right/center

color:水平线颜色,合法的颜色值

 

5、预格式化标签

<pre></pre>

保留了html中的空格和回车

 

6、特殊字符(实体)

&nbsp ; -->空格

&lt;    --> <

&gt;   --> >

&copy; --> ©️

&reg;  --> ®️

&times  --> x

&yen --> ¥

 

7、文本样式标签

<strong></strong>或者<b></b>字体加粗

<em></em>或者<i></i> 斜体

<del></del>或者<s></s>删除线

<u></u>下划线

<sup></sup>上标

<sub></sub> x下标

 

8、分区元素

1、块分区:用于页面布局

<div></div>

特点:单独成行

2、行分区

<span></span>

处理同一行文本的不同样式

特点:与其他的span和文字公用一行

9、块级元素和行内元素

块级元素:

    在网页中独占一行的元素,由上到下的排列,常见块级元素:p、div、h1~h6、结构标记

行内元素:

    网页中多个行内元素可以在一行内显示,从左往右排列,常见的行内元素:span、em、i、b、strong、u、del、s、sub、sup、a、img

行内块:

    表现的方式与行内元素一样,但具备块元素的特性

table:

    表格宽高,默认是由内容来决定的,内容多就宽,或者高

10、图像和链接

    (1)使用

        <img></img>

        属性:src="url"引用图片资源的路径

    (2)URL

            统一资源定位符

      (3)img标签属性

        src:source源。图像资源路径

        alt:资源出错时显示的文本

        width:宽,px为单位的数字,%无效

        height:高,px为单位的数字,%无效

        注意:解决图片失真:width/height只设置一个,让另一个自动适应

11、链接

    <a href="url"></a>

    (1)属性:href:链接路径

    target:指定打开链接的方式

        取值:_self:默认值,在当前的网页打开新网页

                _black在新的网页打开网页

    (2)其他表现形式

        下载资源:<a href="url">下载</a>

        新建邮件:<a href="mailto:g-chenglinag@tedu.cn">新建邮件</a>

        执行js代码:

<script>
        function show() {
            alert('111')
        }
    </script>

<a href="javascript:show()">执行js代码</a>

        返回页面顶部:

        <a href="#">返回页面顶部</a>

12、锚点

页面中的一个记号,可以通过点击超链接的方式,直接回到记号处

    (1)、使用锚点

        定义锚点

        第一种方式:<a href="#锚点名称"></a>

        第二种方式:给任意的标签添加id,把id当作锚点名称使用<any id="锚点名称">

        链接到锚点

        <a href="#锚点名称">链接本页锚点</a>

       

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<a href="#hz">海贼王</a>
<a href="#hy">火影忍者</a>
<a href="#kn">柯南</a>
<hr>
<!--<a name="hz"></a>-->
<p id="hz">海贼王  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci aliquid aut consequuntur cumque delectus facere fuga iste iusto laudantium, magnam mollitia natus non, obcaecati quasi reprehenderit repudiandae temporibus veritatis voluptates?300</p>
<!--<a name="hy"></a>-->
<p id="hy">火影忍者 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem cum dicta dolor doloribus, ducimus enim eos error id itaque magni molestias non, optio porro possimus quod, reprehenderit sed. Accusantium debitis doloribus perspiciatis quidem quos suscipit voluptate. Accusamus adipisci autem culpa dicta dignissimos dolor ea eaque eligendi et eveniet ex excepturi explicabo facere facilis fuga hic ipsum itaque laboriosam laudantium, nam nesciunt nulla odit, officia omnis quae quos repellendus sequi sint soluta ullam ut vero voluptate voluptates? Dolor dolorem dolorum error esse eveniet expedita hic impedit incidunt inventore ipsa laborum libero minus, necessitatibus nemo nisi nobis possimus provident quis repudiandae sequi sint suscipit totam velit veritatis voluptate. Animi dolores eveniet iste maxime modi mollitia numquam quibusdam suscipit velit? Atque autem eum iure minus nemo, nulla perspiciatis quae quo rem! Amet aspernatur at blanditiis deserunt exercitationem hic illo ipsum magnam maiores maxime mollitia, necessitatibus odio odit provident quod rem repellendus repudiandae sequi tenetur voluptates. Aliquid dolorum ex excepturi fugiat illo inventore maxime nostrum temporibus vel voluptate! Molestias, possimus, sed! Cum esse est, et eum id laudantium, maiores, minima nulla saepe suscipit tempore vero? Adipisci amet aspernatur aut consequatur cumque cupiditate deserunt dolores eaque eligendi fugiat itaque non officiis qui quibusdam quod saepe ut, veritatis voluptatem. A animi aperiam asperiores autem culpa dolorum earum, eos et, explicabo fugiat inventore iure libero magnam maiores minima mollitia officia omnis perspiciatis placeat porro quas, quasi repellat reprehenderit? Accusantium distinctio est expedita fugiat illo incidunt iure magnam odit, porro quasi, quod sed veniam veritatis vero voluptatem! Aperiam assumenda commodi cumque deleniti dolor in ipsa nam natus, neque numquam quae quod recusandae repudiandae tenetur voluptate. Asperiores assumenda blanditiis culpa doloremque earum hic iure necessitatibus perferendis! Ad aliquid architecto cum deleniti, deserunt dolore exercitationem fugiat hic, illo iste labore laboriosam non nulla placeat quae quam, quas quia voluptatibus voluptatum.</p>
<!--<a name="kn"></a>-->
<p id="kn">柯南 Lorem ipsum dolor sit amet, consectetur adipisicing elit. A ad aliquam deleniti dignissimos ea est eum fugit hic iusto laborum modi odio, odit, possimus quidem recusandae repellendus repudiandae sed vel. Harum ipsum magni molestiae nesciunt voluptas. Cum enim hic ipsam laudantium nihil nisi quaerat quis quo repudiandae, sunt. A animi aperiam, architecto at autem delectus doloremque eaque earum eos eveniet iste nobis odit placeat, provident quaerat quo velit voluptas, voluptatibus. Amet architecto at autem, beatae corporis cupiditate dolore eaque eligendi enim est exercitationem fuga harum ipsam iste iure laborum laudantium libero maiores modi molestiae mollitia natus neque numquam odio pariatur porro quasi rem, saepe similique tempora tempore vero vitae voluptates? Accusamus atque autem, consectetur cumque deserunt dicta dolor, ex facere harum ipsa labore magnam magni maiores molestias mollitia numquam qui quo rem repellendus, repudiandae saepe velit vero! Cumque eligendi et in ipsum magni nesciunt pariatur possimus recusandae ut, vel! Aspernatur at dolor, dolore et minus necessitatibus perferendis quasi. A ab ad asperiores autem dolore eaque exercitationem laboriosam similique veniam voluptatem? Ab alias corporis deleniti incidunt minima neque obcaecati quam voluptatibus. Blanditiis debitis eos est fugit id magni minima possimus quisquam quos repellat sapiente sint sunt, tempore temporibus veritatis? Error incidunt nulla quidem quisquam soluta voluptatem. Aliquam aliquid, animi asperiores consectetur dolore ducimus eaque eligendi fugiat fugit inventore iure officia porro provident quaerat quis similique voluptatem? Ab aliquid amet assumenda distinctio dolore dolorum harum illo iure, iusto libero modi, numquam odio possimus quaerat qui quos, soluta tenetur ut? Ab accusamus beatae ducimus illo impedit magni nisi sit tenetur veniam voluptatem. Eligendi enim et, id nulla praesentium voluptatem. Accusamus adipisci amet assumenda corporis debitis enim exercitationem facilis illo in iste laboriosam libero maxime minima nam non quasi qui quia quibusdam quod quos reiciendis, rerum sequi similique sint sit, soluta tenetur, voluptas. Quibusdam!</p>
</body>
</html>

13、表格

    (1)标记,快捷写法:table>tr*行数>td*列数

        <table>

            <tr>

                <td></td>

           </tr>

        </table>

    (2)属性

    table标签的属性:

    border:设置表格边框 1px

    width,height:设置的宽高小于表格的内容,表格按内容走,设置的宽高大于表格的内容,按照设置的值走

    align:center,left,right,设置表格对齐

    bgcolor:设置表格背景颜色

    bordercolor:设置表格边框颜色

    cellpadding:设置单元格内边距(边框与内容之间的距离)

    cellspacing:设置单元格外边距(边框与边框之间的距离)

    tr标签的属性

    align:设置当前行的文本水平对齐方式left/center/right

    valign:设置当前文本的垂直对齐方式top/middle/bottom

    bgcolor:设置当前行的背景色(不包含边框颜色)

    td属性:

    width:当前列的宽度,会影响这一列所有宽度

    height:设置当前列的所有高度,会影响整行的高度

    align/valign设置当前列的对齐方式

    bgcolor设置当前列的背景颜色

    colspan:跨列

    rowspan:跨行

(3)不规则表格的使用

colspan:跨列

从指定的单元格位置开始,横向向右合并n的单元格(n包含自己本身),被合并的单元格要删除

rowspan:跨行

从指定的单元格位置开始,纵向向下合并n的单元格(n包含自己本身),被合并的单元格要删除

14、可选标记

    (1)行/列的标题

    <th></th>与<td></td>一样的使用方式

    内容文字字体加粗,并且水平居中

    (2)表格标题

    <caption></caption>

    如果要设置表格标题,必须将<caption>放在<table>后面

15、表格的复杂应用

行分组

可以将连续的几行,划分到同一组中,进行同一的管理

1、表头行<thead></thead>:表格开始几行放入表头

2、表主体<tbody></tbody>:表格中间几行放入表主体

2、表尾行<tfoot></tfoot>:表格的最后几行放入表尾

© 著作权归作者所有

上一篇: html--标签2
下一篇: HTML
wytao1995
粉丝 1
博文 40
码字总数 26186
作品 0
六安
私信 提问
【CSS选择符】后代选择符

0013.jpg 在学习后代选择符之前,首先要了解一下组成一个网页的HTML家谱,每个HTML标签标示其中一个家庭成员。网页中的第一个HTML标签(标签),相当于所有其他标签的始祖。和标签在标签里,...

KelvinZ
2017/12/26
0
0
温故而知新——HTML篇

HTML概念 HTML(Hypertext Markup Language)即超文本标记语言 HTML发展史 1993年(IETE)HTML1.0 1995年(W3C)HTML2.0 1996年(W3C)HTML3.2 1997年(W3C)HTML4.0 1999年(W3C)HTML4.01—...

jia林
2017/11/27
0
0
前端开发才是你的舞台·初识HTML

HTML初识 本文详细出自实验楼http://www.shiyanlou.com/courses/19,转载请注明出处 写在前面:如果你想制作自己的网页,做网页设计,网站开发,那么你首先要学习的就是HTML,并能熟练掌握H...

实验楼
2018/04/27
0
0
HTML5&CSS3初学者指南(1) – 编写第一行代码

介绍 网络时代已经到来。现在对人们来说,每天上网冲浪已经成为一种最为常见的行为。 在网页浏览器中输入一段文本地址,就像http://www.codeproject.com,等待一下,网页就加载到浏览器窗口中...

乐搏学院
2016/12/23
7
0
Beautiful Soup模块使用

1.Beautiful Soup模块的介绍 Beautiful Soup 是一个可以从HTML或XML文件中提取数据的Python库,简单来说,它能将HTML的标签文件解析成树形结构,然后方便地获取到指定标签的对应属性,还可以...

彩色泡泡糖
06/20
21
0

没有更多内容

加载失败,请刷新页面

加载更多

还为PDF转Word抓狂?以下神器让你在职场倍受欢迎!

身在职场的你,是否一直在琢磨:如何能让自己在公司更受欢迎?如何才能在办公室里混个好人缘?如何在同事圈里留个好印象?其实,想要让自己成为受欢迎的人,只要让自己成为大家需要的人不就行...

foxit2world
18分钟前
6
0
AndServer+Service打造Android服务器实现so文件调用

so 文件调用 随着 Android 移动安全的高速发展,不管是为了执行效率还是程序的安全性等,关键代码下沉 native 层已成为基本操作。 native 层的开发就是通指的 JNI/NDK 开发,通过 JNI 可以实...

夜幕NightTeam
19分钟前
3
0
Docker下kafka学习三部曲之二:本地环境搭建

在上一章《 Docker下kafka学习,三部曲之一:极速体验kafka》中我们快速体验了kafka的消息分发和订阅功能,但是对环境搭建的印象仅仅是执行了几个命令和脚本,本章我们通过实战来学习如何编写...

程序员欣宸
20分钟前
4
0
萌新推荐!不再为Excel转换PDF发愁,Aspose.Cells for .NET一步到位!

Aspose.Cells for .NET(点击下载)是Excel电子表格编程API,可加快电子表格管理和处理任务,支持构建具有生成,修改,转换,呈现和打印电子表格功能的跨平台应用程序。 将Excel工作簿转换为...

mnrssj
21分钟前
6
0
对于绘画小白怎么画制服?该注意什么?

怎样制作学生服装?想必绘画初学者们常常会想的问题吧,不知道怎样才能画好人物的衣服,别着急,今日就在这儿讲一些关于如何绘画学生衣服校服的教程给我们!期望能够帮到你们! 轻便西装是不...

热爱画画的我
26分钟前
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部