前端开发 - HTML
1.index
2.head标签相关内容
3.常用标签一
4.常用标签二 table
5.常用标签二 form
6.标签分类
1.index
<!--声明文档的类型 标记该文档为HTML5的文件-->
<!DOCTYPE html> <!-- 页面的根节点 --> <!--
html中的标签都是闭合标签 闭合标签包含 双闭合和单闭合
双闭合：<html></html>
单闭合：<meta />
--> <html>
<head>
<!-- 声明头部的元信息 对我们文档 规定编码格式 -->
<meta charset="utf-8">
<!-- 包含头部的信息 是一个容器 包含 style title meta script link等 -->
</head>
<body>
<!-- 包含浏览器显示的内容标签 div p a img input等等 -->
这是我们的文档结构
</body>
</html>
2.head标签相关内容
<!DOCTYPE html>
<!--en 能翻译网页-->
<html lang="en">
<head>
<!-- 文档的标题、编码方式及URL等信息,这些信息大部分是用于提供索引,辩认或其他方面的应用（移动端） --> <!--文档的标题-->
<title>路飞学城</title> <!-- 常用两个属性
http-equiv:它用来向浏览器传达一些有用的信息，帮助浏览器正确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。
-->
<!--指定文档的内容类型和编码类型 -->
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <!-- 5秒之后 重定向 到路飞学城的网站 -->
<meta http-equiv="refresh" content="5;URL=https://www.luffycity.com" /> <!--告诉IE浏览器以最高级模式渲染当前网页-->
<meta http-equiv="x-ua-compatible" content="IE=edge"> <!-- 为了我们的SEO优化 工作的时候下面这两句 要写-->
<meta name="keywords" content="meta总结,html meta,meta属性,meta跳转">
<meta name="description" content="路飞学城"> <!-- 定义我们的网站图标 -->
<link rel="icon" href="fav.ico"> <!-- 引入外部样式表 -->
<link rel="stylesheet" type="text/css" href="index.css"> <!--定义内部样式表-->
<style type="text/css"> </style> <!--定义内部脚本文件-->
<script type="text/javascript"> </script> <script src="index.js"></script> </head>
<body> </body>
</html> <!--这里是用 html:5 + Tab 自动生成的！！-->
<!--<!doctype html>-->
<!--<html lang="en">-->
<!--<head>-->
<!--<meta charset="UTF-8">-->
<!--<meta name="viewport"-->
<!--content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">-->
<!--<meta http-equiv="X-UA-Compatible" content="ie=edge">-->
<!--<title>Document</title>-->
<!--</head>-->
<!--<body>--> <!--</body>-->
<!--</html>-->
3.常用标签一
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<title>常用的标签一</title>
</head>
<body> 获得体面的 工作和 生 活 获得体面的 工作和生活 <div class="p1">
<p style="height: 2000px;" id="p1">顶部</p>
</div> <div class="heading" style="height: 700px">
<!--body相关标签-->
<!--heading:标题h1-h6 没有h7 不要随意的通过 h 标签改变文字的大小 h 标签换行了 -->
囊括行业<h2>最前沿</h2>的技术，为你提供最全面、最优质、最精彩的精品专题课程
<!--块级元素：独占一行 可以设置宽高-->
<h1>路飞学城</h1><h2>路飞学城</h2>
<h3>路飞学城</h3>
<h4 style="height: 100px;width: 100px">路飞学城</h4>
<h5>路飞学城</h5>
<h6>路飞学城</h6>
<!--<h7>路飞学城</h7>-->
</div> <div class="p1">
<!--段落标签 块级元素 独占一行-->
<p><strong>路飞学城</strong>立志帮助有<b>志向</b>的<i>年轻人</i>通过<u>努力学习</u>获得<s>体面</s>的<sup>工作</sup>和<sub>生活</sub>!路飞学员通过学习Python ,金融分析,人工智能等互联网最前沿技术,开启职业生涯新可能</p>
<p><em>路飞学城</em>立志帮助<br>有志向<br>的年轻人<hr>通过努力学习<hr>获得体面的工作和生活!<hr><span>路飞学员</span>通过学习Python ,金融分析,人工智能等互联网最前沿技术,开启职业生涯新可能</p>
<p id="p2">我们</p>
</div> <div class="anchor" >
<!-- a 标签属于行内标签：在一行内展示 -->
<!--
_self:默认值：在当前网站啊打开资源
_blank:在新的网站打开资源
-->
<a href="https://www.luffycity.com" target="_blank" title="luffy" >路飞学城</a> <a href="a.zip">下载压缩包</a> <!-- a 标签一行显示 设置高度 宽度 不起作用 -->
<a href="mailto:zhaoxu@tedu.cn" style="width: 1000px;height: 300px">联系我们</a>
<!--返回页面顶部内容-->
<a href="#">跳转到顶部</a> <a href="#p1">跳转到顶部的段落标签</a>
<a href="#p2">跳转到我们标签</a> <!--
javascript: 是表示在触发<a>默认动作时，执行一段JavaScript代码
javascript:; 表示什么都不执行，这样点击<a>时就没有任何反应。把a的默认动作取消了
-->
<a href="javascript:alert(1)">内容</a>
<a href="javascript:">内容吧</a> <!--1. `<b></b>`：加粗-->
<!--2. `<i></i>`：斜体-->
<!--3. `<u></u>`：下划线-->
<!--4. `<s></s>`：删除线-->
<!--5. `<sup></sup>`：上标-->
<!--6. `<sub></sub>`：下标-->
<!---->
<!--现在如果想在一段文字中特别强调某几个字，这时候就可以用到`<em>`或`<strong>`标签。--> </div> <div class="lists">
<!-- ul ol li 块级元素-->
<!--无序列表 默认时实心圆disc-->
<ul type="square" style="height: 200px;width: 200px">
<li>我的账户 ></li>
<li>我的订单 ></li>
<li>我的优惠券 ></li>
<li>我的收藏 ></li>
<li>退出 <</li>
</ul>
<!--有序列表 默认是数字-->
<ol style="list-style: none">
<li style="height: 200px;width: 200px">我的账户 ></li>
<li>我的订单 ></li>
<li>我的优惠券 ></li>
<li>我的收藏 ></li>
<li>退出 ></li>
</ol>
<!--
ol标签的属性：
type：列表标识的类型
1：数字
a：小写字母
A：大写字母
i：小写罗马字符
I：大写罗马字符
列表标识的起始编号
默认为1 ul标签的属性： type：列表标识的类型
disc：实心圆(默认值)
circle：空心圆
square：实心矩形
none：不显示标识
-->
</div> <div class="image">
<!--img 行内块标签 1.在一行内显示 2.可设宽高-->
<img src="homesmall1.png" alt="python的图片" style="width: 200px; height: 200px; " />
<img src="homesmall2.png" alt="linux的图片" style="width: 200px; height: 200px" />
</div> <div class="image">
<ul type="none">
<li>
<a href="javascript:"><img src="homesmall1.png" alt="python的图片" /></a>
</li>
<li>
<img src="homesmall2.png" alt="linux的图片" style="cursor: pointer" />
</li>
</ul> </div> <!--
总结：
1.块级元素 特点：独占一行，可设宽高，如果不设宽度，则是浏览器的宽度 (div p h ul ol li )
2.行内元素 特点：在一行内展示，不能设置宽高，它的宽高时根据内容去填充 (a span )
3.行内块元素 特点：在一行内展示，可设宽高 （img）
-->
<!--
小练习：
展示两张图片独占一行，鼠标移上去显示小手的状态！
-->
<!--
其他标签：
<br> 换行
<hr> 分割线
特殊符号：
浏览器显示时 会移除源代码中多余的空格和空行；所有连续的空格或空行都会被算作一个空格；
注意：html代码中所有连续的空行（换行）空格 都会被显示为 一个空格 空格：
特殊符号对照表： http://tool.chinaz.com/Tools/HtmlChar.aspx
eg: < <
> >
--> </body>
</html>
4.常用标签二 table
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<body>
<!--表格 给table 对象添加属性 cellspacing 单元格之间的距离 -->
<table border="1" cellspacing="0">
<!--表格头-->
<thead>
<tr>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
</tr>
</thead> <!--表格主体-->
<tbody>
<!--表格主体的每一行-->
<tr>
<td>语文</td>
<td>数学</td>
<td>英语</td>
<td>生物</td>
<td>化学</td>
</tr>
<tr>
<td>语文</td>
<td>数学</td>
<td>英语</td>
<td>生物</td>
<td>化学</td>
</tr>
<tr>
<td>语文</td>
<td>数学</td>
<td>英语</td>
<td>生物</td>
<td>化学</td>
</tr>
<tr>
<td>语文</td>
<td>数学</td>
<td>英语</td>
<td>生物</td>
<td>化学</td>
</tr>
<tr>
<td>语文</td>
<td>数学</td>
<td>英语</td>
<td>生物</td>
<td>化学</td>
</tr>
</tbody> <!--<tfoot></tfoot>-->
</table> <table border="1" cellspacing="0">
<!--表格头-->
<thead>
<tr>
<th></th>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
</tr>
</thead> <!--表格主体-->
<tbody>
<!--表格主体的每一行-->
<tr>
<td rowspan="3">上午</td>
<td>语文</td>
<td>数学</td>
<td>英语</td>
<td>生物</td>
<td>化学</td>
</tr>
<tr>
<td>语文</td>
<td>数学</td>
<td>英语</td>
<td>生物</td>
<td>化学</td>
</tr>
<tr>
<td>语文</td>
<td>数学</td>
<td>英语</td>
<td>生物</td>
<td>化学</td>
</tr>
<tr>
<td rowspan="2">下午</td>
<td>语文</td>
<td>数学</td>
<td>英语</td>
<td>生物</td>
<td>化学</td>
</tr>
<tr>
<td>语文</td>
<td>数学</td>
<td>英语</td>
<td>生物</td>
<td>化学</td>
</tr>
</tbody> <tfoot>
<tr>
<td colspan="6">课程表</td>
</tr>
</tfoot>
</table> </body>
</html>
5.常用标签二 form
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<title>表单控件</title>
</head>
<body>
<div class="form">
<!--form标签是一个块级元素 被提交-->
<form action="https://www.baidu.com" method="get"> <!--label标签行内元素--><!--input是行内块元素-->
<p>
<label for="user">用户名：</label>
<input type="text" name="username" id="user" placeholder="请输入用户名" >
</p> <p>
<label for="password">密码：</label>
<input type="password" name="password" id="password" placeholder="请输入密码">
</p> <!--单选框 checked 会被默认选中 产生互斥 name 值要相同-->
<p>
用户性别：
<input type="radio" name="sex" value="男" checked>男
<input type="radio" name="sex" value="女">女
</p> <!--复选框-->
<p>
用户的爱好：
<input type="checkbox" name="checkfav" value="吃" checked="checked">吃
<input type="checkbox" name="checkfav" value="喝">喝
<input type="checkbox" name="checkfav" value="玩" checked>玩
<input type="checkbox" name="checkfav" value="乐">乐
</p> <!--文件上传 file 表单的method的方法是 post 不能是get -->
<p>
<input type="file" name="textfile">
</p> <!--文本域-->
<p>
自我介绍
<textarea cols="20" rows="5" name="txt" placeholder="请做自我介绍"></textarea>
</p> <!--下拉列表 size设置高度 multiple可多选 selected默认选中 -->
<p>
<label for="sel">城市：</label>
<select name="sel" id="sel" size="3" multiple>
<option value="北京">北京</option>
<option value="上海" selected>上海</option>
<option value="广州">广州</option>
<option value="深圳">深圳</option>
</select>
</p> <!--按钮-->
<p>
<!--显示普通的按钮-->
<input type="button" name="btn" value="提交" disabled>
<!--重置按钮-->
<input type="reset" name="" >
<!--提交form表单使用 type=submit 按钮-->
<input type="submit" name="btn" value="submit">
</p> </form>
<button type="button">按钮</button> <!--类似 普通的按钮--> <!--
总结：
按钮： button reset submit
文本： label text password radio checkbox file textarea
下拉框： select option
-->
<!--
总结：
html标签：
head 标签：
title 标签，显示网站的标题
meta 标签，提供有关页面的原信息
style 标签，定义内部样式表
link 标签，链接css资源文件、网站图标
script 标签，链接脚本js文件
body 标签：
h1 - h6 标题标签
p 段落标签
ul 无序列表标签
ol 有序列表标签
div 盒子标签
table 表格标签
th 定义表头
tr 定义表行
td 定义表单元格数据
form 表单标签
...
action
method
enctype
表单控件分类：
textarea
select option
input
label
...
img 标签
br 换行标签
hr 分割线标签
空格字符
a 超链接标签
span 标签
button 按钮
-->
</div> </body>
</html>
6.标签分类
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<title>标签分类</title>
</head>
<body>
<!--
1.标签属性 注意事项：
1.HTML标签除一些特定属性外可以设置自定义属性，一个标签可以设置多个属性用空格分隔，多个属性不区分先后顺序。
2.属性值要用引号包裹起来，通常使用双引号也可以单引号。
3.属性和属性值不区分大小写，但是推荐使用小写。
2.标签分类：
HTML中标签元素三种不同类型：块状元素，行内元素，行内块状元素。
常用的块状元素：
<div> <p> <h1>~<h6> <ol> <ul> <table><form> <li>
常用的行内元素
<a> <span> <br> <i> <em> <strong> <label>
常用的行内块状元素：
<img> <input> 块级元素特点：display:block;
1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。独占一行
2、元素的高度、宽度、行高以及顶和底边距都可设置。
3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。
行内元素特点：display:inline;
1、和其他元素都在一行上；
2、元素的高度、宽度及顶部和底部边距不可设置；
3、元素的宽度就是它包含的文字或图片的宽度，不可改变。
行内块状元素的特点：display:inline-block;
1、和其他元素都在一行上；
2、元素的高度、宽度、行高以及顶和底边距都可设置
注意
我们可以通过display属性对块级元素、行内元素、行内块元素进行转换，为后面页面布局做好了准备。
3.标签嵌套规则：
块元素可以包含内联元素或某些块元素，但内联元素却不能包含块元素，它只能包含其它的内联元素，例如：
<div><div></div><h1></h1><p><p></div> ✔️
<a href=”#”><span></span></a> ✔️ a 可以包含 img
<span><div></div></span> ❌
某些块级元素不能放在p标签里面，比如
<p><ol><li></li></ol></p> ✔️
<p><div></div></p> ❌ 个别例外，大家注意
有几个特殊的块级元素只能包含内嵌元素，不能再包含块级元素，这几个特殊的标签是：
h1、h2、h3、h4、h5、h6、p
li元素可以嵌入ul，ol，div等标签
<ul>
<li>
<ul>
<li>
<div> </div>
</li>
<li>
<ol>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
</li>
</ul>
</li>
</ul> -->
<div class="wrapper">
<!--块级元素： div p h1~h6 ol ul li table form
块状元素：
1.独占一行
2.可以设宽度和高度，如果设置了宽度和高度，则就是当前的宽度和高度
如果没有设置，宽度就是父盒子的宽度，高度根据内容填充
-->
<div class="left">
这是路飞学城的战场
<div>这是我的段落
<div style="width:500px;height: 100px">这是我的爱好</div>
<ul>
<li>
<h2>读书</h2>
</li>
<li>
<ol>
<li>运动</li>
<li>学习</li>
</ol>
</li>
</ul>
</div>
</div> <div class="right">
<!--行内标签 a span br i en strong label
hr 可以设置宽高；
br 不可设置宽高；
行内元素：在一行内展示，不能设置宽度和高度，宽度和高度根据内容填充
-->
<a href="#" style="width: 200px;height: 100px">百度</a>
<a href="#">luffy</a>
<span style="width: 100px;height: 100px">一些文本</span>
<span>一些文本</span>
<i>我是i</i>
<hr style="height: 100px;width: 100px">
<em>我是em</em>
<br style="width: 200px;height: 100px">
<strong style="height: 200px;width: 100px;">我是strong</strong> </div> <div class="inline-block">
<!--行内块
1.在一行内展示
2.可设置宽高
-->
<img src="homesmall1.png" alt="一张图片" style="height: 500px;width: 500px">
<label for="txt">测试</label>
<input type="text" name="username" id="txt" style="width: 200px;height: 50px">
</div> </div> </body>
</html>
前端开发 - HTML的更多相关文章
- 总结：Mac前端开发环境的搭建（配置）
新年新气象,在2016年的第一天,我入手了人生中第一台自己的电脑(大一时好友赠送的电脑在一次无意中烧坏了主板,此后便不断借用别人的或者网站的).macbook air,身上已无分文...接下来半年的房 ...
- 前端开发：面向对象与javascript中的面向对象实现（二）构造函数与原型
前端开发:面向对象与javascript中的面向对象实现(二)构造函数与原型 前言(题外话): 有人说拖延症是一个绝症,哎呀治不好了.先不说这是一个每个人都多多少少会有的,也不管它究竟对生活有多么大的 ...
- openresty 前端开发入门五之Mysql篇
openresty 前端开发入门五之Mysql篇 这章主要演示怎么通过lua连接mysql,并根据用户输入的name从mysql获取数据,并返回给用户 操作mysql主要用到了lua-resty-my ...
- JS高级前端开发群加群说明及如何晋级
JS高级前端开发群加群说明 一.文章背景: 二. 高级群: 三. 加入方式: 四. 说明: 一.文章背景: 去年年初建了几个群,在不经意间火了,一直排在“前端开发”关键字搜索结果第一名.当然取得这 ...
- web前端开发分享-目录
1. web前端开发分享-css,js入门篇 2. web前端开发分享-css,js进阶篇 3. web前端开发分享-css,js提高篇 4. web前端开发分享-css,js工具篇 5. web前端 ...
- 前端开发：setTimeout与setInterval 定时器与异步循环数组
前端开发:setTimeout与setInterval 定时器与异步循环数组 前言: 开通博客园三个月以来,随笔记录了工作中遇到的大大小小的难题,也看过无数篇令人启发的文章,我觉得这样的环境是极好的, ...
- 前端开发：面向对象与javascript中的面向对象实现（一）
前端开发:面向对象与javascript中的面向对象实现(一) 前言: 人生在世,这找不到对象是万万不行的.咱们生活中,找不到对象要挨骂,代码里也一样.朋友问我说:“嘿,在干嘛呢......”,我:“ ...
- 前端开发：css基础知识之盒模型以及浮动布局。
前端开发:css基础知识之盒模型以及浮动布局 前言 楼主的蛮多朋友最近都在学习html5,他们都会问到同一个问题 浮动是什么东西? 为什么这个浮动没有效果? 这个问题楼主已经回答了n遍.今天则是把 ...
- 前端开发：Javascript中的数组，常用方法解析
前端开发:Javascript中的数组,常用方法解析 前言 Array是Javascript构成的一个重要的部分,它可以用来存储字符串.对象.函数.Number,它是非常强大的.因此深入了解Array ...
- 前端开发css实战：使用css制作网页中的多级菜单
前端开发css实战:使用css制作网页中的多级菜单 在日常工作中,大家都会遇到一些显示隐藏类菜单,比如页头导航.二维码显示隐藏.文本提示等等......而这些效果都是可以使用纯css实现的(而且非常简 ...
随机推荐
- 0061 Spring MVC的数据格式化--Formatter--FormatterRegistrar--@DateTimeFormat--@NumberFormat
Converter只完成了数据类型的转换,却不负责输入输出数据的格式化工作,日期时间.货币等虽都以字符串形式存在,却有不同的格式. Spring格式化框架要解决的问题是:从格式化的数据中获取真正的数据 ...
- jQuery瀑布流插件 Masonry
http://www.jq22.com/yanshi362 参考案例 http://image.quanjing.com/lvyou/
- nodeJs should+mocha+istanbul 测试 遇到的坑
.istanbul 和 mocha 结合进行nodejs测试的时候最后执行 istanbul cover _mocha test.sqrt.js的时候报错 如图: 用 ../node_modules/ ...
- Eclipse中安装JBoss Tools插件
1.先访问JBoss Tools网站,看看上面怎么说: http://tools.jboss.org -> 进入下载界面 看到下面这句话: Drag and drop this icon in ...
- 关于JDK环境变量的配置问题
网上配置JDK环境变量的时候一直说要配置三个环境变量,什么JAVA_HOME,Path,CLASSPATH 其实是说以后如果要修改JDK的版本或者路径,只要更改JAVA_HOME就可以了,Path,C ...
- 【BZOJ】1691: [Usaco2007 Dec]挑剔的美食家（set+贪心）
http://www.lydsy.com/JudgeOnline/problem.php?id=1691 懒得打平衡树了.... 而且multiset是很快的... 排到了rank1 T_T 贪心就是 ...
- android DialogFragment 回调到 Fragment
google 从3.0開始就引入了 Fragment 概念,用 Fragment 取代多 Activity,假设你还停留在 Activity 时代,那你就面壁去吧! Fragment 是好用,可是又几 ...
- QTreeWidget 获取被双击的子项的层次路径
from PyQt5.QtWidgets import (QApplication, QWidget, QHBoxLayout, QTreeWidget, QTreeWidgetItem, QGrou ...
- 学习《深入理解C#》—— 泛型 (第三章3.1---3.2)
泛型是什么? 泛型(generic)是C# 2.0和通用语言运行时(CLR)的一个新特性.泛型为.NET框架引入了类型参数(type parameters)的概念.类型参数使得设计类和方法时,不必确定 ...
- sizeof 数组与指针
在学习指针的时候,得到指针的定义和数组的定义一样,但是这时候就很好奇,指针只是一个地址,那数组和指针一样的话,sizeof时怎么得知其长度呢. 于是百度了下面的回复: 千万不要把数组名看成指针,尽管有 ...