第一周web学习_radio max-width选项-CSDN博客

本文链接：https://blog.csdn.net/m0_62204207/article/details/122402406

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属性，则action默认为当前页面

name属性

name属性能时每个字段正确提交

target属性

targer属性规定提交表单后在何处现实响应：

_blank:响应显示在新窗口
_self:响应显示在当前窗口
_parent：显示在父框架中
_top：显示在窗口的整个body中
默认值为_self，即在新窗口打开

method属性

指定提交表单数据时要用的HTTP方法
表单数据可作为URL变量（method=“get”)或作为HTTP post事务（使用post）
默认为get
提示:若表单数据包含敏感信息或个人信息，一定用post

常见元素：

select元素（下拉列表）

<select name="animal">
<option value="dog">dog</option>
<option value="dog">cat</option>
<option value="dog">fish</option>
</select>

textarea元素

定义多行输入字段

<textarea name="message" rows="10" cols="30">
hhhhh  hhhhh hhhh hhhh hhh
</textarea>

button元素

定义可点击的按钮

<button type="button" onclick="alert('hhh')">Click gere</button>

输入类型

输入类型：password

<input type="password"定义密码字段

<form>
User name<br>
<input type="text" name="username"><br>
User password<br>
<input type="pssword" name="psw">
</form>

输入类型：checkbox

<input type="checkbox"定义复选框
允许选择多个选项

<form>
<input type="checkbox" name="animal" value="dog">dog<br>
<input type="checkbox" name="animal" value="cat"cat<br>
</form>

输入类型：data

<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