HTML-标签-表单

最新推荐文章于 2022-04-06 00:14:32 发布

2218549749

最新推荐文章于 2022-04-06 00:14:32 发布

阅读量878

点赞数 3

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

本文链接：https://blog.csdn.net/qq_42073385/article/details/108573461

版权

HTML

HTML的介绍:

html:超文本标记语言

超文本:比普通文本更强大

标记:就是标签.可以使用一系列的标签,将网络上的文档格式统一,是分散的资源连接为一个逻辑整体.

html的组成:

html页面是由一系类的元素组成的,而元素是通过标签创建出来的

1.标签

标签可以用于设置文本样式,图片样式,超链接样式等等.用<>表示

2.属性

标签中还可以拥有属性,属性可以为标签提供更多的信息.

属性只能添加到开始标签中.格式为:属性名=属性值

组成部分:

元素:(Element)开始标签,结束标签与内容相结合,便是一个完整的元素

开始标签(Opening tag):包含元素的名称,被左右尖括号所包围.表示元素从这里开始或者开始起作用.

结束标签(Closing tag):与开始标签相似,知识其在元素名之前包含了一个斜杠.这表示着元素的结尾

内容(Content):元素的内容,

属性(Attribute):标签的附加信息

<!DOCTYPE html><!--文档声明-->
<html lang="en"><!--根标签-->
<head><!--头-->
    <meta charset="UTF-8">
    <title>01-入门案例</title>
</head>
<body><!--身体-->
    <h1 align="center">这是我的第一个HTML入门案例</h1>
</body>
</html>

html的注释

<!--注释-->

html的标签:

1.标签的分类

开始和结束的标签:

<h1></h1>  开始
<u></u>    文本加下划线

自闭和标签:

<br/>        换行
<hr/>        水平分割线

2.标签的嵌套

正确的嵌套格式:

<h1><u>文本</u></h1>

错误的嵌套格式:

3.块级元素和行内元素:

块级元素:在页面中以块的形式展现,自己独占一行,后面的内容会自动换行

<p><hr><div>

行内元素:在页面中以行的形式展现,不会换行.

4.div和span

div:是一个通用的内容容器,没有特殊语义.一班用来对其它元素进行分组,用于样式化的相关需求.

span:是一个通用的行内容器,没有特殊语义.一班用来编织元素以到达某种样式.

html的属性:

属性是可以提供一些额外的信息,这些信息不回直接显示在内容中.但可以改变标签的样式或提供数据使用.

定义格式:属性名 = 属性值

属性的规范:

同一个标签中属性的名称必须唯一

不区分大小写,建议使用小写

属性值可以使用单引号或双引号括起来,建议使用双引号.

常用的属性:

class:定义元素的类名,用来选择和访问特定的元素

id:定义元素的唯一标识,在整个文档中必须是唯一的

name:定义元素的名称,一班用于表单数据提交到服务器

value:定义在元素内显示的默认值,一班常用于表单标签中

style:定义元素的css样式

特殊字符:

原义字符	等价字符引用
<	&It;
>	>
"	"
’	'
&	&
空格

div样式布局:

基本格式：

格式:
<style>
    标签名{
   
        属性名:属性值;
    }
</style>

多个属性名格式：

<style>
    标签名{
    
        属性名1:属性值1;
        属性名2:属性值2;
        属性名3:属性值3;
    }
</style>

div的多样式：

一个属性名可以含有多个值，同时设置多样式。

格式:

<style>
    标签名{
    
        属性名:属性值1 属性值2 属性值3; 
    }
</style>

【提示】

为了布局方便，我们通常可以先设置边框的样式，进行布局。结束后，再去掉边框，直观展示完整界面。

文本标签:

标签名	作用
p	表示文本的一个段落
h	表示文档标题，`<h1>–<h6>` ，呈现了六个不同的级别的标题，`<h1>` 级别最高，而 `<h6>` 级别最低
hr	表示段落级元素之间的主题转换，一般显示为水平线
li	表示列表里的条目。
ul	表示一个无序列表，可含多个元素，无编号显示。
ol	表示一个有序列表，通常渲染为有带编号的列表
em	表示文本着重，一般用斜体显示
strong	表示文本重要，一般用粗体显示
font	表示字体，可以设置样式（已过时）
i	表示斜体
b	表示加粗文本

重点演示li的不换行效果：

li{
       display: inline; 		// 内联样式,有宽度,无高度}
li{
       display: inline-block; 	// 内联样式,有宽度,有高度}

3.3 使用标签

简单布局，使用div标签。
文本样式，使用基本文本标签。

3.4 实现步骤

创建初始页面。
使用div标签划分区域（标题，作者，副标题，正文），设置div样式。
编辑正文。
1. 使用h1标签加入标题。
2. 使用em标签加入作者信息。
3. 使用hr标签加入分割线。
4. 使用h3标签加入副标题。
5. 使用p标签加入正文。
6. 使用ol标签，li标签加入列表信息。
7. 使用strong标签，加入文字强调效果。

4 HTML案例-头条页面

想要将div布局成案例效果，首先需要对多个div进行区分，再分别设置每一个div自身的效果。

1）div的class值

首先编写三个div，设置边框样式

<style>
     div{
     border: 1px solid blue;}
</style>


<div >left</div>
<div >center</div>
<div>right</div>

发现通过div设置的样式都是一致的，无法个性化布局。如何区分不同的div呢？

使用class的值，格式：

.class值{
    属性名:属性值;
}

<标签名 class="class值">  
 提示: class是自定义的值

所以，使用class属性值，可以帮助我们区分div，更加精确的设置标签的样式。

2）浮动布局和清除

主体部分分为三列，而div是独占一行的，所以想要使用div布局，就还需要加入浮动 属性。

概念

float：指定一个元素应沿其容器的左侧或右侧放置，允许文本或者内联元素环绕它，该元素从网页的正常流动中移除，其他部分保持正常文档流顺序。

格式：
```

float：none；不浮动
float：left；左浮动
float：right；右浮动


clear：both；清除两侧浮动，此元素不再收浮动元素布局影响。
```

加入三部分div

<div class="left">left</div>
<div class="center">center</div>
<div class="right">right</div>

浮动布局

        .left{
   
            width: 20%;
            float: left;
        }

        .center{
   
            width: 59%;
            float: left;
        }


        .right{
   
            width: 20%;
            float: left;
        }

至此完成左中右三部分的布局。

加入footer 部分

   .footer{
      border: 5px solid blue;
    }
    <div class="footer">footer</div>

发现蓝色footer的div，延续正常文档流布局，摆放在navbar的下方，与浮动元素重叠。想要清除浮动影响，所以要设置清除浮动属性clear。

 .footer{
        border: 5px solid blue;
		 clear: both;  
  }

 <div class="footer">footer</div>

设置center

增加center 高度，完成基本的布局效果。

.center{
   
            width: 59%;
            float: left;
            height: 600px;
 }

4.2.2 设置背景

设置背景的格式：

背景色:
	 background-color: black;
背景图:
	 background-image: url("../img/bg.png");

请设置如下布局，效果如下

最低0.47元/天解锁文章

2218549749

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML-标签-表单

HTMLHTML的介绍:html:超文本标记语言超文本:比普通文本更强大标记:就是标签.可以使用一系列的标签,将网络上的文档格式统一,是分散的资源连接为一个逻辑整体.html的组成:html页面是由一系类的元素组成的,而元素是通过标签创建出来的1.标签标签可以用于设置文本样式,图片样式,超链接样式等等.用<>表示2.属性标签中还可以拥有属性,属性可以为标签提供更多的信息.属性只能添加到开始标签中.格式为:属性名=属性值组成部分:元素:(Element)开始标签,结束标签
复制链接

扫一扫