html到css基础第一日2018-10-06

html

百度截取的旁边的页面描述 SEO search engine optimization 搜索引擎优化

 关键词 告诉搜索引擎这个网页是干什么的，提高搜索正确性

UTF-8里面存储一个汉字3个字节。而gb2312中存储一个汉字2个字节。
保存大小： UTF-8（更臃肿、加载更慢） > gb2312 （更小巧，加载更快）
总结：
UTF-8 字多，有各种国家的语言，但是保存尺寸大，文件臃肿；
gb2312字少，只用中文和少数外语和符号，但是尺寸小，文件小巧。
我们用meta标签可以声明当前这个html文档的字库，但是一定要和保存的类型一样，否则乱码！（重点）

空白折叠：代码之间无论怎么空格、换行 都只会是一个空格。

标签严格封闭

h标签没有嵌套关系 h1-h6

标签分为：容器级和文本级。 容器级里面什么都可以放 文本级只能放文字图片表单元素。P

能插入图片的类型：jpg jpeg bmp gift 不能插入的：psd ao

目前学习自封闭标签只有五个以内

src是img标签的属性

../../image/1.jpg表示上两级文件夹中的image文件夹里的图片

超级链接

结婚照

_blank设置在新的窗口打开

页面内锚点

点击查看我的作品
我的作品一个A标签有name或id属性那么就是一个锚点
相当于 1.html#锚点名 
跨页面锚点
查看××
××
#表示默认页面最顶端
文本级里可以放文本级
图片链接

css

无序列表(unordered list) 第一个组标签 要么不写要么写一组 li不能单独存在只能在ul里，ul里下一级也只能是li

这里什么都可以放

浏览器会默认给无序列表小圆点的“先导符号”

但是ul的作用并不是给文字加小圆点的，而是增加无序列表的语义。

有序列表（ordered list）使用的不多 如果表达顺序 一般手动写上序号

这里什么都可以放

浏览器会给有序列表加上序号（1.）

 定义列表  definition list
北京
  definition title
描述北京的内容
 definition description
 
 可以用多个dd描述北京
  dd解释最近的一个dt

div and span×××××××××××××××

div(划分）和span（范围） 都是非常重要的盒子

但是span只是一个文本级标签

常用div划分一大块 最重要的布局标签

为了标记div一般为了标识加上一个class

   
 

   
 

 

   

   
 


.logo{
  float: left;
  width:200px;
  height: 60px;
  background-color:red;}
.nav{
  float: right;
  width:600px;
  height: 60px;
  background-color:blue;}
.guanggao{
  float: left;
  width: 250px;
  height 400px;
  background-color: darkblue;}
.dongxi{
  float: ringht;
  width: 650px;
  height 400px;
  background-color: skyarkblue;}

所以我们一般称这种模式为“div+css”

div负责布局，负责结构，负责分块。

css负责样式

表单

表单是收集用户信息，让用户填写选择的。

   
欢迎注册本站

   
所有的表单内容都要写在form中
请输入你的姓名
 


 

form标签里有action属性和method属性，在 ajax会提到

action属性表示表单将会提交到哪里。

method属性表示用什么http方法提交，有get、post两种方法。

文本框 text

input 表示输入，指的是这是一个“出入小部件”

type 表示类型

text 标识文本 指的是这是一个文本的输入小部件

password 密码狂类型

value="文本框中默认有的值"

这是一个自封闭的标签

目前为止学到的自封闭标签有：

密码框 password

单选按钮 radio 非常像收音机 按下一个另外一个取消掉

请选择你性别：
男 注意name属性必须相同且必须写否则全部选择上
女

重点：单选按钮天生不能互斥的，如果想要互斥必须加上一个相同的name属性。

复选框（多选） chekbox

请选择你的爱好：
睡觉
学习

虽然name写不写都行，好习惯加上name标识。

选择颜色 color

请选择你喜欢的颜色：

选择日期 date

选择你的生日：

下拉列表 select option

请选择你的籍贯

北京
河北

多行文本框（文本域）

cols 列 rows 行

这个标签是个标签对 对里不用写文字，如果写了就是默认的文字

三种按钮

提交按钮
不写value 默认显示提交

这个按钮点击是真的能提交。数据的保持读取是后端工程的问题。

这个表单会提交到form标签中的action 属性中的地址中去。

重置按钮

重置form中的所有表单

html5中会有更多

label标签 解决点名字也可以选择选项

男
女

本质上讲男女和input元素没有关系

label包裹住文本框

其他同理

默认选择

男 默认选择男

注释字符实体

”ctrl“+/ 本行成为注释 注释

注释成

;

&+lt;=<

&+qt;“=>

&+copy;=©

&+nbst表示空格“ &nbst;&nbst;&nbst;&nbst;表示四个空格

HTML废弃标签介绍

HTML一开始连样式也包办

1. font haha 2004年之前
2. 加粗 下划线 倾斜 删除线 都不用 现在都用作css钩子使用 而不是原意
3.

---

一条水平线 强调
换行不另外起一个段落 进行换行 用P不用

标准的div+css 页面，用的标签种类很少：
div p h1 span a img ul dl input