zoukankan      html  css  js  c++  java
  • html基础

    1.DOCTYPE解析

    三种解析模式:
    IE6,7准标准模式(兼容性问题,html5和CSS3 不支持)
    标准模式
    混杂模式(非标准)

    2.HTML 链接

    HTML 链接由 <a> 标签定义。链接的地址在 href 属性中指定:

    <a href="http://www.w3school.com.cn">This is a link</a>

    图片作为链接
    <a href="../example/html/lastpage.html">
    <img border="0" src="../i/eg_buttonnext.gif" />
    </a>

    3.小写标签

    HTML 提示:使用小写标签
    HTML 标签对大小写不敏感:<P> 等同于 <p>。许多网站都使用大写的 HTML 标签。

    W3School 使用的是小写标签,因为万维网联盟(W3C)在 HTML 4 中推荐使用小写,而在未来 (X)HTML 版本中强制使用小写

    4.关闭空元素

    在开始标签中添加斜杠,比如 <br />,是关闭空元素的正确方法,HTML、XHTML 和 XML 都接受这种方式。

    即使 <br> 在所有浏览器中都是有效的,但使用 <br /> 其实是更长远的保障

    双击打开的html都是混杂模式,只有经过webstorm这类打开的才是标准模式

    5.head部分和body部分

    head可以写:引入文件,作者关键字

    body :所有标签都要写到body里边

    6.HTML基本语法

    <p> </p>
    有开始标签和结束标签,成对出现,有一些只有一个/,/:结束符
    只要软件没有报错都是可以的,有些没有/,空标签
    样式写在开始标签里边
    简写方法,div 加tab键联想

    注释:Ctrl + /
    <!-- -->
    所有不要的代码,直接注释代码,可能会把配对的标签删除

    有下划线的都是在报错

    所有标签和元素都必须小写,所有属性用""扩起来,里边嵌套用''
    所有标签分为块级元素和行级元素。

    块级元素和行内元素:
    ☆块级元素:可以独占一行,具有一定宽高,和内容无关 div,p,h1-6,dieldset
    ☆行级元素:不能设置高宽,宽高与内容相关 input,span,strong,a,img

    空格:&nbsp
    <em>斜体</em>
    <b>加粗</b>
    <strong>加粗</strong>
    在样式里边设置:
    font-weight: bold;
    换行:<br/><br>
    分割线:<hr />
    必须用符号写特殊字符,不然样式可能不对

    title:
    mata:描述

    7.语义化

    比如标题,段落,head,foot,等这些就是语义化,见名知意

    在没有css的情况下可以呈现出良好的内容结构和代码结构,
    优化搜索引擎的搜索,便于网络爬虫跟多的获取优先资源
    具有可读性,便于开发和维护
    遵循w3c的标准,减少差异性


    8.<div> 可定义文档中的分区或节(division/section)。
    不管什么都可以用div标签

    div样式直接为一排,没有显示出想要的
    <div>
    5
    +6
    -----
    11
    </div>

    <pre>样式按照写的样式显示
    <pre>
    5
    +6
    -----
    11
    </pre>

    ①字体大小,边框,高宽设置
    <span style=" 100px;height: 100px;border: 1px solid red;font-size:100px">我是格一个span</span>
    ②设置字体下划线和删除线
    <p>一打有 <del>二十</del> <ins>十二</ins> 件。</p>
    <p style="color: red ;font-size: 30px" ><ins>会员注册 </ins></p>

    <div style=" 500px;height: 500px;border: 1px solid red">我是一个盒子</div>
    <strong>我是一个srtong</strong>

    ③单独设置某些字体的样式,用span
    <p><span style="color: orangered">*</span> <b>基本个人信息</b> 
    (<span style="color: orangered">*</span>为必填项)</p>


    9.锚点:(回到顶部/底部)
    ①创建锚点 <a herf = "" name = >
    ②指向锚点 <a herf = "#+名字">
    缺陷:会刷新页面

    10.无序列表
    <ul>
    <li>

    11.有序列表
    <
    ol>
    <li>

    自定义列表
    <dl>
    <dt>计算机</dt>
    <dd>用来计算的仪器 ... ...</dd>
    <dt>显示器</dt>
    <dd>以视觉方式显示信息的装置 ... ...</dd>
    </dl>

    导航全部是用ul li做的

    12.表格:
    table
    tr 行
    td列
    th列标题
    caption 表格标题

    rowspan = "2" 行合并,合并二行和三行。。
    colspan = "2" 列合并 合并一行的连续几个
    cellspacing="2" 外边框 单元格间距(Cell spacing) 
    cellpadding="2" 内13:54 2016/4/18 单元格边距(Cell padding) 
    align 对其方式,right ,center,lift

    style="border-collapse:collapse" 单边框

    thead
    tbody
    tfoot

    内边距:cellpadding cellspacing

     

    13.form表单

    input type = ""
    type 的值:
    text:
    password:
    reset:
    button:这里不能设置高宽
    <input type="button" value="Hello world!">
    checkbox:
    placholder:描述输入域所期待的值
    date:日历插件
    number:数字插件
    file:选择文件
    image
    color
    hidden
    submit
    reset
    email
    url
    search

    readonly="readonly"
    placeholder="请输入密码" 在输入框里边灰色提示

    <input type="submit">自带提交按钮

    用户名:<input class="username" id="username1" name="username2" type="text">

    class:常用于HTML,CSS
    id:常用于JS
    name:常用于共后台操作

    id唯一的,class可以不唯一

    <form 表单 action="处理地址" method ="get/post" name="">
    name 在后台要用到
    METHOD="post" ="get"
    get:显示,速度快,安全性低
    post:不显示在地址上,速度慢,安全性高(封装,加密)

    14.button 按钮
    可以设置大小
    <button style=" 50px;height: 30px;">按钮</button>

    15.textarea 文本域
    row:行
    col:列

    16.radio单选
    <div>
    <input type="radio" name = "sex">男
    <input type="radio" name = "sex">女
    </div>

    17.checkbox多选,
    <input type="checkbox">多选

    18.下拉列表 select,option,
    <select multiple="multiple">
    <option value="sichuan" selected="selected">川菜</option>
    <option value="guangdong">粤菜</option>
    <option value="beifang">北方菜</option>
    <option value="shanghai">上海菜</option>
    <option value="west" >西餐</option>
    <option value="thailand">泰国菜</option>
    </select>

    multiple="multiple"设置是否只显示一页
    selected="selected"设置选中行

    19.filedset,带标题的框
    <div>
    <fieldset>
    <legend>标题</legend>
    <p>男 <input name="sex" type="radio"></p>
    <p>女 <input name="sex" type="radio"></p>
    </fieldset>

    </div>

     

    20.label和input配合使用
    for里边写相关的表单的id
    扩大了作用域
    <div>
    <input type="radio" id="man" name="sex">
    <label for="man">男</label>
    <input type="radio" id="nv" name="sex">
    <label for="nv">女</label>
    </div>


    21.视频
    <video src="冰河世纪.mp4" controls = "controls" autoplay></video>
    controls 控件
    autoplay 自动播放
    loop:播放完后循环播放

    22.音频
    audio src="冰河世纪.mp4" controls = "controls" autoplay></video>
    controls 控件
    autoplay 自动播放
    loop:播放完后循环播放

    23.盒模型:

    一切网页皆为框:

    margin:外边距,边框以外的,作用:几个盒子间的间距。有正值和负值
    border:边框:
    padding:内边距,没有负值
    content:内容

    谷歌浏览器内部调试,或者看源代码:右键审查元素,检查:F12
    JS部分和CSS文件有可能看不到,打包或者加密看不到
    其他基本都能看到。模仿网页可以用审查元素或者网页另存为

    网页大小:最小一般为16px,火狐除外

    查错:在谷歌浏览器里边,调试看结果

    一般测试的浏览器:谷歌,火狐,IE可以不测试

  • 相关阅读:
    设计模式之工厂模式-抽象工厂(02)
    1036 跟奥巴马一起编程 (15 分)
    1034 有理数四则运算 (20 分)
    1033 旧键盘打字 (20 分)
    1031 查验身份证 (15 分)
    大学排名定向爬虫
    1030 完美数列 (25 分)二分
    1029 旧键盘 (20 分)
    1028 人口普查 (20 分)
    1026 程序运行时间 (15 分)四舍五入
  • 原文地址:https://www.cnblogs.com/VCandy/p/5429243.html
Copyright © 2011-2022 走看看