<!--
Html,CSS,JS 三者的关系 ==> 人,衣服,动作。
以下展示 html 常用基本编码
-->
<!-- Html
在PyCharm中新建html文件默认给出的基本标签如下:
----------------------
<!DOCTYPE html> 表示标准的html解析格式 w3c
<html lang="en"> html文档 en 英文, zh中文
<head> 页面的头,是一对主动闭合标签 <head></head>
<meta charset="UTF-8"> 自闭和标签
<title>Title</title> 页面标题
</head>
<body> 页面主体 <body></body> </body>
</html>
----------------------
-->
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>                         <!--此对标签之间都是定义页头外观及行为的-->
<meta charset="UTF-8">
<!--<meta http-equiv="refresh" content="1">  <!--页标题左侧的图标每隔1秒刷新一次-->
<!--<meta http-equiv="refresh" content="2;http://www.baidu.com"> <!--页面2秒时刷新并跳转到指定链接-->
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <!--兼容到IE浏览器的最高版本-->
<meta name="keywords" content="大师兄">           <!--检索关键字,通常是一个词语,要查看网页源代码才能看到-->
<meta name="description" content="大师兄是个低调的攻城狮">   <!--检索摘要,通常是一个句子,要查看网页源代码才能看到-->
<title>网页标题名称</title>
<link rel="shortcut icon" href="title_icon.jpg">     <!-- 链接导入shortcut icon title图标 -->
<!--<link rel="stylesheet" href="XXX">   <!--链接导入css样式表-->
<!--<script src="xxxxx"></script>          <!--导入js文件-->
<style>   <!--写css样式的地方>  
    </style>                          
</head>
<body>
<p>年轻,就是拿来折腾的。</p>                 <!-- p是段落标签,段间有明显的距离;br是换行标签,行间没有距离-->
<p>让自己具备一技之长的资本,<br>是需要无数个夜晚的静思,</br>无数寂寞时光的堆积而成的。</p> <h1>白羊座</h1>                <!-- h是页内标题标签,标题会区分开正文字体 -->
<h2>白羊座</h2>
<h3>白羊座</h3>
<h4>白羊座</h4>
<h5>白羊座</h5>
<h6>白羊座</h6>
<div>             <!-- 块级标签的宽度占整个页面宽度--><!--div是块级标签的白板,只有一种属性-->
块级标签
</div>
<span>             <!-- 行内标签的宽度随标签内容变化,是包裹标签内容的大小--><!--span是行内标签的白板,没有属性-->
行内标签
</span>
<!--
<form> 标签用于为用户输入创建 HTML 表单。
表单能够包含 input 元素,比如文本字段、复选框、单选框、提交按钮等等。
表单还可以包含 menus、textarea、fieldset、legend 和 label 元素。
表单用于向服务器传输数据。
action 提交到那个接口
method post 还是 get
enctype="multipart/form-data" 指定上传文件类型
-->
<form action="/login" method="post" enctype="multipart/form-data">
<span>是否让页面记住密码</span>
<input type="checkbox" checked="checked">     <!--复选框,默认选中-->
<input type="radio" checked="checked">     <!--单选钮,默认选中-->
<input type="radio" name="r1" checked="checked">
<input type="radio" name="r1" >     <!--互斥的一对单选钮,第一个默认选中,用相同name实现互斥-->
</form>
<div>
<input type="text">            <!--普通文本输入框,输入可见字符-->
<input type="password">            <!--密文文本输入框,输入字符以掩码显示-->
<input type="submit" >            <!--提交按钮,表单数据直接提交到后台-->
<input type="file" >            <!--实现上传文件功能-->
<input type="reset" >            <!--重置按钮,把表单数据重置--> <input type="text" id="i1">
<label for="i1">用户名</label>            <!--label是标签,用for绑定控件id,实现点击控件的标签即如点击控件一样的效果-->
</div>
<textarea>              <!--可滚动显示的多行文本显示区域,也可通过拖拽右下角调整区域的大小-->
标准通用标记语言下的一个应用HTML标准自1999年12月发布的HTML4.01后,
后继的HTML5和其它标准被束之高阁,为了推动Web标准化运动的发展,
一些公司联合起来,成立了一个叫做
Web Hypertext Application Technology Working Group (Web超文本应用技术工作组 -WHATWG) 的组织。
WHATWG 致力于 Web 表单和应用程序,而W3C(World Wide Web Consortium,万维网联盟)
专注于XHTML2.0。在 2006 年,双方决定进行合作,来创建一个新版本的 HTML。
</textarea>
<div>
<select >       <!--下拉选框,显示选中的单项-->
<option>乌鲁木齐</option>
<option>北京</option>
<option>上海</option>
<option>广州</option>
<option>深圳</option>
<option>天津</option>
<option>重庆</option>
<option>郑州</option>
</select>
<select size="2" multiple="multiple">       <!--滚动选框,显示指定个数的多个选项-->
<option>乌鲁木齐</option>
<option>北京</option>
<option>上海</option>
<option>广州</option>
<option>深圳</option>
<option>天津</option>
<option>重庆</option>
<option>郑州</option>
</select>
<select size="4" multiple="multiple">       <!--滚动选框,分组显示指定个数的多个选项-->
<optgroup label="直辖市">
<option>北京</option>
<option>上海</option>
<option>广州</option>
<option>深圳</option>
<option>天津</option>
<option>重庆</option>
</optgroup>
<optgroup label="省会城市">
<option>成都</option>
<option>郑州</option>
<option>乌鲁木齐</option>
</optgroup>
</select>
</div>
<div>
<a href="http://www.baidu.com" target="_blank">跳转到百度主页</a> <!--target="_blank"是在新页面打开跳转的链接-->
<img src="title_icon.jpg" alt="加载失败" title="白羊座">
<!-- img 图片标签
src 图片地址
alt 当图片加载失败的时候 显示文案
title 鼠标悬浮到图片上时 显示的文案
-->
</div>
<div>
<!-- ul 定义无序列表
不指定 type 默认圆点
指定type则按type显示
-->
<ul>
<li>第一天学习ui自动化</li>
<li>第二天学习ui自动化</li>
</ul>
<ul type="square">
<li>HTML</li>
<li>XHTML</li>
<li>CSS</li>
</ul>
<!-- ol 定义有序列表
不指定 type 默认阿拉伯数字升序
指定type则按type a A 1 I i 显示
-->
<ol type="1" reversed="reversed">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</div>
<div>
<!-- table 表格标签
thead 表头
tr 行
th 列
th 的属性 colspan="2" 代表一列占几列
tbody 表体
tr 行
td 列
-->
<table border="1">r
<thead>
<tr>
<th>id</th>
<th>姓名</th>
<th>班级</th>
<th>课程</th>
<th>分数</th>
<th colspan="2">操作</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="3">1</td>
<td rowspan="3">张三</td>
<td>白羊座</td>
<td>语文</td>
<td>100</td>
<td>编辑</td>
<td>保存</td>
</tr>
<tr>
<td>白羊座</td>
<td>数学</td>
<td>100</td>
<td>编辑</td>
<td>保存</td>
</tr>
<tr>
<td>白羊座</td>
<td>英语</td>
<td>100</td>
<td>编辑</td>
<td>保存</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

前端知识学习——html的更多相关文章

  1. 安全测试2_Web前端知识学习

    上次讲到安全的简介,这次就来简单的学习下基本的前端知识(html.js.css(不作讲解),牛逼的请忽略!!! 1.Html简单概述: Html和Html DOM 2.Html字符实体(借用别人的,详 ...

  2. 前端学习:JS面向对象知识学习(图解)

    前端学习:JS面向对象知识学习(图解) 前端学习:JS(面向对象)代码笔记 JS面向对象图解知识全览 创建类和对象 方式1:使用Object()函数 方式2:使用自变量 方式3:使用工厂函数 创建多个 ...

  3. Salesforce LWC学习(十七) 前端知识之 onclick & onblur & onmousedown

    在Salesforce LWC学习(八) Look Up组件实现篇中,我们实现了公用的lookup组件,使用的过程中,会发现当我们输入内容以后,搜索出来的列表便无法被清空. 针对此种情况我们打算优化一 ...

  4. 移动端 Web 开发前端知识整理

    文章来源: http://www.restran.net/2015/05/14/mobile-web-front-end-collections/ 最近整理的移动端 Web 开发前端知识,不定期更新. ...

  5. web前端知识体系总结

    1. 前言 大约在几个月之前,让我看完了<webkit技术内幕>这本书的时候,突然有了一个想法.想把整个web前端开发所需要的知识都之中在一个视图中,形成一个完整的web前端知识体系,目的 ...

  6. web前端开发学习内容

    应该 具备的 知识技能 :懂web标准,熟练手写 xhtml css3 并符合 符合w3c标准                       代码能 兼容主流浏览器.ie6.7.8.9 ff 等.    ...

  7. 3 HTML&JS等前端知识系列之javascript的基础

    preface 作为一名运维开发,必须懂得前端知识,比如javascript,dom等等,下面就聊聊javascript. include 数据格式 条件判断,循环流程等. 函数 面向对象 what ...

  8. Web 前端开发学习之路(入门篇)

    字数1374 阅读4622 评论0 喜欢49 以前学习过一段时间的web前端开发,整理了一些我看过的/我认为比较好的学习资料(网站.书籍).不要问我为啥没有进阶版,我只是一条产品汪而已,求轻喷.== ...

  9. 自己总结的web前端知识体系大全【欢迎补充】

    1. 前言 大约在几个月之前,让我看完了<webkit技术内幕>这本书的时候,突然有了一个想法.想把整个web前端开发所需要的知识都之中在一个视图中,形成一个完整的web前端知识体系,目的 ...

随机推荐

  1. laravel5.5用户认证源码分析

    目录 1. 生成相关文件和配置 2. 分析路由文件 3. 以登陆开始为例,分析auth到底是怎么工作的 3.1 分析登录文件 3.2 分析门面Auth. 1. 生成相关文件和配置 快速生成命令 php ...

  2. windows下Tomcat安装

    环境Windows 64位 jdk1.8 1.Tomcat安装 官网地址:http://tomcat.apache.org/download-90.cgi 下载安装包,安装之后进行解压 2.修改htt ...

  3. Python 字符串格式化输出方式

    字符串格式化有两种方式:百分号方式.format方式. 其中,百分号方式比较老,而format方式是比较先进的,企图替代古老的方式,目前两者共存. 1.百分号方式 格式:%[(name)][flags ...

  4. 2、shader基本语法、变量类型、shader的三种形式、subshader、fallback、Pass LOD、tags

    新建一个shader,名为MyShader1内容如下: 1._MainTex 为变量名 2.“Base (RGB)”表示在unity编辑面板中显示的名字,可以定义为中文 3.2D 表示变量的类型 4. ...

  5. HDU 4714 Tree2cycle 找规律

    假设最少删除的边的个数为cost,显然,最终答案即为cost+cost+1 (因为删除一条边,就会增加一个链,所以删除cost条边后,就会有cost+1条链,将这cost+1条链连接起来的代价为cos ...

  6. HashMap 的深入学习

    Java为数据结构中的映射定义了一个接口java.util.Map,此接口主要有四个常用的实现类,分别是HashMap.Hashtable.LinkedHashMap和TreeMap,类继承关系如下图 ...

  7. 【PHP】- 启用CRUL和GD

    1.修改php.ini文件,确保extension_dir配置为php目录的ext,如图: 2.修改php.ini文件,将以下两项取消注释: 3.将php目录下的 libeay32.dll 和 lib ...

  8. asp.net 存储过程 输出参数 取不到值

    这是MSDN上的明确解释:当您将 Command 对象用于存储过程时,可以将 Command 对象的 CommandType 属性设置为 StoredProcedure.当 CommandType 为 ...

  9. BOZJ 2045:疯狂的馒头(并查集)

    题目大意:有n个馒头排成一排,初始时颜色为0,进行m次染色,第i次将(i*p+q)mod n到(i*q+p)mod n的馒头全部染成颜色i,求最后所有馒头颜色.n<=10^6 m<=10^ ...

  10. CF 787D Legacy(线段树思想构图+最短路)

    D. Legacy time limit per test 2 seconds memory limit per test 256 megabytes input standard input out ...