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. 为何每个开发者都在谈论Go？

    本文深入探讨了Go语言的多个关键方面,从其简洁的语法.强大的并发支持到出色的性能优势,进一步解析了Go在云原生领域的显著应用和广泛的跨平台支持.文章结构严谨,逐一分析了Go语言在现代软件开发中所占据的 ...

  2. jdk17下netty导致堆内存疯涨原因排查

    背景: 介绍 天网风控灵玑系统是基于内存计算实现的高吞吐低延迟在线计算服务,提供滑动或滚动窗口内的count.distinctCout.max.min.avg.sum.std及区间分布类的在线统计计算 ...

  3. YShow性能测试平台搭建

    ShowSlow安装 ShowSlow是一个YSlow性能数据收集平台,用于将收集的性能数据 ShowSlow是用php实现的,所以我们需要搭建一台服务器来接收YSlow数据 我搭建的环境是:ubun ...

  4. 快速搭建SpringBoot3.x项目

    写在前面 上一小节中我们从0到1 使用Vite搭建了一个Vue3项目,并集成了Element Plus 实现了一个简单的增删改查页面. 这一篇中我们将使用IDEA快速搭建一个SpringBoot3.x ...

  5. Note -「Maths」Euler 筛筛积性函数

    Part. 1 Preface 这个东西是我在做 JZPTAB 的时候 LYC 给我讲的. 然后发现这是个通法,就写一写. 本文除了例题所有代码均未经过编译,仅作为参考. Part. 2 Untitl ...

  6. Python基础合集

    入门介绍 01.python由来与发展介绍 02.WEB项目开发流程 第一篇 markdown编辑器 01.markdown基本语法 02.Typora简介与安装 03.Windows上gitee+T ...

  7. oracle命令7 -rman命令

    $ rman targer /RMAN> show all; #查看rman中所有的配置RMAN configuration parameters for database with db_un ...

  8. 数据结构与算法 | 数组(Array)

    数组(Array) 数组(Array)应该是最基础的数据结构之一,它由相同类型的元素组成的集合,并按照一定的顺序存储在内存中.每个元素都有一个唯一的索引,可以用于访问该元素. // java 数组示例 ...

  9. AI图形算法之一：液位计识别

    AI人工智能的主要应用之一就是图形化处理和识别,之前写了两篇,分别是: AI图形算法的应用之一:通过图片模板对比发现油田漏油 AI图形算法的应用之一:仪表识别 经过几个晚上的辛苦,液位计识别也测试成功 ...

  10. 【学习】fhq-treap

    fhq-treap 是一种好写.复杂度低,且功能的优秀数据结构,涵盖了 treap 几乎所有的功能,其巧妙之处,就在于运用分离和合并两种操作代替了旋转操作. 1. BST 的定义 (摘自 OI Wik ...