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

html

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

<meta name="Dscription" 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

<ul> 无序列表(unordered list) 第一个组标签 要么不写要么写一组 li不能单独存在只能在ul里,ul里下一级也只能是li
<li>这里什么都可以放<li>
<ul> 浏览器会默认给无序列表小圆点的“先导符号”
但是ul的作用并不是给文字加小圆点的,而是增加无序列表的语义。
<ol> 有序列表(ordered list)使用的不多 如果表达顺序 一般手动写上序号
<li>这里什么都可以放<li>
<ol> 浏览器会给有序列表加上序号(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负责样式

表单<form></form>

表单是收集用户信息,让用户填写选择的。
<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 type="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="checked"/>男 默认选择男

注释字符实体

”ctrl“+/ 本行成为注释 注释<h1> 注释成<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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,684评论 1 92
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 28,024评论 1 45
  • 1、HTML介绍 1 2、Html和CSS的关系 HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户...
    夏沫xx阅读 5,407评论 0 8
  • 转载请声明 原文链接地址 关注公众号获取更多资讯 第一部分 HTML 第一章 职业规划和前景 职业方向规划定位...
    前端进阶之旅阅读 16,693评论 32 459
  • 【日精进打卡第20天】 【知~学习】 《六项精进》1遍 共2遍 累计83遍 《大学》1遍 共2遍 累计81遍 【经...
    黄于峰阅读 1,267评论 0 0