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. nginx配置gzip压缩

    前言 为提高用户获取响应数据的速度,Nginx服务器可以将响应数据进行gzip压缩,在减小响应数据的大小后再发送给用户端浏览器. 要想启用gzip压缩,需要浏览器支持gzip压缩功能,目前大多数浏览器 ...

  2. Jenkins 相关配置

    https://www.cnblogs.com/zylyehuo/ 参考链接 解决:Jenkins: signature verification failed in update site 'def ...

  3. 拼多多根据ID取商品详情 API 返回值说明

    ​ item_get-根据ID取商品详情 注册开通 pinduoduo.item_get 公共参数 名称 类型 必须 描述 key String 是 调用key(必须以GET方式拼接在URL中) se ...

  4. 作为一个客户经理你一个如何给客户介绍API接口

    随着科技的发展,API(Application Programming Interface,应用程序接口)的应用已经逐渐普及,而API接口作为现代企业实现智能化运营和管理的重要工具之一,也备受关注.作 ...

  5. ShardingSphere实战

    前言 本文主要从sharding最新版本5.1.2版本入手搭建,按主键ID和时间进行分表. 本文主要介绍搭建过程,有兴趣了解shardingsphere的同学可以先自行查阅相关资料. shardsph ...

  6. B2C在线教育商城--前后端分离部署

    博客地址:https://www.cnblogs.com/zylyehuo/ 技术栈:vue + nginx + uwsgi + django + mariadb + redis 基本流程 vue打包 ...

  7. Htttpclien循环自动生成图片，同时发送参数和文件，模拟http的post请求

    package org.jeecg.modules.bussiness.PostTests; import com.sun.tools.internal.xjc.reader.xmlschema.bi ...

  8. ES13 中11个令人惊叹的 JavaScript 新特性

    前言 与许多其他编程语言一样,JavaScript 也在不断发展.每年,该语言都会通过新功能变得更加强大,使开发人员能够编写更具表现力和简洁的代码. 小编今天就为大家介绍ES13中添加的最新功能,并查 ...

  9. 部分网页中仅供浏览的pdf文件下载方法

    现在越来越多的网站提供的PDF资料只能在线浏览,不提供下载功能,实际上仅仅是通过网页PDF浏览插件来访问文件资源,如果能够获取到该文件的访问地址,就可以访问下载. 以Firefox浏览器访问某大学网站 ...

  10. 11g编译bbed

    报错如下: make -f ins_rdbms.mk $ORACLE_HOME/rdbms/lib/bbed Linking BBED utility (bbed) rm -f /u01/app/or ...