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. Typora 主题，设置代码块Mac风格三个小圆点

    目录 打造Typora主题 1 typoa样式修改步骤 1.1 第一步打开偏好设置 1.2 第二步打开主题文件夹 2 标题添加颜色 3 表格优化 4 代码块Mac风格三个圆点 5 主题总代码如下: 打 ...

  2. Leetcode刷题笔记——二分法

    二分法是搜索算法中极其典型的方法,其要求输入序列有序并可随机访问.算法思想为 输入:有序数组nums,目的数值target 要求输出:如果target存在在数组中,则输出其index,否则输出-1 将 ...

  3. 全是中文的txt文件查找特定字符并输出该行到新文件

    tangshi.txt文件为全为汉唐诗 在该文件中查找指定字符 codecs库为打开中文文件的库,详情自行知乎 tangshi.txt大概十几万行,需要该文件练手的同学下方评论 要点:更改文件字符编码 ...

  4. .NET使用quartz+topshelf实现定时执行任务调度服务

    一.项目开发 1.新建控制台应用(.NET Framework) 2.配置新项目,自行修改项目名称.位置和框架(建议使用.NET Framework4.5以上版本) 创建好的项目目录如下: 3.右键引 ...

  5. 小知识：OCI实例的私钥文件权限

    在OCI上创建新的实例时,会提示你保存私钥用于连接,而且该界面不会再次显示,所以一定要保存好这个私钥. 实例创建完成后,当使用保存的私钥进行连接时,却发现由于私钥文件的权限问题无法连接,查看当前私钥文 ...

  6. 解密Prompt系列15. LLM Agent之数据库应用设计：DIN & C3 & SQL-Palm & BIRD

    上一章我们主要讲搜索引擎和LLM的应用设计,这一章我们来唠唠大模型和DB数据库之间的交互方案.有很多数据平台已经接入,可以先去玩玩再来看下面的实现方案,推荐 sql translate:简单,文本到S ...

  7. Azure Data Factory（九）基础知识回顾

    一,引言 在本文中,我们将继续了解什么是 Azure Data Factory,Azure Data Factory 的工作原理,Azure Data Factory 数据工程中的数据管道,并了解继承 ...

  8. EarthChat SignalR原理讲解

    SignalR原理讲解 SignalR是什么? SignalR 是 Microsoft 开发的一个库,用于 ASP.NET 开发人员实现实时 web 功能.这意味着服务端代码可以实时地推送内容到连接的 ...

  9. Java 多线程线程池的工作流程

    1.在创建了线程池后,等待提交过来的任务请求. 2.当调用execute()方法添加一个请求任务时,线程池就会做如下判断: 2.1 如果正在运行的线程数量小于corePoolSize,那么马上创建线程 ...

  10. socket应用的例子

    当使用 C 语言实现 Socket 编程时,可以通过系统提供的网络库来实现网络通信.以下是一个简单的示例,演示了如何创建一个简单的服务器和客户端,实现客户端向服务器发送消息并接收回复的功能. 服务器端 ...