HTML快速入门
创始人
2024-06-01 11:12:23
0

目录

  • HTML概念
  • HTML基本格式
  • 基本语法
  • 常用标签
    • 1.文件标签:构成html最基本的标签
    • 2.文本标签:和文本有关的标签
    • 3.列表标签
    • 4.图片标签
    • 5.超链接标签
    • 6.表格标签
    • 7.表单标签

HTML概念

HTML是最基础的网页开发语言,Hyper Text Markup Language,超文本标记语言.

  1. 超文本是用超链接的方法,将各种不同空间的文字信息组织在一起的网状文本.

  2. 标记语言:

  • 由标签构成的语言。<标签名称> 如 html,xml
  • 标记语言不是编程语言

HTML基本格式



Title

你好!


(1)声明必须是HTML 文档的第一行,位于 标签之前。声明不是 HTML 标签,是一条指令,它用于向浏览器说明当前文档使用哪种HTML标准规范。定义文档类型
(2)标签位于声明之后,被称为根标签。根标签主要用于告知浏览器该文档是一个HTML文档。其中,标签标志着HTML文档的开始,标签则标志着HTML文档的结束,它们之间是文档的头部和主体内容。
(3)标签用于定义HTML文档的头部信息,也被称为头部标签。标签紧跟在之后,主要用于封装其他位于文档头部的标签,如、、及</link></meta>

基本语法

(1) html文档后缀名 .html 或者 .htm 。
(2)标签分为
①双标签:有开始标签和结束标签。如
②单标签:开始标签和结束标签在一起。如

③注释标签:注释内容不会显示在浏览器窗口中。如
(3)标签可以嵌套:
需要正确嵌套,不能你中有我,我中有你.
错误:
正确:
(4)在开始标签中可以定义属性。属性是由键值对构成,值需要用引号(单双都可)引起来。
(5) html的标签不区分大小写,但是建议使用小写。

常用标签

1.文件标签:构成html最基本的标签



Title

你好!


  • :定义文档类型为html文档
  • html:根标签
  • head:头标签。用于指定html文档的一些属性,引入外部的资源
  • title:标题标签
  • body:主体标签,用于定义html文档的内容

2.文本标签:和文本有关的标签

以下所写全部代码均在 内。

  • 注释标签:

  • 标题标签:

    to

    h1~h6:字体大小逐渐递减

你好

你好

你好

你好

你好
你好

在这里插入图片描述

  • 段落标签:

只有正确认识历史,才能更好地规划未来,开创未来。

中华民族有着五千多年的文明史,中华传统文化源远流长,博大精深。

在这里插入图片描述

  • 换行标签:

只有正确认识历史,才能更好地规划未来,开创未来。

中华民族有着五千多年的文明史,中华传统文化源远流长,博大精深。

她作为一种积淀型文化,长期以来,形成了一种具有相对稳定性的民族精神。

在这里插入图片描述

  • 块级标签:
    div:每一个div占满一整行。
1
2

在这里插入图片描述

  • 行内标签:
    文本信息在一行内展示,对文本没有影响

使用HTML时,通过br标签可以实现
换行效果

在这里插入图片描述

  • 展示一条水平线:


    • 属性:
      color:颜色
      width:宽度
      size:高度
      align:对齐方式
      center:居中
      left:左对齐
      right:右对齐

    在这里插入图片描述




在这里插入图片描述

  • 字体标签:
    • 属性:
      color:颜色
      size:大小
      face:字体
默认样式
我是7号绿色文本,字体是微软雅黑

在这里插入图片描述

  • 字体加粗:
  • 字体斜体:
超文本是用超链接的方法,将各种不同空间的文字信息组织在一起的网状文本

在这里插入图片描述

  • 文本居中:
hello JavaWeb

在这里插入图片描述
用例:
文本是随便找的,没别的意思。
在这里插入图片描述



Title


公司简介


四川创途企业管理有限公司成立于2018年7月,位于中国科技城绵阳西南科技大学国家大学科技园,是依托高校教师团队成立的专门从事高端会议服务、代理记账、审计、财税咨询、工商税务代理、知识产权代理等相关业务的专业服务机构。

公司汇集了一批注册会计师、注册税务师、中级会计师、知识产权代理人在内的,精通财务、税务、审计咨询以及知识产权代理等业务,以及精于工商注册、税务流程和资质申办的专业代办人员,同时建立了严格的客户档案管理制度和保密制度。公司秉承“诚信经营,客户至上”的经营理念,致力于为中小微企业及高校科研团队提供精准、安全、规范、保密的专业化一条龙服务。


©2018 All Right Reserved. 西南科技大学新能源与核环境材料研究中心

3.列表标签

  1. 无序列表
    至少有一对
  • 列表项1
  • 列表项2
  • 列表项3
  • ...

属性:

  • type
    • disc --> ●(默认值)
    • square --> ■
    • circle --> ○

  • 无序列表
  • Java Web
  • 数据库系统
  • c程序语言

在这里插入图片描述

  1. 有序列表
  1. 列表项1
  2. 列表项2
  3. 列表项3
  4. ...

  1. 无序列表
  2. Java Web
  3. 数据库系统
  4. c程序语言

在这里插入图片描述

  1. 定义列表

第一点
balabalabala
阿巴阿巴阿巴
第二点
balabalabala
阿巴阿巴阿巴

在这里插入图片描述

4.图片标签


属性:

  • src:图片的路径
  • align:
    • left
    • right
    • center --> 居中
  • width
  • height
  • alt ——名称
  • border——设置边框

代码:


在这里插入图片描述

相对路径

  • .开头的路径
  • ./:代表当前目录 ./image/1.jpg
  • ../:代表上一级目录

5.超链接标签

文本或图像

新窗口打开:百度
父框架集中打开:百度
默认原窗口打开:百度
整个窗口中打开:百度

在这里插入图片描述
新窗口打开:
在这里插入图片描述
其他打开方式:
在这里插入图片描述

6.表格标签

  • table:定义表格
    • width:宽度
    • border:边框
    • cellpadding:定义内容和单元格的距离
    • cellspacing:定义单元格之间的距离.如果指定为0,则单元格的线会合为1条
    • bgcolor:背景色
    • align:对齐方式
  • tr:定义行
    • bgcolor:背景色
    • align:对齐方式
  • td:定义单元格
    • colspan:合并列
    • rowspan:合并行

用例:跨行跨列表格
在这里插入图片描述



跨行跨列

111314
212224
3134
414243

7.表单标签

表单就是在网页上用于输入信息的区域,它的主要功能是收集数据信息,并将这些信息传递给后台信息处理模块。

①表单标签
表单标签:所有需要提交到服务器端的表单项必须使用

括起来!

form 标签属性:

  • action,整个表单提交的位置(可以是一个页面,也可以是一个后台 java 代码)
  • method,表单提交的方式(get/post/delete……等 7 种)

②文本输入项

  • name:提交到服务端必须指定的属性,其值可以任意,建议见文知意。
  • size:指定输入框的宽度
  • maxlenght:指定输入内容的长度
  • readonly:只读,内容不能别修改
  • placehoder:输入内容提示信息

③密码输入框

④单选框

  • name:用于分组
  • value:提交到服务端必须指定的属性,其值可以任意,建议见文知意。
  • checked:默认选中

⑤多选按钮

⑥下拉列表


  • name:分组
  • value:提交到服务端必须指定的属性,其值可以任意,建议见文知意
  • selected:默认选中

⑦文件上传项

⑧文本输入域

⑨提交按钮

  • value:提交到服务端必须指定的属性,其值可以任意,建议见文知意

⑩普通按钮

⑪重置按钮

⑫隐藏项

用于用户比较敏感的一些信息。

用例:
在这里插入图片描述



注册页面

用户名:
密码:
性别:
兴趣:看电影敲代码玩游戏
头像:

相关内容

热门资讯

编程安卓系统和鸿蒙主题,跨平台... 你有没有想过,手机的世界里,除了苹果的iOS和安卓的操作系统,还有个神秘的鸿蒙系统?今天,咱们就来聊...
哪个安卓机系统好用,探索安卓系... 你有没有想过,手机里的安卓系统就像是个大厨,不同的系统就像不同的烹饪手法,有的让你吃得津津有味,有的...
安卓如何控制苹果系统,从安卓到... 你知道吗?在这个科技飞速发展的时代,安卓和苹果两大操作系统之间的较量从未停歇。虽然它们各自有着忠实的...
安卓原生系统文件夹,安卓原生系... 你有没有发现,每次打开安卓手机,里面那些文件夹就像是一个个神秘的宝箱,里面藏着各种各样的宝贝?今天,...
基于安卓系统的游戏开发,从入门... 你有没有想过,为什么安卓手机上的游戏总是那么吸引人?是不是因为它们就像是你身边的好朋友,随时随地都能...
安卓系统怎样装驱动精灵,安卓系... 你那安卓设备是不是突然间有点儿不给力了?别急,今天就来手把手教你如何给安卓系统装上驱动精灵,让你的设...
如何本地安装安卓系统包,详细步... 你有没有想过,把安卓系统装在你的电脑上,是不是就像给电脑穿上了时尚的新衣?想象你可以在电脑上直接玩手...
安卓12卡刷系统教程,体验全新... 你有没有发现,你的安卓手机最近有点儿不给力了?运行速度慢得像蜗牛,是不是也想给它来个“换血大法”,让...
安卓系统无法打开swf文件,安... 最近是不是发现你的安卓手机有点儿不给力?打开SWF文件时,是不是总是出现“无法打开”的尴尬局面?别急...
鸿蒙系统依赖于安卓系统吗,独立... 你有没有想过,我们手机里的那个鸿蒙系统,它是不是真的完全独立于安卓系统呢?这个问题,估计不少手机控都...
适合安卓系统的图片软件,精选图... 手机里堆满了各种美美的照片,是不是觉得找起来有点头疼呢?别急,今天就来给你安利几款超级适合安卓系统的...
阴阳师安卓系统典藏,探寻阴阳师... 亲爱的阴阳师们,你是否在安卓系统上玩得如痴如醉,对那些精美的典藏式神们垂涎欲滴?今天,就让我带你深入...
安卓系统有碎片化缺点,系统优化... 你知道吗?在手机江湖里,安卓系统可是个响当当的大侠。它那开放、自由的个性,让无数手机厂商和开发者都为...
安卓4系统手机微信,功能解析与... 你有没有发现,现在市面上还有很多安卓4系统的手机在使用呢?尤其是那些喜欢微信的朋友们,这款手机简直就...
鸿蒙系统是安卓的盗版,从安卓“... 你知道吗?最近在科技圈里,关于鸿蒙系统的讨论可是热闹非凡呢!有人说是安卓的盗版,有人则认为这是华为的...
安卓系统怎么剪辑音乐,轻松打造... 你是不是也和我一样,手机里存了超多好听的歌,但是有时候想给它们来个变身,变成一段专属的旋律呢?别急,...
怎么把安卓手机系统变为pc系统... 你有没有想过,把你的安卓手机变成一台PC呢?听起来是不是有点酷炫?想象你可以在手机上玩电脑游戏,或者...
手机怎么装安卓11系统,手机安... 你有没有想过,让你的手机也来个“青春焕发”,升级一下系统呢?没错,就是安卓11系统!这个新系统不仅带...
安卓系统如何拼网络,构建高效连... 你有没有想过,你的安卓手机是怎么和网络“谈恋爱”的呢?没错,就是拼网络!今天,就让我带你一探究竟,看...
安卓系统怎么看小说,轻松畅享电... 你有没有发现,手机里装了那么多应用,最离不开的竟然是那个小小的小说阅读器?没错,就是安卓系统上的小说...