HTML

Web概念引入

JavaWeb：使用Java语言开发基于互联网的项目

软件架构：

1. C / S
   client / Server：客户端 / 服务器端 ，如：qq
   优点：用户体验好
   缺点：开发，安装，部署，维护麻烦

2. B / S
   Browser / Server：浏览器 / 服务器端
   只需要一个浏览器，用户通过不同的网址（URL），客户访问不同的服务器端程序
   优点：开发，安装，部署，维护简单
   缺点：如果应用过大，用户体验可能会受到 影响；对硬件要求过高

3. B / S 架构详解：
   静态资源：使用静态网页开发技术发布的资源
   特点：所有用户访问，得到的结果是一样的 ，如：文本，图片，音频，视频，Html,CSS,JavaScript
   如果用户请求的是静态资源，那么服务器会直接将静态资源发送给浏览器，浏览器中内置了静态资源的解析引擎，可以直接显示静态资源
   动态资源：使用动态网页及时发布的资源
   特点：所有用户访问，得到的结果可能不一样，如：jsp，servlet，php，asp…
   如果用户请求的是动态资源，服务器会执行动态资源，转换为静态资源，再发送给浏览器

• 我们要学习动态资源，必须先学习静态资源

HTML：用于搭建网页基础，展示页面的内容
CSS：用于美化页面，布局页面
JavaScript：控制页面的元素，展示动态效果

HTML概念

HTML(Hyper Text Markup Language)：超文本标记语言
超文本：用超链接的方法，将各种不同空间的文本信息组织在一起的网状文本
标记语言：由标签构成的语言 <标签名称> 如：html, xml

标记语言不是编程语言

表单及表单元素

表单的概念：用于采集用户输入的数据，用于和服务器进行交互
form：用于定义表单的，可以定义一个范围，范围代表采集用户数据的范围
一些属性：

• action：指定提交数据的URL
• method：指定提交方式，一共七种，两种比较常用
  1.get：
  请求参数会在地址栏中显示，会封装到请求行中
  请求参数大小是有限制的，不太安全
  2.post：
  请求参数不会在地址栏中显示，会封装在请求体中
  请求参数的大小无限制，较为安全

表单项中的数据要想被提交，必须指定其name属性

input，表单项标签，可以通过type属性值，改变元素展示的演示

<form>
    用户名:<input name = "username"><br/>
    密码:<input name = "password"><br/>
    <input type="submit" value="登录">
</form>

文本框

<input type="text" >

密码框

<input type="password" >

下拉选择

<select name = "province">
        <option value = "" >--请选择--</option>
        <option value = "北京" >北京</option>
        <option value = "上海" >上海</option>
        <option value = "西安" >西安</option>
    </select>

单选按钮

性别:<input type="radio" name = "gender" value = "male">男
    <input type="radio" name = "gender" value = "female">女

1.要想让多个单选框实现单选的效果，多个单选框的name属性值必须一致
2.一般会给每一个单选框提供value属性，指定其被其选中后提交的值
3.checked属性，可以指定默认值

复选框

爱好:<input type="checkbox" name = "hobby" value = "java">Java
    <input type="checkbox" name = "hobby" value = "学习">学习
    <input type="checkbox" name = "hobby" value = "睡觉">睡觉

文本域

<textarea cols="20" rows="5" name = "text"></textarea>

• cols：指定列数，每一行有多少个字符
• rows：默认多少行

隐藏表单

hidden：隐藏域，用于提交一些信息

<input type="hidden" name = "id" value = "aaa">

文件选择框

file：文本选择框，可以用来选择图片等

<input type="file" name = "file">

按钮

• submit：提交按钮，可以提交表单
• button：普通按钮
• image：图片提交按钮 src ：指定图片路径

<input type = "submit" value = "登录">

label

指定输入项的文字描述信息

<label for="username">用户名:</label>
<input type="text" name="username" id = "username" placeholder="请输入用户名"><br/>

注意：Label的for属性一般会和input 的 id 属性值对应。如果对应了，则点击label区域，会让input输入框获取焦点。

表格

<table>
    <caption>学生信息表</caption>
    <tr>
        <td>编号</td>
        <td>姓名</td>
        <td>性别</td>
        <td>操作</td>
    </tr>

    <tr>
        <td>1001</td>
        <td>张三</td>
        <td>男</td>
        <td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td>
    </tr>

    <tr>
        <td>1002</td>
        <td>李四</td>
        <td>男</td>
        <td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td>
    </tr>
</table>

图片

<img src="···.jpg" width="480" height="270">

超链接

<a href="https://baidu.com">点击</a>

列表

无序列表：
<ul>
    <li>内容</li>
</ul>

有序列表：
<ol>
     <li>内容</li>
</ol>

div & span

<div>你好</div>
<span>你好</span>

div换行，span不换行

以上为个人学习笔记，参考自黑马教程。