1.HTML的基本语法

  • HTML是什么？：HTML是一种超文本标记语言，负责网页的结构，设计页面的元素内容等

    • 超文本：超越文本限制，除了文本信息，还可以定义图片，音频，视频等
    • 标记语言：由标签构成的语言。
  • HTML代码直接在浏览器中运行，由浏览器解析

（1）HTML标签的特点

  • 不区分大小写
  • 标签属性值单引号和双引号都可以
  • HTML语法松散，不严格

（2）HTML基本骨架

  • html : 整个网页

  • head :网页头部，用来存放给浏览器看的信息，例如CSS

    • title：网页标题

  • body : 网页主体，用来存放给用户看的信息，例如图片文字

  • 生成HTML基本骨架的方法：！+回车

<!DOCTYPE html>               <!--文档类型为html-->

<html lang="en">

<head>

    <meta charset="UTF-8">    <!--字符集为UTF-8-->

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>网页标题</title>

</head>

<body>

    存放给用户看的内容

</body>

</html>

（3）加粗标签

<strong>加粗字体测试</strong>

（4）常用单标签

<br>:换行

<hr>:水平线

（5）标题标签

  • 标题标签有h1~h6(双标签)
  • 显示特点：文字加粗，字号逐渐减小，独占一行（换行）
  • h1标签一般一个网页只用一次
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>网页标题</title>

</head>

<body>

    <h1>一级</h1>

    <h2>二级</h2>

    <h3>三级</h3>

    <h4>四级</h4>

    <h5>五级</h5>

    <h6>六级</h6>

</body>

</html>

（6）图像标签

  • 图像标签的作用：在网页中插入图片
  • src用于指定图像的位置和名称，是图像标签的必须属性
<img src="./图片的URL">

属性值：

  • 补充：width和height的属性值可以用百分比表示（80%），即所占父元素的百分比

（7）div,span标签

  • div：独占一行的标签，双标签
  • span：不换行，双标签。主要用来对一行中的元素分组

（8）超链接标签

  • 作用：点击跳转到其他页面

  • herf属性值用来跳转地址，是超链接的必须属性

  • target属性：

    • _self :在当前页面直接跳转到该链接
    • _blank : 新增一个页面打开该链接的网站

  • 在开发初期，如果不知道超链接的跳转地址，则href属性值写#，表示空连接不会跳转

  • 标签的超连接都默认有下划线，如果不想要下划线，则需要text-decoration属性修改

  • text-decoration属性值：

    • none:无下划线
    • underline:文本下划线
    • overline:文本上的一条线
    • line-through : 定义穿过文本下的一条线
    • blink : 定义闪烁的文本
    • inherit : 从父元素继承相同的值

（9）视频标签

  • 视频标签支持width和height属性设置

（10）音频标签



（11）段落标签< p >

  • 段落标签：p(双标签)
  • 段落标签的特点：独占一行，段落间存在间隙

（12）文本加粗标签

  • 两种加粗标签，展示效果相同
<strong>加粗字体测试</strong>

<b>加粗</b>

（13）空格占位符

  • 在HTML中无论输入多少个空格，只会显示1个。可以使用空格占位符：&nbsp

（14）表格标签

  • table嵌套tr,tr嵌套td/th
  • 在网页中，表格默认没有边框线，使用border属性可以为表格添加边框线。border的数字大小代表边框线的粗细

<body>                                <!--网页体-->

    <table border="1">                 <!--创建表格 border = 1创建1像素的边框线-->

        <tr>                           <!--第一行，表格标题-->

            <th>姓名</th>

            <th>语文</th>

            <th>数学</th>

            <th>总分</th>

        </tr>

        <tr>                           <!--第二行，张三成绩-->

            <td>张三</td>

            <td>99</td>

            <td>100</td>

            <td>199</td>

        </tr>

    </table>

</body>

表格结构标签

  • 以下在浏览器中看不到效果，主要是用来让代码展示清楚

合并单元格

  • 将多个单元格合并成一个单元格，以合并同类信息

  • 合并分为跨行合并和跨列合并

  • 跨行合并：保留最上单元格，添加属性rowspan。取值是数字，表示为合并单元格的数量

  • 跨列合并：保留最左单元格，添加属性colspan。取值是数字，表示为合并单元格的数量

  • 注意不能跨表格结构标签去合并

（15）表单标签

  • 使用场景：在网页中负责数据采集功能，如注册，登入等数据采集

form标签

  • 属性：

    • action:规定当前提交表单时向何处发送表单数据，URL
    • method:规定用于发送表单数据的方式。GET，POST
    • GET提交方式：在url后面拼接表单数据，url长度有限制；GET是method属性的默认值
    • POST提交方式：在消息体（请求体）中传递，参数大小无限制
    <form action="" method="get">

        <!--Type表示输入类型，name表示表单的名字-->

        用户名: <input type="text" name="username">

        年龄:<input type="text" name="age">

        <!--生成一个显示value值的提交按钮-->

        <input type="submit" value="提交">

    </form>

input标签-输入

  • type属性值不同，则功能不同

占位文本：提示信息
  • 提示信息和文本框密码框都可以使用

单选框radio的属性
  • 增加value属性便于识别选择的值，代表提交给网页的值

<input type = "radio" name="gender" value="1">男

<input type = "radio" name="gender" value="2">女  
  • 如果添加label标签，则点击label所包裹的元素则都可以选中单选框。例如，点击文字“女”可以选中女旁边的单选框。复选框同理使用。
<label><input type = "radio" name="gender" value="1">男</label>

<label><input type = "radio" name="gender" value="2">女</label>
复选框checkbox的属性
  • 默认选中属性：checked
  • value代表提交的值
<label><input type = "checkebox" name = "hobby" value = "java"></label>

<label><input type = "checkebox" name = "hobby" value = "C"></label>

<label><input type = "checkebox" name = "hobby" value = "Python"></label>
下拉菜单
<select name = "degree">

    <option value="">-------------请选则-------------------</option>

    <option value="1">大专</option>

    <option value="2">本科</option>

    <option value="3">硕士</option>

</select>
文本域
  • 作用：多行输入文本的表单控件
  • 该标签使用后，右下角有拖拽功能，一般都会禁用
  • cols属性表示一行可以输入的字体个数，rows表示可以输入多少行
<textarea name="description" cols="30" rows="10">默认提示文字</textarea>
表单常见按钮
<input type="button" value="按钮">

<input type="reset" value="重置">

<input type="submit" value="提交">

JavaWeb开发-HTML基础学习的更多相关文章

  1. JavaWeb开发技术基础概念回顾篇

    JavaWeb开发技术基础概念回顾篇 第一章 动态网页开发技术概述 1.JSP技术:JSP是Java Server Page的缩写,指的是基于Java服务器端动态网页. 2.JSP的运行原理:当用户第 ...

  2. IOS开发UI基础学习-------总结

    什么叫控件? 屏幕上所有UI元素都叫做控件(也有叫做视图.组件) 控件的共同属性 尺寸 位置 背景色 ... 苹果将控件的共同属性都抽取到父类UIView中 所有控件最终都继承自UIView 父子控件 ...

  3. django drf 开发 ~ models基础学习

    零 介绍  对于ORM框架,可以简单的认为自定义类U表示数据库的表:根据类创建的对象表示数据库表一 数据表设计  1 类型统计     CharField->(string)->(1 ma ...

  4. C/S和B/S 《JavaWeb开发王者归来》学习笔记

    RCP 桌面程序(Desktop Program)也叫胖客户端程序(Rich Client Program),需要安装到计算机上才能运行.例如:word,excel,QQ等. TCP 瘦客户端程序(T ...

  5. 最详细的JavaWeb开发基础之java环境搭建(Windows版)

    阅读文本大概需要 3 分钟. 首先欢迎大家来学习JavaWeb,在这里会给你比较详细的教程,从最基本的开始,循序渐进的深入.会让初学者的你少踩很多坑(大实话),如果你已经掌握了JavaWeb开发的基础 ...

  6. 【零基础学习iOS开发】【转载】

    原文地址:http://www.cnblogs.com/mjios/archive/2013/04/24/3039357.html 本文目录 一.什么是iOS 二.主流手机操作系统 三.什么是iOS开 ...

  7. JavaWeb学习总结-01 JavaWeb开发入门

    一 基本概念 1 Web开发的相关知识 Web,表示网页的意思,它用于表示Internet主机上供外界访问的资源. Internet上供外界访问的Web资源分为: 静态web资源(如html 页面): ...

  8. JavaWeb学习总结(一)——JavaWeb开发入门

    http://www.cnblogs.com/xdp-gacl/p/3729033.html 只为成功找方法,不为失败找借口! JavaWeb学习总结(一)--JavaWeb开发入门 一.基本概念 1 ...

  9. [原]零基础学习在Android进行SDL开发系列文章

    [原]零基础学习SDL开发之移植SDL2.0到Android [原]零基础学习SDL开发之在Android使用SDL2.0显示BMP图 [原]零基础学习SDL开发之在Android使用SDL2.0显示 ...

  10. 李洪强iOS开发之【零基础学习iOS开发】【01-前言】02-准备

    在上一讲中,介绍了什么是iOS开发.说简单一点,iOS开发,就是开发运行在iPhone或者iPad上的软件.这么一说完,应该有很多人就会产生一些疑惑,比如学习iOS开发是不是一定要买iPhone?需不 ...

随机推荐

  1. CVE-2020-0796 SMB远程代码执行漏洞复现

    前言: 这个windows的永恒之黑漏洞,不得不复现一下啦! 这个漏洞诸多大佬都已经复现了,现在跟随大佬的脚步,逐个复现一下: 可参考:https://www.adminxe.com/1220.htm ...

  2. c# .NET 高级编程 高并发必备技巧 - 锁

    锁 最为常见的应用就是 高并发的情况下,库存的控制.本次只做简单的单机锁介绍. 直接看代码: 每请求一次库存-1. 假如库存1000,在1000个人请求之后,库存将变为0. public int Re ...

  3. 安装win10虚拟机

    1.前期工作 下载win10镜像:zh-cn_windows_10_consumer_editions_version_21h1_updated_aug_2021_x64_dvd_4de56d76.i ...

  4. 从一些常见的错误聊聊mysql服务端的关键配置

    背景 每一年都进行大促前压测,每一次都需要再次关注到一些基础资源的使用问题,订单中心这边数据库比较多,最近频繁报数据库异常,所以对数据库一些配置问题也进行了研究,本文给出一些常见的数据库配置,说明这些 ...

  5. 【测试】自定义配置 RocksDB 进行 YCSB 测试

    目录 简介 编译 RocksDB 编译 YCSB 修复报错 自定义配置 RocksDB 进行 YCSB 测试 参考资料 本文主要记录在利用 YCSB 使用配置文件测试 RocksDB 的过程中遇到的一 ...

  6. svg动画 - 波浪动画

    波浪 <path d="M 96.1271 806.2501 C 96.1271 806.2501 241.441 755.7685 384.5859 755.7685 C 529.8 ...

  7. 我的新书《Flink大数据分析实战》出版啦

  8. 兴达易控Modbus转Profinet网关连接三菱A800变频器配置案例

    兴达易控Modbus转Profinet网关连接1200Profinet转modbus接三菱A800变频器 下面介绍A800 变频器通过兴达易控modbus转profinet网关,使1200plc无需编 ...

  9. 如何快速找到win10系统中的开机启动文件所在路径

    在网站系统开发过程中,我们会遇到一些服务器下线导致的网站无法打开的情况,就需要重启服务器,如果每次手动去操作,实在是很繁琐,所以咱们可以利用开机自启的方式.而要这样设置的话,就需要找到开机自启的目录, ...

  10. 使用CEF（六）— 解读CEF的cmake工程配置

    距离笔者的<使用CEF>系列的第一篇文章居然已经过去两年了,在这么长一段时间里,笔者也写了很多其它的文章,再回看<使用CEF(一)- 起步>编写的内容,文笔稚嫩,内容单薄是显而 ...