【前端】:HTML-白红宇

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

【前端】:HTML

阅读量：5897 次

发布时间：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/

你可能感兴趣的文章

C# 时间戳转换为时间方法

大话GIS（转载）

Android软件加安全码

091、万能的数据收集器 Fluentd （2019-05-15 周三）

20条Linux命令面试问答(转载）

LeetCode算法题-Maximum Depth of Binary Tree

POJ - 3436 ACM Computer Factory（最大流）

浅析socket与http (转载)

[线程]线程池

浏览器内多个标签页之间的通信之storage

sha1withRSA算法

git分支的创建与合并

ibatis.net学习笔记(五) 带条件查询语法

C语言第十次博客作业--结构体

让简历一发即中三大绝招

Vim和操作系统剪贴板交互

使用ExposedObject对Asp.net MVC中匿名类型的JsonResult做单元测试

ajax省市县联动

Cox 教学视频5

014-请问你觉得测试项目具体工作是什么？

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

当前时间: 2024-12-26 19:42:14 当前IP: 3.139.86.74 联系邮箱:javaeecc@qq.com Copyright © 2020 - 2022 baihongyu.com 京ICP备2021015314号-2

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

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