HTML基础

SSSSSSch

已于 2022-10-03 10:36:44 修改

阅读量217

点赞数

文章标签： html 前端 java

于 2022-10-03 09:49:10 首次发布

本文链接：https://blog.csdn.net/SSSSSSch/article/details/127136719

版权

1、系统结构：

B/S架构：（以后主要走的方向是这个。）
Browser / Server （浏览器/服务器的交互形式。）

Browser支持哪些语言：HTML CSS JavaScript

       写HTML CSS JavaScript代码的这波人职位叫做：WEB前端开发工程师。（Java程序员也需要会一些前端的东西。）
       前端页面上的图片需要UI设计师完成。
       S是服务器端Server，Server端的语言很多：C C++ Java python.....

       B/S架构的系统有什么优点和缺点？
           优点：升级方便，只升级服务器端代码即可。维护成本低。
           缺点：速度慢、体验不好、界面不炫酷

       企业内部的解决方案都是采用B/S架构的系统，因为企业内部办公需要的一些系统
       不需要炫酷，不需要特别好的用户体验，只要能做数据的增删改查即可。并且企业
       内部更注重维护的成本。

       B/S架构的系统有哪些代表？
           京东
           百度
           天猫
           ....

C/S架构
Client / Server （客户端/服务器端的交互形式。）

缺点：升级麻烦，维护成本较高。
优点：速度快，体验好，界面炫酷。（娱乐型的系统多数是C/S架构的。）

       常见的C/S架构的系统：
           QQ
           微信
           支付宝
           ....
2、什么是HTML？怎么开发HTML？怎么运行HTML？

   * HTML: Hyper Text Markup Language （超文本标记语言------由标签组成，除支持普通文本之外，还支持流媒体（超文本）。）
       由大量的标签组成，每一个标签都有开始标签和结束标签。
       <标签>
           <标签>
               <标签属性名="属性值" 属性名="属性值">
               </标签>
           </标签>
       </标签>

超文本: 流媒体、图片、声音、视频....

* HTML开发的时候使用普通的文本编辑器就行，创建的文件扩展名是.html或者.htm
HTML也有专业的开发工具，例如：DreamWeaver、HBuilder.....

* 直接采用浏览器打开HTML文件就是运行。

3、HTML是谁制定的？
   W3C：世界万维网联盟
   W3C制定了HTML的规范，每个浏览器生产厂家都会遵守规范。HTML程序员也会按照这个规范去写代码。
   HTML规范目前最高的版本是：HTML5.0，简称H5。

W3C制定了很多规范：
HTML/XML/http协议/https协议......

为了方便中国web前端程序员的开发，提供大量的帮助文档。为开发提供方便使用以下网址。
w3school/w3cschool 前者先出现，后者后出现的，和W3C没有关系

HTML基本标签

段落标记

<p></p>

标题字

h1~h6

换行

独目标记
<br/>

水平线

<hr/>

预留格式

pre

粗体字

<b></b>

斜体字

<i></i>

插入字

删除字

右上角加字

右下角加字

font标签

实体符号

空格

大于号

小于号

表格

基本表格

单元格合并

行合并：rowspan
列合并：colspan

th标签

thead、tbody、tfoot标签

背景颜色和背景图片

bgcolor
background

图片

（1）<img src="" width="" height="" alt="" title=""/>
（2）只设置图片的宽度，高度等比例缩放，不建议设置高度，设置高度容易失真。

超链接

（1）超链接的作用
向服务器发送请求，链接到某个资源
（2）链接到网络中的某个资源
<a href="http://www.baidu.com"></a>
（3）链接到本地的某个资源
<a href="本地文件的相对路径或绝对路径都可以"></a>
（4）图片做超链接
<a href=""><img/></a>
（5）超链接的target属性
_blank
_self
_parent
_top
（6）用户点击超链接和在浏览器地址栏上直接输入URL是完全相同的效果。

列表

有序列表

列表可以嵌套

无序列表

表单

表单起什么作用

用户填写表单，提交数据给服务器，所以表单是专门用来收集用户数据的。

做第一个表单

（1）action属性等同于超链接的href属性，填写请求的url
（2）input标签属于输入域标签，input标签的type属性是text，表示文本框，是password，表示密码框
（3）input标签的type是submit表示提交按钮，该按钮可以提交表单，所谓表单的提交是发送请求url，并携带数据给服务器。
（4）所有按钮的value属性都是用来设置按钮上显示的文本内容
（5）发送请求并提交数据时，数据格式遵循HTTP协议，所有浏览器都会采用这种格式：url?name=value&name=value&name=value...，其中name是input标签的name属性，value是input标签的value属性
（6）文本框和密码框的value不需要开发人员指定，用户填写的数据就是value。
（7）submit按钮放到form标签外面无法提交表单
（8）普通按钮不具备提交表单的能力。

用户注册表单

表单项包括

（1）用户名
<input type="text" name="username" />，value属性不需要写，用户填写的数据就是value
（2）密码
<input type="password" name="pwd" />，value属性不需要写，用户填写的数据就是value
（3）性别
男<input type="radio" name="gender" value="m"/>，性别是单选按钮，用户只能选，所以该标签需要添加value属性
女<input type="radio" name="gender" value="f" checked/>，checked默认选中
同一组的单选按钮，name必须相同
提交给服务器的数据是：gender=m 或者 gender=f
（4）兴趣
运动<input type="checkbox" name="aihao" value="sport"/>
音乐<input type="checkbox" name="aihao" value="music" />
跳舞<input type="checkbox" name="aihao" value="dance" checked/>，checked表示默认选中
同一组的复选框，name相同
以上三项都被选中的话，提交的数据是：aihao=sport&aihao=music&aihao=dance
（5）学历
学历
<select name="xueli">
   <option value="gz">高中</option>
   <option value="zk">专科</option>
   <option value="bk" selected>本科</option>
</select>
selected默认选中
当选中本科时，提交的数据为：xueli=bk
（6）简介
<textarea cols="列数" rows="行数" name="jianjie"></textarea>，文本域没有value属性，用户填写的内容就是value
（7）注册按钮
<input type="submit" value="注册"/>：该标签放在form标签内部才起作用
（8）重置按钮
<input type="reset" value="重置" />
（9）再次强调表单提交时的数据格式
action?name=value&name=value&name=value&name=value...
这是HTTP协议中规定的，这些有规律的数据提交给服务器之后，以后服务器端的java程序要解析这段数据的。

form表单的method属性

（1）method不写或写上get都属于get请求，method写post才是post请求
（2）get请求在HTTP协议的请求行上提交数据，最终提交的数据会显示在浏览器地址栏上
（3）post请求在HTTP协议的请求体中提交数据，最终提交的数据不会显示到浏览器地址栏上
（4）只有当使用form表单，并且method属性设置为post才是post请求，其他请求均为get，超链接也是get请求。

下拉列表怎么显示多个条目，怎么支持多选

（1）支持多选：multiple="multiple"
（2）显示多个条目：size="3"

file控件

（1）文件上传时使用
（2）<input type="file"/>

hidden控件

隐藏域控件，页面上看不到，但提交表单时会提交数据

readonly与disabled

（1）readonly：只读，不能修改，提交表单时数据会提交
（2）disabled：只读，不能修改，提交表单时数据不会提交

input控件的maxlength

maxlength 属性规定输入字段的最大长度，以字符个数计。

HTML中元素的id属性

（1）HTML文档就是一棵树（DOM树），树上有很多节点，每个节点一般都会有id属性，id属性具有唯一性，在同一个文档中不能重复，id是该节点的唯一标识。javascript语言可以对DOM树上的节点进行增删改，达到动态效果。javascript主要通过节点的id来获取该元素。
（2）<a id=""></a>，超链接有id；<form id=""></form>，form表单有id；<input type="text" id="username"/>，input标签有id。

div和span

（1）div是一种图层，div主要使用在网页布局方面，CSS可以设置div的宽度、高度、位置等样式。div比table的布局更加灵活。
（2）div图层可以嵌套使用
（3）默认情况下div独占一行，span不会独占行。