• 前端学习之--html


    html 文件就是充当模板使用,包含head头和body身体,body包含众多的标签,每个标签都使用尖括号包裹,内部由标签名和标签属性构成。
    其中标签分为2类:
    1:块级标签,特点:占用一行,如:<h>,<p>,<div> 等
    2:行内标签,特点:只占用自身大小,如:<span>,<input>,<a> 等
    标签存在的意义:用于定位操作,css操作,js操作
    html特殊符号参考:http://www.cnblogs.com/web-d/archive/2010/04/16/1713298.html
    适用于大多数 HTML 元素的属性
    属性 值 描述
    class classname 规定元素的类名(classname)
    id id 规定元素的唯一 id
    style style_definition 规定元素的行内样式(inline style)
    title text 规定元素的额外信息(可在工具提示中显示)

    <!DOCTYPE html> <!--对应关系,代表一个统一的默认规范-->
    <html lang="en">
    <head> <!-- html 头-->
    <!-- meta:提供有关页面的元信息 -->
    <meta http-equiv='content-type',content='text/html',charset='utf-8'> <!--页面编码-->
    <meta http-equiv="Refresh" Content="30"> <!-- 默认30秒刷新一次-->
    <meta http-equiv="Refresh" Content="5;Url=http;//www.authhome.com.cn"/> <!-- 5秒自动跳转-->
    <meta name="keywords" content="星级2,关键词。。"> <!--用于搜索引擎进行关键字搜索-->
    <meta name="description" content="描述的内容"/> <!--网站描述说明-->
    <meta http-equiv="X-UA-Compatible" content="IE=IE9;IE8;IE7"/> <!--进行ie的兼容 从大到小模式兼容打开-->
    <title>首页</title> <!-- 标题 -->
    <link rel="shortcut icon" href="image/favicon.ico"> <!--页面标题上的图片和位置,字串是固定的-->
    <!-- <style></style> css样式的时候在css文档记录说明-->
    </head>
    <body> <!-- html 体-->
    <!-- 重要标签20个如下说明-->
    <!-- HTML 标题,通过 <h1> - <h6> 等标签进行定义的,<h1> 定义最大的标题。<h6> 定义最小的标题 -->
    <h1>This is a heading</h1>
    <h2>This is a heading</h2>
    <h3>This is a heading</h3>
    <h6>This is a heading</h6>

    <!-- HTML 段落 通过 <p> 标签进行定义的-->
    <p>This is a paragraph.</p>
    <p>This is another<br /> paragraph.</p>

    <!-- HTML 链接 通过 <a> 标签进行定义的-->
    <!-- 功能1:跳转-->
    <a href="http://www.w3school.com.cn">This is a link</a>
    <!-- 功能2:锚 一般用于通过目录跳转到当前页面的指定位置-->
    <a href="#某个标签的ID">测试</a>

    <!-- HTML 图像 通过 <img> 标签进行定义的-->
    <!-- 属性 src:图片的位置-->
    <!-- 属性 title:鼠标指向图片的提示信息-->
    <!-- 属性 alt: 属性用来为图像定义一串预备的可替换的文本-->
    <img src="w3school.jpg" width="104" height="142" title="鼠标提示" alt="图片信息"/>

    <!-- div 可用于组合其他 HTML 元素的容器,没有特定的含义-->

    <!-- span 用作文本的容器,没有特定的含义 -->

    <!-- input系列 -->
    <input type="text" name="名称" value="默认值" />
    <input type="password" name="名称" value="默认值" />
    <input type="submit" value="表单提交按钮" />
    <input type="button" value="登录按钮" />
    <!-- 单选框,多个单选框name值相同才可单选-->
    <input type="radio" name="名称" checked="checked" value="提交的值">
    <!-- 多选框,批量获取数据-->
    <input type="checkbox" name="名称" value="提交的值">
    <!--上传文件,依赖form表单的一个属性:enctype="multipart/form-data"(表示把文件一点一点发给服务器)-->
    <input type="file">
    <input type="reset" value="重置" />
    <textarea name="留言框">默认值</textarea>
    <!-- select 下拉选项 -->
    <select name="名称" size="显示数量" multiple="multiple多选">
    <option value="值1">选项1</option>
    <option value="值2">选项2</option>
    </select>

    <!-- table 标签 colspan:列合并单元格,rowspan:行合并单元格-->
    <table border="1">
    <thead>
    <tr>
    <th></th>
    <th></th>
    </tr>
    </thead>
    <tbody>
    <tr>
    <td></td>
    <td></td>
    </tr>
    </tbody>
    </table>

    <!-- label 用于点击文字,使得关联的标签获取光标-->
    <label>文字</label>

    <!-- form 表单 -->
    <form action="http://www.baidu.com" method="GET/POST">
    <input type="text" name="user" />
    <input type="password" name="password" />
    <!-- 提交到后台字典格式:{'user':'用户名','password':'密码'} -->
    <!--以GET提交数据会将所有数据拼接在URL如:http://...index.html?user=名称&password=密码
    以POST提交数据URL保持不变,数据会包含在内容里一起提交-->
    <input type="button" value="login1"/> # 默认button没反应
    <input type="submit" value="login2"/>
    </form>

    <!-- 表单举例-->
    <form enctype="multipart/form-data">
    <p>请选择</p>
    <!-- 选择按钮,名称必须一致才能进行选择,必须通过value值进行判断所选择的是哪个选择 -->
    男:<input type="radio" name="garden" value="1" checked="checked"/>
    女:<input type="radio" name="garden" value="2"/>
    <br />
    <p>爱好</p>
    篮球:<input type="checkbox" name="favor" value="1" checked="checked">
    足球:<input type="checkbox" name="favor" value="2">
    皮球:<input type="checkbox" name="favor" value="3">
    <p>技能</p>
    唱歌:<input type="checkbox" name="skill" value="1">
    跳舞:<input type="checkbox" name="skill" value="2">
    <p>上传文件</p>
    <input type="file" name="fname">
    <textarea name="meno">默认值 </textarea>

    <select name="city" size="10" multiple="multiple">
    <option value="1">北京</option>
    <option value="2">上海</option>
    <option value="3" selected="selected">成都</option>
    </select>
    <select>
    <!-- 分组-->
    <optgroup label="河北">
    <option>石家庄</option>
    <option>保定</option>
    </optgroup>
    </select>
    <input type="submit" value="提交" />
    <input type="reset" value="重置" />
    </form>
  • 相关阅读:
    【.Net】多语言查看MSDN
    【.Net】 显示星期字符串
    【.Net】 判断时间字符串正确性
    【.Net】 实现窗口拖动
    【.Net】 Winform 单例运行实例
    Kendo 计算字段
    Kendo UI 的 k-template
    UpdatePanel中用后台CS代码调用JS代码,先执行控件事件,后触发JS
    SQL常用
    Node.js 安装
  • 原文地址:https://www.cnblogs.com/zy6103/p/7266337.html
Copyright © 2020-2023  润新知