Web(HTML)-CSDN博客

本文链接：https://blog.csdn.net/qi15689782508/article/details/110676701

1. web前端： 学习如何搭建页面

HTML ：负责搭建页面结构和页面内容（盖房

子，毛坯房）

CSS ：负责美化页面（装修）

JavaScript ：负责给页面添加动态效果

jQuery ：对原生的 JavaScript 进行了封装提高开发效率

Bootstrap ：前端页面开发框架对 HTML/CSS/JavaScript/jQuery 内容的封装，作用

是为了提高前端页面的开发效率

2. 数据库： 学习如何对数据进行增删改查

3. Servlet ：学习如何获取客户端的请求以及如何针对

于这次请求作出响应

HTML

什么是 HTML

HyperTextMarkupLanguage ：超文本标记语言

xml ：可扩展标记语言

标记语言：

纯文本：只包含文字信息。

超文本：不仅仅是纯文本还包括字体效果和多媒体信息（音频/ 视频 / 图片）

< 头标签属性名 =" 属性值 "> 标签体 </ 尾标签 >

HTML 页面结构

<!DOCTYPE html> 文档声明告诉浏览器使用 html 的哪个

版本解析页面

<html lang = "en" > 根标签

<head> 头标签 : 给浏览器看的内容是写到这里

</head>

<body> 体标签 : 给用户看的内容写在体标签

</body>

</html>

学习 html 实际上就是学习有哪些标签 , 标签有哪些属

性 , 还有标签和标签之间的嵌套关系

文本相关标签

内容标题 h1-h6

字体加粗 , 独占一行 , 自带上下间距

水平分割线 hr

段落标签 p

独占一行 , 自带上下间距

字体效果标签

加粗 b 斜体 i 下划线 u 删除线 s 小字 small

列表标签

无序列表 : ul 和 li

有序列表 : ol:type 图标类型 start 起始值

reversed 降序和li

列表嵌套 : 有序和无序可以任意无限嵌套

图片标签 img

src: 路径

相对路径 : 一般访问站内资源时使用图片也页面同级目录: 直接写图片名

图片在页面的上级目录 : ../ 图片名

图片在页面的下级目录 : 文件夹名 / 图片名

绝对路径 : 一般访问站外资源时使用 , 也称为图片盗链, 有找不到图片的风险

alt: 图片不能正常显示时显示的文本 title: 鼠标悬停时显示的文本

width/height: 设置宽高

两种赋值方式 :

1. 像素

2.上级元素的百分比 , 如果只设置宽度高度会等比例缩放

超链接 a

href: 路径 , 作用和图片标签的 src 类似 , 可以指向页面

资源也可以指向文件资源 , 如果文件浏览器支持浏览则

直接浏览 , 不支持则下载

图片超链接 , 用 a 标签包裹文本是文本超链接 , 包裹图

片 img 就是图片超链接

页面内部跳转 , 在目的地元素里面添加 id=xxx, 在超链接的href=#xxx

表格标签 table

table: border 边框 cellspacing 单元格间距

cellpadding 单元格距内容的距离

tr: 表示行

td: 表示列 colspan 跨列 rowspan 跨行

th: 表头加粗且居中

caption: 表格标题

表单 form

<a href="#top"> 回到顶部 </a> 获取用户输入的各种信息并把信息提交给服务器

学习表单主要学习的就是表单中有哪些控件 : 如 : 文本

框 / 密码框 / 单选 / 多选 / 下拉选等

各种常见控件 :

<form action="http://www.tmooc.cn" >
<!--所有控件必须写name属性
value:设置默认值 placeholder占位文本
readonly:只读
maxlength:最大字符长度-->
用户名:<input type="text" name="username" value="abc"
placeholder="请输入用户名" maxlength="5" readonly="readonly"><br>
密码:<input type="password" name="password"placeholder="请输入密码"> <br>
<!--单选 必须相同的name值 必须添加value
否则提交的是on       checked默认选中-->
性别:<input type="radio" name="gender" value="m" id="r1">
       <label for="r1">男</label>
       <input name="gender" type="radio" checked="checked" id="r2" value="w">
       <label for="r2">女</label> <br>兴趣爱好:<input type="checkbox"
            name="hobby" value="ldm"> 写代码
      <input type="checkbox" name="hobby" value="wz">王者农药
      <input type="checkbox" name="hobby" checked="checked" value="pn">学习<br>
生日: <input type="date" name="birthday"><br>
靓照: <input type="file" name="pic"> <br>
所在地:
<select name="city">
    <option value="bj">北京</option>
    <option value="sh" selected="selected">上海</option>
     <option value="gz">广州</option>
</select><br>
<!--cols代表列数 rows代表行数-->
个人介绍:<textarea name="intro" placeholder="说点儿啥..." cols="30" rows="3"></textarea><br>
      <input type="submit" value="注册">
      <input type="reset" value="重置">
       <!--自定义按钮-->
      <input type="button" value="按钮">
</form>

分区标签

分区标签可以理解为容器 , 对多个有相关性的标签进行统一管理

分区标签包括 :

div: 独占一行 , 块级分区元素

span: 共占一行 , 行内分区元素

如何对页面进行分区 ? 一般情况下一个页面至少分为

3大区: 头体脚 , 每个大区里面根据实际需求划分 n 个小区, 分区标签可以嵌套