HTML
简介:
- 超文本标记语言
- 使用标记标签描述网页
DOM树
DOM将HTML文档表达为树结构。
DOM结点:
HTML文档中的所有内容都是节点:
- 整个文档是一个文档节点
- 每个HTML元素是一个元素节点
- HTML元素内的文本是文本节点
- 每个HTML属性是属性节点
- 注释是注释节点
节点父、子和同胞:
节点树中的节点彼此拥有层级关系
父、子和同胞用于描述这些关系。父节点拥有子节点。同级子节点称为同胞
- 节点树中,顶端节点称为根
- 每个节点都有父节点,除了根
- 一个节点可拥有任意数量子节点
- 同胞是拥有相同父节点的节点
表单
表单用于搜集不同类型的用户输入
form元素:
定义HTML表单,表单包含表单元素
表单元素指不同类型的input元素、复选框、单选按钮、提交按钮等
input元素
input元素是最重要的表单元素
input元素有很多形态,根据不同的type属性
- text:定义常规文本输入
- radio:定义单选按钮输入
- submit:定义提交按钮
<input type="text"定义文本输入的单行输入
<form>
first name:<br>
<input type="text" name="firstname"><br>
last name:<br>
<input type="text" name="lastname"><br>
</form>
单选按钮输入
<input type="radio"定义单选按钮
<form>
<input type="radio" name="sex" value="male" checked>Male<br>
<input type="radio" name="sex" value="Female">Female
</form>
提交按钮
<input type="submit"定义向表单处理程序提交表单的按钮
表单处理程序通常是包含用来处理输入数据的脚本的服务器页面
表单处理程序在表单的action属性中指定
<form action="">
first name:<br>
<input type="text" name="firstname" value="jj">
<br>
last name:<br>
<input type="text" name="lastname" value="hh"><br>
<input type="submit" value="submit">
</form>
常用属性:
定义提交表单时执行的操作
若省略action属性,则action默认为当前页面
name属性能时每个字段正确提交
targer属性规定提交表单后在何处现实响应:
- _blank:响应显示在新窗口
- _self:响应显示在当前窗口
- _parent:显示在父框架中
- _top:显示在窗口的整个body中
默认值为_self,即在新窗口打开
指定提交表单数据时要用的HTTP方法
表单数据可作为URL变量(method=“get”)或作为HTTP post事务(使用post)
默认为get
提示:若表单数据包含敏感信息或个人信息,一定用post
常见元素:
<select name="animal">
<option value="dog">dog</option>
<option value="dog">cat</option>
<option value="dog">fish</option>
</select>
定义多行输入字段
<textarea name="message" rows="10" cols="30">
hhhhh hhhhh hhhh hhhh hhh
</textarea>
定义可点击的按钮
<button type="button" onclick="alert('hhh')">Click gere</button>
输入类型
<input type="password"定义密码字段
<form>
User name<br>
<input type="text" name="username"><br>
User password<br>
<input type="pssword" name="psw">
</form>
<input type="checkbox"定义复选框
允许选择多个选项
<form>
<input type="checkbox" name="animal" value="dog">dog<br>
<input type="checkbox" name="animal" value="cat"cat<br>
</form>
<input type="data"用于包含日期的输入字段
<form>
<input type="data" name="day">
</form>
CSS
简介:
- 层叠样式表
- 描述如何显示HTML元素
布局:
width和max-width
由于块级元素始终占用可用的全部宽度,设置块级元素的width可将其控制
margin:auto可将块级元素居中
注意:当浏览器窗口小于元素宽度时,使用max-width可改善浏览器对小窗口的处理
div{
max-width:500px;
margin:auto;
border:3px solid black;
}
position属性
规定应用于元素的方位。
- static:默认值,不受top、bottom等属性的影响,始终根据页面的正常流动定位
- relative:相对于正常位置进行定位,不会对其余内容进行调整来适应元素留下的任何空间。
- fixed:相对于视口定位,始终处于同一位置
- absolute:相对于最近的定位祖先元素进行定位
- sticky根据滚动位置定位
重叠元素
z-index属性指定元素的堆栈顺序
元素可以设置正或负的堆栈顺序
伪类
定义元素的特殊状态
- link:未访问的链接
- visited:已访问的链接
- hover:鼠标悬停链接
- active:已选择的链接
简单的工具提示悬停:
p{
display:none;
background-color:yellow;
padding:20px;
}
div:hover p{
display:block;
}
:lang伪类
为不同的语言定义特殊的规则
<style>
q:lang(en){
quotes:"~" "~";
}
</style>
<body>
<p>some text <q lang="en">a quote</q>some text</p>
</body>
外边距合并:
当两个垂直外边距相遇时,它们将形成一个外边距。
合并后的外边距高度等于两个发生合并的外边距的高度中的较大者
- 当一个元素出现在另一个元素上面时,第一个元素的下外边距与第二个元素的上外边距会发生合并
-当一个元素包含在另一个元素中时(假设没有内边距或边框),它们的上下边距也会发生合并
心得总结
- 学习了基础的HTML相关知识
- 学习了基础CSS相关知识
- 稍微了解了DOM树
下周任务
1.写基础的网页巩固所学知识
2.学习js,python