html 前端 总结(一)

时间:2021-11-26 16:00:44

前端 html 总结(一)

基础部分:
计算机原理 a: 是由运算器 控制器 内存组成
储存器包括内存、外村
外存 硬盘
内存 由外村调入到内存执行
输入——内存——cpu 运算

cpu运算——内存——输出设备

程序是人为控制电脑,通过指令对电脑进行操作

html部分:
标签
标记
</> 单标记
<></> 双标记

注意:
所有属性必须有值
必须加双引号
字体有分级区别

网页组成:
结构与内容

head 中标明属性

标签的形成:
1.块状元素
特点:
独霸一行
可以设置宽高
默认请款高度和内容相等
宽度和浏览器同宽

2.行级元素
特点:
同行显示

标签:
<html></html>
<head></head>
<title></title> 标题
<body></body> 内容
<hr></hr> 标题大小

补充:
html数据:长度值、绝对值、相对值
<标记名 属性名=“属性值” 属性名2=“属性值”>

4.块状元素标签
<font></font>
<b></b>
<hr></hr>
<ol></ol>
<li></li>
<dl><dl>
<dd></dd>

5.行级元素

<img src= "" alt="" titele> // 链接
<a></a>
<span></span> 将块状元素转换成行级元素
<input type=""> 设置表单的属性
<img src > 链接
<textarea> 多行文本

6.表单的使用以及客户的链接
<form></form> 表单的标记
<input><input> 表单描述
<input type=""> 描述样式表
type属性问题:
<password> 密码文本
<textarea>多行文本
<select>下拉菜单
<submit> 提交按钮
<button> 普通按钮
<reset>重置按钮
<checkbox> 双选按钮
<title> 文本文件
<hidden> 隐藏

注意:
<form action ="" methed="提交方法">
<form action> 提交的每项数据必须加name

如果输入框中没有name value 则数据不予提交
所有表单包括from 标记中提交的方式

提交方式
get 提交
post 提交
get 提交 :
1.不安全
2.提交数据有长度
3.255数据

post 提交:
隐秘字段 可以增加安全性
2.无长度限制

web 开发标准
1.标签闭合
2.属性必有值
3.标签名 属性用小写

跨列/行
1.属于表单结构
2.只能通过表格属性来实现

跨行标签
<colspan>/行
<rowspan>/列

链接类型:
1.页面链接 描点

<a name="can">
<a href="# can">

2.站内链接

< a href="hettp/www.baidu.con">

3.邮件链接

<a href="134@qq.con">

二 css 部分

CSS 的优点
1.美化页面
2.页面布局

<div > </div> 盒子模型

<div>内容 :默认情况 为块元素 可以通过转换来改变

<style type="text/css"></style > //格子值

{
属性值
}

2.三种容器
1.id 选择器
< div id="">

2.class 选择器

<div class>

其他选择器
* 主要是解决兼容问题

注:三种选择器可以相互使用

层级选择器

语法 选择器1 选择器 2

4.属性问题:
文本属性:
font_family 通用字体
line_height 行高
text_decoration 一般

5.背景属性
background_color 背景颜色
background_img url 链接
坐标系:
坐标:
background_repeat -x
坐标

CSS 模型 盒子组成
1.内填充 padding lelt-top-right-bottom -x
边框
border-widtth
2.外填充
margin _buttom 四个方向

结论:
一个盒子的实际宽度 =内容+外填充四个方向+内填充分四个方向

CSS布局:
1.默认文档流
2.浮动文档 float /方向
注意:
1.元素浮动范围在元素之内
2.会对元素之间产生影响
3.浮动元素对父元素与的宽高会产生影响
4.如果父元素一行存在多个元素浮动为父元素宽高
否则会出想布局错乱

2.注意:
某些元素有默认的margin 和padding 用两者置0

定位布局:
posttion :absolute (绝对)
relatire 相对
重新定位位置不释放
绝对定位也是让盒子漂浮原来的文档流
上 下 左 右
注意:
以上这四个设置一定是设置了position 之后才能生效

总结:
float 和 position 异同:
相同:
都浮动、从默认文档脱离

float 是从父元素 的 left right 来参考定位
2.position 定位更加强大 left 0px; 直接定位