前端学习之--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>
前端学习之--html的更多相关文章
- 每天成长一点---WEB前端学习入门笔记
WEB前端学习入门笔记 从今天开始,本人就要学习WEB前端了. 经过老师的建议,说到他每天都会记录下来新的知识点,每天都是在围绕着这些问题来度过,很有必要每天抽出半个小时来写一个知识总结,及时对一天工 ...
- web前端学习部落22群分享给需要前端练手项目
前端学习还是很有趣的,可以较快的上手然后自己开发一些好玩的项目来练手,网上也可以一抓一大把关于前端开发的小项目,可是还是有新手在学习的时候不知道可以做什么,以及怎么做,因此,就整理了一些前端项目教程, ...
- 【web前端学习部落22群】分享 碰撞的小球开源小案例
对于课程中的疑问,大家可以加 web前端学习部落22群 120342833和其他老师还有众多的小伙伴们进行沟通交流哦,群里还有不少技术大拿.行业大牛 可以一起探讨问题,我们也会安排专业的技术老师为大家 ...
- web前端学习部落22群开源分享 左边菜单导航
有大量web前端开发工具及学习资料,可以搜群[ web前端学习部落22群 ]进行下载,遇到学习问题也可以问群内专家以及课程老师哟 <!DOCTYPE html> <html lang ...
- 【前端】Web前端学习笔记【2】
[2016.02.22至今]的学习笔记. 相关博客: Web前端学习笔记[1] 1. this在 JavaScript 中主要有以下五种使用场景 在全局函数调用中,this 绑定全局对象,浏览器环境全 ...
- 前端学习 第七弹： Javascript实现图片的延迟加载
前端学习 第七弹: Javascript实现图片的延迟加载 为了实现图片进入视野范围才开始加载首先: <img src="" x-src="/acsascas ...
- 前端学习 第六弹： javascript中的函数与闭包
前端学习 第六弹: javascript中的函数与闭包 当function里嵌套function时,内部的function可以访问外部function里的变量 function foo(x) { ...
- 前端学习 第五弹： CSS （一）
前端学习 第五弹: CSS (一) 创建css: <link rel="stylesheet" type="text/css" href="my ...
- 前端学习 第四弹： HTML（一）
前端学习 第四弹: HTML(一) 元素分类:块元素 内联元素 块级元素在浏览器显示时,通常会以新行来开始(和结束). 例子:<h1>, <p>, <ul>, &l ...
- 前端学习 第三弹： JavaScript语言的特性与发展
前端学习 第三弹: JavaScript语言的特性与发展 javascript的缺点 1.没有命名空间,没有多文件的规范,同名函数相互覆盖 导致js的模块化很差 2.标准库很小 3.null和unde ...
随机推荐
- Android（java）学习笔记183：多媒体之图形颜色的变化
1.相信大家都用过美图秀秀中如下的功能,调整颜色: 2. 下面通过案例说明Android中如何调色: 颜色矩阵 ColorMatrix cm = new ColorMatrix(); paint.se ...
- 【整理】treeGrid 树形表格
treeGrid 树形表格 https://fly.layui.com/extend/treeGrid/
- webpack打包 css文件里面图片路径 替换位置
{ test: /\.css$/, use: ExtractTextPlugin.extract({ use: ['css-loader?minimize', 'autoprefixer-loader ...
- 【转】《windows核心编程》读书笔记
这篇笔记是我在读<Windows核心编程>第5版时做的记录和总结(部分章节是第4版的书),没有摘抄原句,包含了很多我个人的思考和对实现的推断,因此不少条款和Windows实际机制可能有出入 ...
- 爬虫学习之csv读取和存储
一.读取 该读取主要使用到csv里面的Reader().DictReader()方法,和引用io里面的StringIO进行对字符串进行封装 在处理网上的csv文件方式主要是有一下几方面: • 手动把C ...
- JavaEE-02 JSP数据交互01
学习要点 request对象 response对象 转发与重定向 session对象 include指令 课程回顾 需求描述:编写JSP页面,计算2000—3000年中存在几个闰年. 实现分析:判断闰 ...
- process data
# version 1.0def connect_mysql(sql, oper_type="select", data_l=None): conn = pymysql.conne ...
- PowerShell（PHPStorm terminal with PowerShell）运行git log中文乱码
解决方案: 1)以管理员身份运行PowerShell 2)新建一个针对PowerShell的Pofile文件 New-Item -Path $Profile -ItemType file -Force ...
- Yii2 advance swiftmailer 不能发送邮件
我用的是Yii2高级模板,在配置好邮箱后,并编写测试,测试结果表明是发送成功的,但我的邮箱就是接受不了邮件. 经过排查发现,是由 common/config/main-local.php 文件的 'u ...
- luogu P4752
给定一个数字 A ,这个 A 由 a1,a2,...,aN 相乘得到. 给定一个数字 B ,这个 B 由 b1,b2,⋯,bM 相乘得到. 如果 A/B 是一个质数,请输出YES,否则输出NO. 输 ...