HTMLdemo笔记02

HTMLdemo笔记02

一.路径

路径分为绝对路径和相对路径和在线路径：
1.绝对路径：
C:\Users\qf\Desktop\H5-2113\day03-表单&css基础\03-代码\images\yuyan.jpg
2.相对路径及引入方式：

 <!-- 同级找同级 -->
    <img src="yuyan.jpg" alt="">
    <!-- 上级找下级 -->
    <img src="images/yuyan.jpg" alt="">
    <!-- 下级找上级 -->
    <img src="../yuyan.jpg" alt="">

3.在线路径：
https://profile.csdnimg.cn/2/D/6/1_l2974688765

总结

使用超链接和图片标签都用的是在线路径

绝对路径:包含电脑盘符的路径
    - 在工作中不推荐使用绝对路径
    
相对路径
    - 同级找同级元素: 目标文件的文件名称(后缀名)
    - 上级找下级元素: 目标文件的文件夹的名称/目标文件的名称(后缀名)
    - 下级找上级元素: ../目标文件的名称(后缀名)
        - 跳出当前文件夹 ../

补充：当a标签中href的值为一个压缩包格式时则会实现下载该压缩包功能
标签：< sup>< /sup> 上标
< sub>< /sub>。下标
标签之间可以相互嵌套 注意：重点:
-p和h的嵌套
- p不能嵌套h标签
- h能嵌套p标签

表格

标签名:< table></ table>
子标签：
< th>< /th> 表头
< tr>< /tr>行
< td >< /td> 单元格（列）

属性
boder 边框（默认0 无边框）
cellspacing 单元格与单元格之间的间距
cellpadding 单元格内间距
aling 水平对其方式 值有：left center right
垂直方向 valign(vertical:垂直的) top、bottom、middle
注意table没效果
colspan 列合并
rowspan 行合并

表单

表单的应用:收集用户信息 => 存在后台
表单框/表单域 form 一个框收集用户信息 没有什么实际含义
- action 行为/动作 提交的路径地址
- name(暂时不用) 表单框的名字
- method(暂时不用) 方法 前端与后台交互的方式 get/post
- 区别就是在地址栏中是否携带参数
2.表单控件 input 默认是文本输入框
- type 类型 text文本类型…(重点)
- value 价值 表示提示信息文本,不是固定作用 会跟随不同的type类型进行改变
了解属性
- name 表单框的名字
- size 尺寸大小 单位是字符数
- maxlength 最大长度

- 表单控件

type属性类别：
默认text 普通文本输入框；
password 密码输入框 且默认不可看；
radio 单选框；
checkbox 复选框 属性cheaked 默认勾选
value 提示文字需手动删除
placeholder 提示文字 获得焦点自动删除
subimt 提交按钮 用于提交获得的信息
button 按钮 没有作用配合js使用

css基础

语法

选择符/选择器{属性1:属性值1;属性2:属性值2} 声明包含属性和属性值
- 选择符/选择器 表示的就是需要选择到进行修饰的标签名称
- {} 不要写错大括号
- 在大括号内属性声明 属性和属性值的
- 属性和属性值之间用冒号相连！
- 如果声明只有一个的情况下属性值后面可以不加分号 如果有多个的时候需要加分号
- 属性不区分前后顺序

css样式

css样式表的创建方式有三种: 行内/内联/内嵌样式表、内部样式表、外部样式表
1.行内样式表的创建方式
- 需要在标签的内部创建
- 书写style属性 属性值就是css的声明
-
2.内部样式表的创建方式
- 建议在head区域内创建
- 书写一个style标签
- 在标签中书写规范的css语法即可
3.外部样式表的创建方式
- 在外部创建一个css文件
- 在css文件中书写规范的css语句即可
- 建议在head区域内使用link标签引入外部的样式表
拓展:外部样式表的第二种引入方式
- 需要创建style标签
- 把link换成 @import url(‘文件路径’)
区别:link引入css 页面会同时加载html和css @import的方式引入css 页面会先加载结构加载css样式
需求:有一个div(文本) 三种样式表同时存在 问:文本最后显示的颜色是什么?
- 行内第一

css样式优先级

样式表的优先级
- 行内样式表的优先级最高
- 内部是第二 外部第三
- 内部和外部一样
- 内部和外部的优先级取决于靠近修饰对象