JavaWeb开发-HTML基础学习

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="提交">