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可以不测试

  • 相关阅读:
    C# 复制文件夹,移动文件夹
    让Base64适合在URL中使用
    修复FIREBIRD数据库
    Image.FromFile 锁文件的解决办法
    Powerbuilder 12.5 下载地址
    C# 给程序添加许可
    WIN FORM 多线程更新UI(界面控件)
    .Net WinForm 拖动控件
    SQL Server 自动增长清零
    C# 一次生成多个相同的字符
  • 原文地址:https://www.cnblogs.com/VCandy/p/5429243.html
Copyright © 2011-2022 走看看