前端开发 - 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实现的(而且非常简 ...
随机推荐
- python课文题目格式
import win32com from win32com.client import Dispatch,constants w = win32com.client.Dispatch('Word.Ap ...
- Python操作Word:常用对象介绍
前面已经介绍过了试用win32com类库来进行Word开发,系列文章<Python操作Word>是继承了前面的文章,所以,你应该先查看前面的文章,其实只有两篇,文章地址列在最下面的参考资料 ...
- js去掉双引号
替换: d = d.replace("\"","").replace("\"",""); 全部替换: ...
- 改进cocos2dx中lua读ccb的方法
cocos2dx自带的CCBProxy真弱,还好提供了一个CCBReaderLoader.lua,但是也不好用, 于是修改了一下CCBReaderLoader,下面直接贴代码了. function N ...
- linphone 在am335x的编译过程
环境变量: export PREFIX=/usr export HOSTTPL=arm-linux-gnueabihf export INSTALLDIR=/home/elinux/linphone/ ...
- 示例 - 如何在Console应用程序中应用SpiderStudio生成的DLL?
以前面生成的XML/JSON互转DLL为例, 我们写一个Console Appliction来做这件事情, 步骤如下: 1. 创建Console Project 2. 引入www.utilities_ ...
- asp.net 下载的几种方式
protected void Button1_Click(object sender, EventArgs e) { /* 微软为Response对象提供了一个新的方法TransmitFile来 ...
- linux -- ubuntuserver 安装图形界面
安装Gnome桌面 1.安装全部桌面环境,其实Ubuntu系列桌面实际上有几种桌面应用程序,包括Ubuntu-desktop.Kubunut-desktop和Xubuntu- desktop. 我们就 ...
- ztree获取选中节点时不能进入可视区域出现BUG如何解决
zTree 是一个依靠 jQuery 实现的多功能 “树插件”.优异的性能.灵活的配置.多种功能的组合是 zTree 最大优点. zTree 的特点编辑 ● zTree v3.0 将核心代码按照功能进 ...
- WPF进阶之接口(3):INotifyPropertyChanged,ICommand
INotifiPropertyChanged . 作用:向客户端发出某一属性值已更改的通知.该接口包含一个PropertyChanged事件成员(MSDN的解释) INotifyPropertyCha ...