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的作用并不是给文字加小圆点的,而是增加无序列表的语义。
      有序列表(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

    猜你喜欢

    转载自blog.csdn.net/qq_42017301/article/details/82952767