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

html

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

<meta name="Dscription" content=""/>
<meta name="name" content=""/>
<meta name="keywords" content="网易,百度"/> 关键词 告诉搜索引擎这个网页是干什么的，提高搜索正确性

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

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

标签严格封闭

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

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

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

<img src="地址" alt="代替文字"/> 目前学习自封闭标签只有五个以内

src是img标签的属性

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

超级链接

<a href="1.html" title="悬停文本" target="_blank">结婚照</a>

_blank设置在新的窗口打开

##页面内锚点

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

##css

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

• 这里什么都可以放

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

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

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

• 这里什么都可以放

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

<dl> 定义列表  definition list
<dt>北京<dt>  definition title
<dd>描述北京的内容<dd> definition description
<dd><a href="*"> </a><dd> 可以用多个dd描述北京
<dl>  dd解释最近的一个dt

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

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

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

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

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

<div class="header">
   <div class="logo"> <div>
   <div class="nav"> <div>
 </div>
<div class="coentent">
   <div class="guanggao"></div>
   <div classs="dongxi"></div> 
</div>
<div class="footer"></div>
.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负责样式

表单

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

<div>
   <h3>欢迎注册本站<h3>
   <form action="">所有的表单内容都要写在form中
<p>请输入你的姓名
 <input type="text"/>
</p>
</form>
<div> 

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

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

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

文本框 text

<input type="text" value=“文本框中默认有的值”/>

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

type 表示类型

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

password 密码狂类型

value=“文本框中默认有的值”

这是一个自封闭的标签

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

<meta name="Keywords" content=""/>
<img src="" alt=""/>
<input type="text"/>

密码框 password

<input type="password"/>

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

<p>请选择你性别：
<input tpye="radio" name="xingbie"/>男 注意name属性必须相同且必须写否则全部选择上
<input tpye="radio" name="xingbie"/>女
</P>

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

复选框（多选） chekbox

<p>请选择你的爱好：
<input type="chekbox"/>睡觉
<input type="chekbox"/>学习
</p>

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

选择颜色 color

<p>请选择你喜欢的颜色：
<input type="color"/>
</p>

选择日期 date

<p>选择你的生日：
<input type="date"/>
</P>

下拉列表 select option

<p>请选择你的籍贯
<select>
<option>北京</option>
<option>河北</option>
</select>

多行文本框（文本域）

<textarea cols="30" rows="10"></textarea>

cols 列 rows 行

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

三种按钮

<input type="button" value="按钮上的文字"/>
</p>

<p>提交按钮
<input input="submit" value="按钮上的文字"/>不写value 默认显示提交
</p>

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

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

<p>
重置按钮
<input type="reset"/>
</p>

重置form中的所有表单

html5中会有更多

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

<input tpye="radio" name="xingbie" id="nan"/><label for="nan">男</label>
<input tpye="radio" name="xingbie" id="nv"/><label for ="nv">女</label>

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

label包裹住文本框

其他同理

##默认选择
<input type="radio" name="xingbie" checked="cheked"/>男 默认选择男

注释字符实体

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

注释成<h1>;

&+lt;=<

&+qt;“=>

&+copy;=©

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

##HTML废弃标签介绍
#####HTML一开始连样式也包办
1. font <font siez="7" color="red">haha</font>2004年之前
2. <b> ``<u> <i> ``<del>加粗 下划线 倾斜 删除线 都不用 现在都用作css钩子使用 而不是原意
3.<hr />一条水平线 <em>强调<em> <br />换行不另外起一个段落 进行换行 用P不用

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