JavaWeb 核心思想

HTML - 图1

一 介绍

HTML （Hyper Text Markup Language）超文本标签语言，是构建网页的一种编程语言，这种编程语言，没有运算逻辑，依靠标记标签来组织页面内容。

  • 网页 承载内容的一个页面，是网站的组成部分。
  • 网站 是一系列网页的集合。

    二 基本结构

    HTML - 图2

    三.基本语法

3.1 基本语法

  1. <tag>  内容  </tag>    
  3. 标签，这里tag,tag是标签名称， 替换为各种具体标签名。
  4.  ：开始标签    ：结束标签  一般而言标签是成对出现。

3.2 属性语法

  1. <tag attr='value'  attrN='value'   >   
  2. </tag>    
  3. attr 是标签的属性，可以有多个，控制标签的行为

3.3 嵌套语法

  1. <tagA> 
  2.     <tagB>  </tagB>
  3. </tagA>

标签B 作为 标签A的内容

四.标签

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>
  6.             Blog
  7.         </title>
  8.     </head>
  9.     <body>
  11.         <h1><font size=" 2" color="royalblue">热点要闻</font></h1>
  12.         <hr  width="4%" size="2"  color='royalblue' align="left"/>
  13.         <ul>
  15.             <a href="https://haokan.baidu.com/v?vid=9612594416501588730&pd=bjh&fr=bjhauthor&type=video" target="_blank"> 
  16.         中国成功发射通信技术试验卫星七号 卫星顺利进入预定轨道</a>
  17.             <li>从三组关键词看习近平总书记承德之行</li>
  18.             <li><font size="3" color="black" ><strong>习近平</strong></font>河北行走进避暑山庄  承德普宁寺</li>
  19.             <li>流量明星 该醒醒了 起底美国情报部门的黑历史</li>
  20.             <li>互利共赢，中阿挖掘“一带一路”合作新潜能</li>
  21.             <li>中国在全球供应链中最具弹性、最稳定、最可靠</li>
  22.             <li>单日确诊屡破20万，美国编出一份抗疫“反面教材”</li>
  24.         </ul>
  25.         <!-- <p>我是杨钦</p> -->
  26.         <img src="C:\Users\杨嘿嘿\Desktop\查理布朗.webp" align="right" alt="查理布朗" width="400" height="400" title="Chalie" >
  30.     </body>
  31. </html>
  32. <!-- 
  33. 结构标签 ：html head title body  
  34. 标题标签 ：h1~h6 数字越大 字体越小
  35. 段落标签 ：p 表示段落标签
  36. 水平线   ： <hr att= />  单标签  有属性size控制粗细 color 控制颜色
  37. 换行     ： <br/> 单标签   换行
  38. 转义符   ：转义符  &nbsp;   空格  &copy; 表示声明符号  &gt; 大于  &lt; 小于
  39. 字体    ： font 属性有 face ='宋体' ， color  size 大小 
  41. 区块：  <span> 内容 </span>  内联元素  不换行，多个span在一行，将来集合css更好的控制文本的外观。
  42.         <div>  内容 </div>   这种元素占一行， 将来集合css 实现页面的布局。
  44. 列表：有序列表：<ol>
  45.                 <li> 内容</li>
  46.                 <li> 内容</li>    
  47.                 </ol>
  48.      无序列表：<ul>
  49.                 <li>内容</li>
  50.                 <li>内容</li>
  51.                 <li>内容</li>
  52.                 </ul>
  53.     自定义列表：<dl>
  54.                 <dt>内容</dt>
  55.                 <dd>内容</dd>
  56.                 </dl>
  59. 图片： <img src='' width='' hight='' alt='' algin='' title='' />
  60.         src 代表图片的路径  一般都是创建一个文件夹来放置图片  width 宽度 height 高度 alt表示当图片路径不在时显示的提示之类
  61.         algin 对齐方式  title 光标悬浮提示 
  62. 按钮： <button> 按钮名 <button> 按钮通常配合javascript触发事件交互
  64. 超链接： <a href="http://www.baidu.com" target="_blank" >百度</a>
  65.             href 表示体哦啊转的地址  target = _blank 表示新的空白页打开 _self表示当前页面打开
  66.  -->

4.1 表格

  1. <table>
  2.     <tr> 
  3.         <td> </td> 
  4.         ...
  5.     </tr>
  6.     ....... 
  7. </table>

tr : 表示一行

td: 表示一列

(边框)border=”1”
(单元格外边距)cellspacing=”0”
(单元格内填充)cellpadding=”20”
(表格宽度)width=”600px”
(表格高度)height=’400px’

td: (水平对齐)align=”left|center|right” (垂直对齐)valign=”top|middle|bottom”

  • 表格高级操作
    跨行（rowspan） 跨列（colspan）
  1.         <table border="1" width="400px">
  3.             <tr>
  4.                 <td rowspan="2">A</td>  <!-- 第一行有两单元格，其中第一个单元格跨2行-->
  5.                 <td>B</td>
  6.             </tr>
  8.             <tr>
  10.                 <td>B</td>  <!-- 第二行只有一个单元格 -->
  11.             </tr>
  13.             <tr>
  14.                 <td colspan="2">A</td> <!-- 第三行只有一个单元格 横跨两列 -->
  16.             </tr>
  17.         </table>

4.2.表单Form

表单是用于搜集用户数据的标签，比如登录，需要用户提供账号和秘密，这些都是表单标签

  1. <form action='' method='' enctype=''  >
  2.     .... 各种表单元素
  3. </form>

action : 表单数据提交服务器的地址
method: 提交数据的方法 get post 两种
enctype: 声明表单数据类型

整个form就是一个需要填写的表单，而一个表单中有一个或者多个表单元素。

  • input 标签，它根据type不同可以表现出不同的外观。

    • type: text[文本]
    • password[密码]
    • radio[单选]
    • checkbox[复选]
    • submit[提交]
    • reset[重置]
    • file[文件上传]
    • hidden[隐藏域，页面隐藏数据，提交给后台 ]

    • search[ 文本搜索]

      1. <form>
      3. 账号<input name="username" type="text" />
      4. <br />
      5. 密码<input name="password" type="password" />
      7. <br />
      8. 性别：<input name="sex" type="radio" value="man" />男 <input name="sex" type="radio" value="woman" />女
      10. <br />
      11. 爱好： <input name="hobby" type="checkbox" value="Live" /> 直播
      12. <input name="hobby" type="checkbox" value="Game" /> 游戏
      13. <input name="hobby" type="checkbox" value="girl" /> 美女
      14. <br />
      15. 上传：
      16. <input name="file1" type="file" />
      17. <br />
      18. 学历：
      19. <select name="edu" style="width: 120px;">
      20.    <option value="xx">小学</option>
      21.    <option value="cz">初中</option>
      22.    <option value="gz">高中</option>
      23.    <option value="dx">大学</option>
      24. </select>
      25. <br />
      26. 自我介绍：
      27. <textarea name="info" rows="10" cols="60"></textarea>
      28. <br />
      29. <input type="submit" value="注册" />
      30. <input type="reset" value="清空" />
      31. <input name="data" type="hidden" value="其实,我是一个警察" />
      32. </form>

      select 下拉
      /

      1. <select name =''>
      2. <option value='' > ...   </option>
      3. ......
      4. </select>

      注意： name 在 select 上 value 在option上。

  1. <textarea name='' rows='' cols=''></textarea>

1 . 凡是要提交到后台的数据 都必须命名。

2 . 表单一般有两套数据，value属性值是需要提交给后台的， 标签中的数据是给用户看得。
表单属性

  • 基本属性(重要) name type value placeholder=”输入提示”
  • 状态属性 readonly=”readonly”(只读，提交) disabled=”disabled”(禁用，不提交)
  • 单选 复选 状态选择 checked=”checked”
  • 下拉列表 状态选择 selected=”selected”

HTML 5的新特性（了解）

  1. <input type='date' >
  2. <input type='number'>

5.框架