【前端】:HTML-白红宇

强烈建议你试试无所不能的chatGPT，快点击我

【前端】:HTML

阅读量：5898 次

发布时间：2019-06-19

本文共 3549 字，大约阅读时间需要 11 分钟。

前言: 最近开始学前端了，这篇博客主要介绍html的一些主要标签，写完这篇博客，我会用刚学的html做一个简单的登陆界面~~

一、HTML介绍

HTML(Hyper Text Mark-up Language)超文本标记语言，是一种制作万维网页面标准语言。相当于定义一套规则，大家都来遵守它。这样就可以让浏览器根据标记语言的规则去解释它。

浏览器(客户端)向服务端发出请求，服务端会返回字符串，浏览器会根据自己规定的规则，将字符串渲染成相应的界面。

Doctype告诉浏览器使用什么样的html或xhtml规范来解析html文档.

二、<head>头部

meta

提供有关页面的元信息，例：页面编码、刷新、跳转、针对搜索引擎和更新频度的描述和关键词

页面编码:

目前在大部分浏览器中，直接输出中文会出现中文乱码的情况，这时候我们就需要在头部将字符声明为 UTF-8:

每2秒刷新:

跳转:

打开html文件，5秒后会自动跳转到www.etiantian.org:

title:

标签页显示为hello: <title>hello</title>

如果要在hello前加小图片，可到别人的网站，copy图片到电脑，然后在head头部加上下面的代码:

效果图:

注意的点:

规范: html需小写; 每一个级别都要缩进

注释: 可多行注释也可单行注释,eg:

Ctrl + ? :可将选中的一次性加注释

三、<body>

标签一般分为两种: 块级标签和内联标签.

块级标签(会占一整行)　　eg:<h1></h1>

内联标签(只占字体所占的空间大小)　　 eg:<a></a>

1、p标签

p表示段落，默认段落之间是有间隔的。

2、br标签

br是换行<br/>

3、a标签

点击百度，当前界面则跳转到www.baidu.com:

1 百度

点击百度，打开新界面www.baidu.com:

1 百度

点击S2,跳转到本机文件s2.html:

1 S2

在html中，每一个标签都可以有一个id,该id必须是唯一的。点击"看第二章"，当前界面会跳到第二章的界面:

4、div标签

用于布局

5、img 图片标签

和a标签结合点击图片直接跳转，title指定鼠标放到图片后显示的内容，style定义宽高，alt指定图片不存在时的显示信息

6、H标签(标题)

1 h1
2 h2
3 h3
4 h4
5 h5
6 h6

7、select标签

1 　    7  8         14 15         21 22

运行界面:

以第一个复选框为例，在未选时默认是北京，如果想默认为惠来，可加上一个属性selected，PS:提交数据时，是提交value

8、input系列标签

复选框(eg: 兴趣): <input type="checkbox"/>

单选框(eg: 男女): <input type="radio"/>　　

上面两种框默认都是未选中的状态，加上checked属性则默认为选中状态

radio的name相同，则表示选中的时候是互斥

1

男:

2

女:

文本框/密码框/button按钮/submit按钮/上传文件

1  2  3 4  5  6  
     
7

运行界面:

9、form标签

form相当于一个表单，配合input标签submit可以把表单的内容提交到指定位置，提交内容以字典的形式提交{‘user’:xx,'email':xx,'pwd':xx},key值为name属性值

button只是一个简单的按钮; submit是提交表单的按钮(往后台提交数据)

1 Form
 2 
     
       3     
      
        4         主机名:
        5     
      
 6     
      
        7         端口:
        8     
      
 9     
      
       10         用户名:
       11     
      
12 13     
      14     
      15

运行界面:

如果想要提交文件，需要在其所在的form标签中添加特殊的一个属性: enctype="multipart/form-data" method="POST".

action＝“A”:　A表示数据提交的地方

10、textarea标签

可输入多行的文本框

1 zcl2

运行界面:

11、label标签

label标签中的for属性与input标签中的id相同，效果是只要点击文字就选中了对应的checkbox

1 婚否2

12、列表标签ul,ol,dl

运行界面:

13、<hr />标签

<hr/> 水平分割线

14、table标签

border="1": 设置边框　　colspan: 合并列　　rowspan: 合并行

1 
     
       2     
        3         
         4         
 5         
 6         
 7         
 8     
 9     
       10         
        11             
12             
13         
14         
        15             
16             
17             
18         
19         
        20             
21             
22         
23     
24 
                     第一列         第二列         第三列        
      
                     h1 h2         h3        
               hh1 hhh1         hh2         hh3        
               hhh2         hhh3

运行界面:

15、span标签

对文本中的一部分进行着色

1

我的母亲有蓝色的眼睛。

总结:

id,style,name所有标签都可以定义的属性

target, href是a标签特有的属性

src是img标签特有的属性

转载地址：http://dtxsx.baihongyu.com/

你可能感兴趣的文章

mongo shell启动配置文件.mongorc.js（二）

服务器与内存

SCVMM2008实战之虚拟机安装

Exchange Server邮箱管理

在Android（OPhone）模拟器中加载和使用SDCard卡

Windows Server 2008 显示隐藏文件扩展名和隐藏的文件

linux（虚拟机中）与windows共享文件两种方法

Exchange 2013信息权限保护之ADRMS安装

在图书馆里寻找清静的自我

X5平方速算法的证明

面试题解(2):loop相关

之关于单一职责原则

【笔记5】用pandas实现矩阵数据格式的推荐算法 (基于物品的协同)

iOS设置拍照retake和use按钮为中文简体

Android--通知之Toast

【HoorayOS】开源的Web桌面应用框架（第三版 v120421）

webview同步cookies

lucene LZ4 会将doc存储在一个chunk里进行Lz4压缩 ES的_source便如此

[sql] like in 实现参数化查询的问题

Spark 架构和组件集的简要概述

喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！-- 愿君每日到此一游！

当前时间: 2024-12-27 08:52:56 当前IP: 3.133.153.224 联系邮箱:javaeecc@qq.com Copyright © 2020 - 2022 baihongyu.com 京ICP备2021015314号-2

强烈建议你试试无所不能的CHAT-GPT，快点击我

强烈建议你试试无所不能的CHAT-GPT，快点击我