HTML+CSS 2022.4.22

• web前端

• 数据库

• SpringBoot
  

Web前端-HTML

• HTML作用： 负责搭建页面结构和内容 （盖房子）

• 学习HTML主要学习的就是有哪些标签

文本相关标签

• h1-h6 文本标题, 特点: 独占一行, 自带上下间距, 字体加粗

• p 段落标签, 特点: 独占一行,自带上下间距

• hr 水平分割线

• br 换行

• b 加粗

• i 斜体

• u 下划线

• s 删除线

列表标签

• 无序列表: ul和li 组合 unordered list list item 列表项

• 有序列表: ol和li 组合 ordered list

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

图片标签img

• src: 资源路径

• 相对路径: 访问站内资源

• 图片和页面在同级目录: 直接写图片名

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

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

• 绝对路径: 访问站外资源, 图片盗链, 有找不到图片的风险

• alt: 图片不能正常显示时显示的文本

• title: 图片标题

• width/height: 设置宽高 , 只设置宽度时高度会自动等比例缩放

• 像素

• 上级元素百分比

超链接a

• href: 资源路径, 作用类似图片标签的src

• a标签包裹文本为文本超链接, 包裹图片为图片超链接

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

表格table

• 相关标签: table tr表示行 td表示列 th表头 caption标题

• 相关属性: border边框 colspan跨列 rowspan跨行

表单form

• 作用: 获取用户输入的各种信息 并提交给服务器
• 学习form表单主要学习的就是有哪些控件

<form action="http://www.baidu.com">
<!--maxlength最大字符长度
value设置默认值
readonly只读-->
用户名:<input type="text" name="username" maxlength="5"
value="abc" readonly ><br>
密码:<input type="password" name="password"><br>
<!--value是单选框必须添加的属性 否则提交on
checked默认选中-->
性别:<input type="radio"