javaWeb-day05-html

最新推荐文章于 2024-06-28 14:57:58 发布

重庆森林呼呼呼

最新推荐文章于 2024-06-28 14:57:58 发布

阅读量137

点赞数

本文链接：https://blog.csdn.net/qq_34681728/article/details/106008640

版权

HTML简介

HTML(Hyper Text Markup Language): 超文本标记语言
HTML是最基础的开发网页的语言

HTML结构

<!DOCTYPE html>
<html>
   <head>
      <!-- 
      meta标签指定当前网页使用的编码为utf-8,浏览器就会使用utf-8
      来打开当前网页, 如果当前网页保存时用的编码也是utf-8,网页就没有乱码!
       -->
      <meta charset="utf-8"/>
      <title>我的第一个网页</title>
   </head>
   <body>
      <!-- 
      <h1>Hello CGB2003!</h1>
       -->
      aaaaa<br/>
      bbbbb<br/>
      ccccc<br/>
      aaa&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;bbbccc <br/>
      用户名:<input/> <br/>
      密&emsp;码:<input/>
   </body>
</html>

结构详解

(1)<!DOCTYPE HTML> 文档声明, 用来声明HTML文档所遵循的HTML规范和版本
 上面是html5.0的声明, 也是目前最常用的版本
(2)<head></head> 头部分, 用来存放HTML文档的基本属性信息, 比如网页的标题, 文档使用的编码等, 这部分信息会被浏览器优先加载.
(3)<body></body> 体部分, 用来存放网页可视化数据. 即真正的网页数据
(4)<title></title> 声明网页的标题
(5)<meta charset="utf-8"/> 用来通知浏览器使用哪一个编码来打开HTML文档, 这个编码一定要和文件保存时的编码保持一致, 才不会出现中文乱码问题.

HTML语法

1、html标签
标签：也叫做标记、元素等，标签分为开始标签，例如：

<head>、<body>

和结束标签，例如:

</head>、</body>

开始标签和结束标签之间还可以包含其他内容。

<head>
 <titile>声明网页的标题</title>
 <meta charset="utf-8"/>
</head>
``

有些标签开始标签和结束标签之间没有内容要包裹，通常可以写成自闭标签，例如：

<meta/> <br/> <hr/> <input/> <img/>等

2、html属性
在标签上可以声明属性(属性不能独立存在,必须声明在标签上)

<div id="d1" class="c1" style="color:red;"></div>

标签上可以声明多个属性，多个属性之间用空格分隔标签上的属性的值可以使用单引号或者双引号引起来

<meta charset="UTF-8" id="m1"/>
<meta charset='UTF-8' id='m1'/>

3、html注释
格式: <! – 注释内容 -->注释的作用: (1)为代码添加解释说明(2)将一些暂时不需要执行的代码注释浏览器对于html注释中的内容不会解析，也不会显示！
4、html空格和换行
在浏览器中，多个连续的空白字符（空格、制表符tab、换行）会被浏览器显示为一个空格。那么：
如何在网页中做一个换行：可以使用
标签做换行
如何在网页中做一个空格：可以使用或做空格补充:
HTML中是不区分大小写的！
HTML中对语法要求非常不严格！（比如大小写混用，或者标签只有开始没有结束，或者标签的不合理嵌套），但是我们在书写HTML时要按照规范来写。

HTML标签

1.图像标签
通过img标签可以在网页中插入一副图像
2.超链接标签
超链接就是a标签，通过a标签可以在网页中创建指向另外一个文档的超链接点击超链接可以跳转到另外一个网页(图片/下载路径等

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
   <h3>img标签用于在网页中插入一幅图像</h3>
   <!-- 
      不推荐写带盘符的绝对路径,因为将来项目发送后,位置会改变,到时还要修改图片的路径
   <img src="D:/JavaDevelop/WS_CGB2003_WEB/day05-htmlcss/WebContent/imgs/meinv.jpg"/>
    -->
   <!-- 
      ./: 表示当前目录(当前文件所在的目录),由于当前html在WebContent目录下
      因此 ./叫表示WebContent目录, 另外 ./ 可以省略!
      ../: 表示当前目录的上一级目录里(也就是当前目录的父目录)
      ../../: 表示当前目录的上一级目录的上一级目录(也就是当前目录的父目录的父目录)
      alt="error" 当图片不存在无法加载时显示error
    -->

   <img src="./imgs/meinv.jpg" width="50%"/>
   <img src="./imgs/lpx2.jpg" alt="error" width="50%"/>

   <hr/><hr/>
   <!-- 
      a(超链接标签): 用于在网页中创建指向另外一个文档的超链接
      点击超链接后,可以跳转到另外一个网页(跳转到图片/下载文件等)
      target: _self,表示在当前窗口打开超链接
         _blank,表示在新窗口中打开超链接
    -->
   <a href="http://www.baidu.com">百度一下,你就不知道!</a><br/>
   <a href="http://www.tmooc.cn" target="_blank">
      <img alt="tmooc" src="imgs/meinv1.jpg " width="78"/>
   </a>
   <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
   <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</body>
</html>

2.表格标签

table -- 用于在网页中定义一个表格
tr -- 用于定义表格中的行
td -- 用于定义表格中的单元格
th -- 用于定义表头行中的单元格（th中的文本默认居中，并且加粗）

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title>Insert title here</title>
   <!-- 在head标签内部添加一个style标签,在style标签内部可以书写css样式
      style标签内部可以书写CSS样式代码或者CSS注释
    -->
   <style>
      /* css注释 */
      table{
         border:2px solid red;
         /* 让表格的边框和单元格的边框合并 */
         border-collapse:collapse;
         /* 为表格添加背景颜色 */
         background-color:pink;
         /* 为表格设置宽度 */
         width:70%;
         /* 设置表格的左、右外边距 auto, 表示自适应 */
         margin-left:auto;
         margin-right:auto;
      }  
      td,th{
         border:2px solid red;
         /* 内边距：边框和内容之间的距离 */
         padding:5px;
      }
      h1{
         /* 设置元素的内容水平居中 */
         text-align:center;
      }
      
   </style>
</head>
<body>
   <h1>创建一个4*4的表格</h1>
   <table>
      <tr>
         <th>11</th>
         <th>12</th>
         <th>13</th>
         <th>14</th>
      </tr>
      <tr>
         <td>11</td>
         <td>12</td>
         <td>13</td>
         <td>14</td>
      </tr>
      <tr>
         <td>21</td>
         <td>22</td>
         <td>23</td>
         <td>24</td>
      </tr>
      <tr>
         <td>31</td>
         <td>32</td>
         <td>33</td>
         <td>34</td>
      </tr>
      <tr>
         <td>41</td>
         <td>42</td>
         <td>43</td>
         <td>44</td>
      </tr>
   </table>
   
   <hr/>
   <table>
      <tr>
         <th>11</th>
         <th>12</th>
         <th>13</th>
         <th>14</th>
      </tr>
      <tr><!-- 第一行 -->
         <!-- 让11单元格横跨三列 -->
         <td colspan="3">11</td>
         <!-- 
         <td>12</td>
         <td>13</td> -->
         <td>14</td>
      </tr>
      <tr>
         <!-- 让21单元格竖跨两行 -->
         <td rowspan="2">21</td>
         <td>22</td>
         <td>23</td>
         <td>24</td>
      </tr>
      <tr>
         <!-- <td>31</td> -->
         <td>32</td>
         <td>33</td>
         <td>34</td>
      </tr>
      <tr>
         <td>41</td>
         <td>42</td>
         <td>43</td>
         <td>44</td>
      </tr>
   </table>
  
</body>
</html>

2.表单标签
表单的作用: 用于向服务器提交数据
向服务器提交数据的两种方式:
(1)通过表单向服务器提交数据
表单中可以包含表单项标签，在表单项中可以填写数据（比如用户名、密码等），填写完成后通过提交表单，可以将表单中的数据提交给相应的服务器
(2)通过超链接向服务器提交数据

http://www.baidu.com?username=张三&pwd=123&like=篮球
<a href="http://www.baidu.com?username=张三&pwd=123&like=篮球" target="_blank">百度一下,你就不知道!</a>

在地址栏URL地址的后面通过问号(?)可以拼接参数，参数可以有多个，多个参数之间用&分隔，参数还分为参数名（例如：username/pwd/like）以及参数值(例如:张三/123/篮球)，在回车后访问百度服务器的同时，就可以将问号后面拼接的参数一并带给百度服务器
表单标签：

<form action="url地址" method="提交方式"></form>

其中action属性用于指定表单的提交地址，例如，将action指向百度服务器，就意味着将来填写完表单后，提交表单将会把表单中的数据提交给百度服务器。
method=“GET/POST” 属性是用于指定表单的提交方式，常用的就是GET和POST提交

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>注册表单页面</title>
<!-- 在head标签内部添加一个style标签,在style标签内部可以书写css样式
      style标签内部可以书写CSS样式代码或者CSS注释
    -->
<style>
   /* css注释 */
   table {
      border: 2px solid red;
      /* 让表格的边框和单元格的边框合并 */
      border-collapse: collapse;
      /* 为表格添加背景颜色 */
      background-color: lightgrey;
      /* 为表格设置宽度
      width: 70%; */
      /* 设置表格的左、右外边距 auto, 表示自适应 */
      margin-left: auto;
      margin-right: auto;
   } 
   td, th {
      border: 2px solid red;
      /* 内边距：边框和内容之间的距离 */
      padding: 5px;
   }
   h1 {
      /* 设置元素的内容水平居中 */
      text-align: center;
   }
</style>
</head>
<body>
   <h1>欢迎注册</h1>
   <form action="#">
      <table>
         <tr><!-- 用户名 -->
            <td>用户名:</td>
            <td>
               <input type="text" name="username"/>
            </td>
         </tr>
         <tr><!-- 密码 -->
            <td>密码:</td>
            <td>
               <input type="password" name="pwd"/>
            </td>
         </tr>
         <tr><!-- 性别 -->
            <td>性别:</td>
            <td><!-- 单选框(目前可以多选,保证多个单选框的name值相同就可以实现单选) -->
               <input type="radio" checked="checked" name="gender" value="male"/>男
               <input type="radio" name="gender" value="female"/>女
            </td>
         </tr>
         <tr><!-- 爱好 -->
            <td>爱好:</td>
            <td>
               <input type="checkbox" name="like" value="basketball"/>篮球
               <input type="checkbox" checked="checked" name="like" value="football"/>足球
               <input type="checkbox" name="like" value="volleyball"/>排球
            </td>
         </tr>
         <tr><!-- 城市 -->
            <td>城市:</td>
            <td>
               <select name="city">
                  <option value="beijing">北京</option>
                  <option value="shanghai">上海</option>
                  <option selected="selected">广州</option>
                  <option>深圳</option>
               </select>
            </td>
         </tr>
         <tr><!-- 自我描述,textarea标签中即使不写内容,也不要自闭 -->
            <td>自我描述:</td>
            <td>
               <textarea name="description" rows="5" cols="30" 
                  placeholder="请输入描述信息..."></textarea>
            </td>
         </tr>
         <tr><!-- 提交按钮, 作用是用于提交表单中的数据, 到action属性所指定的地址
               colspan:指定单元格横跨的列数
               rowspan:指定单元格竖跨的行数
             -->
            <td colspan="2" style="text-align:center;">
               <input type="submit" value="提交"/>
            </td>
         </tr>
      </table>
   </form>
</body>
</html>

在这里插入图片描述

重庆森林呼呼呼

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javaWeb-day05-html

HTML简介HTML(Hyper Text Markup Language): 超文本标记语言HTML是最基础的开发网页的语言HTML结构<!DOCTYPE html><html> <head>  <meta
复制链接

扫一扫