HTML笔记

内容概述

1 2	1. Web概念概述 2. HTML

Web概念概述

Java Web

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

软件架构

C/S: Client/Server 客户端/服务器端
- 在用户本地有一个客户端程序，在远程有一个服务器端程序
- 优点：用户体验好
- 缺点：开发、安装、部署、维护麻烦
B/S: Browser/Server 浏览器/服务器
- 只需要一个浏览器，用户通过不同的网址（URL），客户访问不同的服务器端程序
- 优点：开发、安装、部署、维护简单
- 缺点：如果应用过大，用户体验会受到影响。对硬件要求过高：服务器，带宽

B/S 架构详解

资源分类：
1. 静态资源：使用静态网页开发技术发布的资源
  - 特点：
    - 所有用户访问，看到的效果是一样的
    - 如：文本，图片，音频，视频，HTML，CSS，JavaScript
    - 如果用户请求的是静态资源，那么服务器会直接将静态资源发送给浏览器。浏览器中内置了静态资源的解析引擎，可以来展示这些静态资源
  - HTML：用于搭建基础网页，展示页面的内容
  - CSS：美化页面，布局页面
  - JavaScript：控制页面的元素，是页面有一些动态的效果
2. 动态资源：使用动态网页及时发布的资源
  - 特点：
    - 每个访问的用户得到的结果可能不同
    - 如：jsp/servlet, php, asp
    - 如果用户请求的是动态资源，那么服务器会执行动态资源，转换为静态资源，再发送给浏览器
我们要学习动态资源，必须先学习静态资源

HTML

概念

是最基础的网页开发语言。
Hyper Text Markup Language 超文本标记语言
超文本：超文本是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本
标记语言：由标签构成的语言 <标签名称> 如HTML，XML
标记语言不是编程语言

入门语法

HTML后缀名 .html 或者 .htm
标签分为：
1. 围堵标签：有开始标签和结束标签
2. 自闭合标签
标签可以嵌套：需要正确嵌套，不能交叉
在开始标签中可以定义属性。属性是由键值对构成，值需要用引号（单双都可以）引起来
html 的标签不区分大小写，但是建议使用小写

<html>
    <head>
        <title>这是title</title>
    </head>
    
    <body>
        <front color='red'>Hello,World</front><br/>
        <front color='green'>Hello,World</front>
    </body>
</html>

注释：
<h1> - <h6>：标题标签。字体大小递减
<p>：段落标签
<br/>：换行
<hr color=''/>：一条水平线
- color
- width
- size
- align：对齐方式（center/left/right）
<b>：加粗
<i>：斜体
<font>：字体
- color
- size
- face：字体
属性定义：
- color：
  1. 英文单词
  2. RGB( 0~~255, 0~~255, 0~255 )
  3. #值1值2值3：00~FF 之间，#FFFFFF 白
- width：
  1. 数值：width=’20’ ，单位为 px（像素）
  2. 数值%：在父元素中所占的比例
特殊字符：

显示结果	描述	代码表示
<	小于号	`<`
>	大于号	`>`
	空格	` `
&	和号	`&`
“	引号	`"`

图片标签

<img sec='图片路径' align='' alt='图片替换信息' />
src路径写法：
- 相对路径，以 . 开头的路径
- ./ : 表示当前目录，不写 ./ 的话默认加 ./
- ../ : 表示上一级目录

列表标签：

有序列表：

<ol type='a/1/I'>
    <li>内容1</li>
    <li>内容2</li>
    <li>内容3</li>
</ol>
<ul type='disc/square/circle'>
    <li>内容1</li>
    <li>内容2</li>
    <li>内容3</li>
</ul>

ol : orderlist
li :

无序列表
- ul : unorderLst
- li :

链接标签

<a href='http://www.bilibili,com' target=''></a>
属性：
- href =
  - 指定访问资源的URL（统一资源定位符）。既可以是网络中的，也可以是本地项目中的
  - 'mailto:384878281@qq.com'：给这个邮箱发邮件
- target =
  - _self：默认值，在本页面打开链接
  - _blank：在新标签页打开
使用<a></a>包裹<img>，达到点击图片跳转链接的目的

div 和 span：

div：每一个div占满一整行。块级标签
span：文本信息在一行展示，行内标签，内联标签

语义化标签

HTML5 中为了提高程序的可读性，提供了一些没有样式的标签，要结合CSS一起使用

header
footer

表格标签

table：定义表格
- 属性：boder是否有边框，width表格宽度，cellpadding内容和边框之间的距离，cellspacing边框粗细，bgcolor背景色，align表格的对齐方式
tr：定义行
- bgcolor：背景色
- align：对齐方式
td：定义单元格
- colspan：合并列
- rowspan：合并行
th：定义表头单元格
caption：表格标题
thead：表示表格的头部分
tbody：表示表格的体部分

tfoot：表示表格的脚部分

<table border='1' width='50%' cellpadding='4' cellspacing='0'>
    <thead>
        <caption>学生信息表</caption>
        <!--第一行-->
        <tr>
            <th rowspan='2'>编号</th>
            <th>姓名</th>
            <th>成绩</th>
        </tr>
    </thead>

    <!--第二行-->
    <tr>

        <td>name01</td>
        <td>70</td>
    </tr>

    <!--第三行-->
    <tr>
        <td>2</td>
        <td colspan='2'>name02</td>

    </tr>

    <tfoot>
        <tr>
            <td>3</td>
            <td>name03</td>
            <td>0</td>
        </tr>
    </tfoot>
</table>

表单标签

表单：用于采集用户输入的数据，用于和服务器进行交互
form：用于定义表单的。可以定义一个范围，范围代表次啊及用户数据的范围
属性：
- action：指定提交数据的URL
- method：指定提交方式，一共7种，两种比较常用：
  - get：
    1. 请求参数会在地址栏中显示。会封装到请求行中
    2. URL长度是有限制的
    3. 不太安全
  - post
    1. 请求参数不会在地址栏中显示。会封装在请求体中
    2. URL长度是有没有限制的
    3. 较为安全
表单项中的数据要想被提交，必须指定其name属性

在提交时，name定义的是键值对的键，value定义的是键值对的值

<form action='#' method='get'>
    
    <lable for='username'>用户名:</lable><input type='text' name='username' placeholder='请输入用户名' id='username'><br>
    密码:<input type='password' name='password'><br>
    性别:<input type='radio' name='gender' value='male'> 男 
    	<input type='radio' name='gender' value='female'> 女 <br>
    爱好:<input type='checkbox' name='hobby' value='sing' checked='checked'> 唱
    	<input type='checkbox' name='hobby' value='dance'> 跳
    	<input type='checkbox' name='hobby' value='rap'> Rap <br>
    
    文件:<input type='file' name='file'><br>
    隐藏域:<input type='hidden' name='id' value='***'><br>
    拾色器:<input type='color' name='color'><br>
    生日:<input type='date' name='birthday'><br>
    生日:<input type='datetime-local' name='birthday'><br>
    邮箱:<input type='mail' name='email'>
    年龄:<input type='number' name='age'>
    <br>
    
    <input type='submit' value='登陆'>
    <input type='button' value='按钮'>
    <input type='image' src=''>
</form>

表单项标签
- input：可以通过type属性，改变元素展示的样式
  - type：
    - text：文本输入框，默认值
      - placeholder：提示信息。当输入框内容发生变化，会清空
    - password：密码输入框。不显示输入的内容
    - radio：单选框
      1. 要想让多个单选框实现单选的效果，则多个单选框的name属性必须一样
      2. 一般会给每一个单选框提供value属性，指定其被选中后提交的值
      3. checked属性可以让此选项默认被选中
    - checkbox：复选框
    - file：文件选择框
    - hidden：隐藏域，用于提交一些信息
    - color：取色器
    - date：
    - 按钮：
      - submit：提交按钮，用于提交一些信息
      - button：普通按钮
      - image：图片提交按钮，通过src属性指定图片的路径

label：指定输入项的文字描述信息
- label的for属性一般会和input的id属性值对应。如果对应了，点击label，会让对应的input输入框获得焦点
select：下拉列表
textarea：文本域

Retur0's Bolg

HTML笔记

内容概述

Web概念概述

Java Web

软件架构

B/S 架构详解

HTML

概念

入门语法

标签

文件标签：构成html最基本的标签

文本标签：和文本有关的标签

图片标签

列表标签：

链接标签

div 和 span：

语义化标签

表格标签

表单标签