Day039--HTML
HTML小马哥博客 HTML CSS + DIV实现整体布局 1. HTML
超文本标记语言
对换行不敏感
空白折叠现象
标签要严格密封
新建HTML文件，输入 html:5,按tab键后，自动生成的代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body> </body>
</html>
head标签都放在头部分之间。这里面包含了：<title>、<meta>、<link>，<style>
<title>：指定整个网页的标题，在浏览器最上方显示。<meta>：提供有关页面的基本信息<link>：定义文档与外部资源的关系。- <style>:定义内部样式表与网页的关系
主要用于页面的关键字和描述，是写给搜索引擎看的，关键字可以有多个用 ‘,’号隔开，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。
这些关键词，就是告诉搜索引擎，这个网页是干嘛的，能够提高搜索命中率。让别人能够找到你，搜索到。
<meta name="Keywords" content="网易,邮箱,游戏,新闻,体育,娱乐,女性,亚运,论坛,短信" />
只要设置Description页面描述，那么百度搜索结果，就能够显示这些语句，这个技术叫做SEO（search engine optimization，搜索引擎优化）。
<meta name="Description" content="网易是中国领先的互联网技术公司，为用户提供免费邮箱、游戏、搜索引擎服务，开设新闻、娱乐、体育等30多个内容频道，及博客、视频、论坛等互动交流，网聚人的力量。" />
2. body中标签的分类
- 字体标签
h1 - h6 标题标签 在htm中都是标签,标签的作用: 体现了语义化 h1-h6, u,b,strong,br,hr,em,pre用法
# pycharm中新建html文件 <!--文档的声明 一个html文件就是一个文档-->
<!DOCTYPE html>
<html lang="en">
<!--双闭合-->
<head>
<!--head标签中的内容不会显示到浏览器上-->
<!--meta是单闭合标签 定义文档的编码类型，右边默认有个/,可以不写-->
<meta charset="UTF-8">
<!--title是双闭合标签-->
<title>今天我们学习html</title>
</head>
<!--body中的内容都会显示到浏览器上-->
<body>
<!--普通文本-->
吴老板
<!-- h1 只允许页面中有一个: 为了seo和爬虫-->
<h1>吴老板</h1>
<h2>吴老板</h2>
<h3>吴老板</h3>
<h4>吴老板</h4>
<h5>吴老板</h5>
<h6>吴老板</h6>
<!--行内标签: 在一行内显示,不换行-->
<!--underline 下划线-->
<u>娃哈哈</u>
<!--强调-->
<b>你好啊</b>
<!--强调-->
<strong>你好啊</strong>
<!--排版标签-->
<!--换行标签-->
<br>
<!--线-->
<hr>
<hr>
<hr>
<!--行内标签用法示例-->
ok,基本上HTML标签就给大家介绍到这里，基本上呢，<strong>div+css</strong>布局，我们常用的的标签如下：
<!--斜体标签-->
<em>哈哈</em>
<!--空白折叠: 换行和空格折叠成一个空格-->
<hr>
鹅鹅鹅
曲项向天歌
<!--保留格式,但是前面会有空格,固定格式-->
<hr>
<pre>
鹅鹅鹅
曲项向天歌
</pre> </body>
</html>
用法示例
标签分类:
1. 行内标签
span (文本级标签,里面只能放置文字、图片、表单元素。 span里面不能放p、h、ul、dl、ol、div。)
a
em i
strong b 特点:
- 在一行内显示, 不换行
- 不能设置宽高, 如果不设置宽高, 默认是内容的宽高
- 行内块标签: img input
特点:
- 一行内显示
- 可以设置宽高
2. 块级标签
h1-h6
div
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<span id="active" title="你好" style = "color: aqua;width: 100px;">嘿嘿和你</span>
<!--id是文档中是唯一--> <div id="top" style="width: 200px;">
<div class="top-l">
<!--div标签是块级标签 独占一行,span是行内标签 一行内显示-->
<span>小米商城</span>
<span class="sep">|</span>
<span>MIUI</span>
<span class="sep">|</span>
<a href="https://iot.mi.com/index.html" target="_self">loT</a>
<a href="https://iot.mi.com/index.html" target="_blank">|</a>
</div>
<div class="shopCart">
<i>图标</i>
<!--span标签只能放行内标签 em,i span,strong,img. 不能放块级标签
块级标签中可以放块级标签,行内标签 -->
<span>购物车(<span class="count">0</span>)</span>
</div>
<div class="login">
<a href="#">登录</a>
<a href="#" class="sep">|</a>
<a href="#">注册</a>
<a href="#">|</a>
<a href="#">消息通知</a>
</div>
</div>
<div id="header"> </div>
<div id="wrap"> </div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <div class="box"> <a href="#">跳转顶部</a>
<!--表示阻止a标签的默认跳转--> <a href="javascript:void(0);">跳转顶部</a>
<a href="./01-我的第一个html代码.html">跳转第一个网页</a>
</div> </body>
</html>
div分区
p: 文本级标签,记住, 只能放文字,行内标签,img,表单元素,不能放块 (p标签中不能放div,p标签)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="box">
<!--记住:p标签只能放 字体标签和img 表单 input,它不能放块-->
<p>如果要想保证图片等比例缩放，请只设置width和height中其中一个。</p>
<p>如果要想保证图片等比例缩放，请只设置width和height中其中一个。</p>
<p>如果要想保证图片等比例缩放，请只设置width和height中其中一个。</p>
<p>如果要想保证图片等比例缩放，请只设置width和height中其中一个。</p> <!--错误用法示例-->
<!--p标签中不能放块级标签-->
<p>
哈哈哈
<!--<div>嘿嘿</div>-->
<p>嘿嘿</p>
</p>
</div>
</body>
</html>
p标签的错误用法示例
ul:(用得最频繁)
unordered list 无序列表（没有序号） 它的子元素只能是li
·手机 电话卡
·电视 盒子
·
ul
li 块
li
li
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body> <div class="wrap">
<div class="list">
<ul type="square">
<li>手机 电话卡</li>
<li>电视 盒子</li>
<li>笔记本 平板</li>
<li>家电 插线板</li>
<li>出行 穿戴</li>
<li>智能 路由器</li>
<li>电源 配件</li>
<li>健康 儿童</li>
<li>耳机 音箱</li>
<li>生活 箱包</li>
</ul>
<ol>
<li>手机 电话卡</li>
<li>电视 盒子</li>
<li>笔记本 平板</li>
<li>家电 插线板</li>
<li>出行 穿戴</li>
<li>智能 路由器</li>
<li>电源 配件</li>
<li>健康 儿童</li>
<li>耳机 音箱</li>
<li>生活 箱包</li>
</ol>
</div>
</div>
</body>
</html>
列表应用示例
ol:
ordered list: 有序列表 里面也放li
1.
2.
3.
4. dl: 自定义列表
dt定义的标题
dd 定义描述标题的内容
table
tr
td border="1" style = "border-collapse:collapse"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--border="1" style="border-collapse:collapse;"-->
<!--border 设置边框 collapse：边框合并 -->
<table border="1" style="border-collapse:collapse;" width="100%">
<!--tr 表示每一行-->
<tr height="300">
<!--每行的内容-->
<td>id</td>
<td>name</td>
<td rowspan="3">age</td>
</tr>
<tr>
<td>1</td>
<td>吴老板</td>
<!--<td>20</td>-->
</tr>
<tr>
<td>2</td>
<td>涛歌</td>
<!--<td>30</td>-->
</tr>
<tr>
<td>3</td>
<!--<td>小马哥</td>-->
<td colspan="2">18</td>
</tr> </table>
</body>
</html>
table标签应用示例
form
action: 提交服务器的地址 (定义表单提交时发生的动作) 默认值,明文提交,所有的数据显示在地址栏,安全性低, 最大限制2kb
method: 提交的方式 (get post) 发送数据不会显示在地址栏上,安全性高,上传下载都用post
enctype: 编码类型,允许表单将什么样的数据传给服务器
如果有文件需要提交给服务器, method必须为POST, enctype必须为multipart/form-data input: 输入框
type:
text
button
password
radio
submit
file
name:
value
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--form: 与服务器产生交互 action:交互的网址 http://127.0.0.1:8888
表单控件中的name属性会被封装成{} key value属性会被封装成字典的value -->
<form action="https://www.baidu.com/s" method="get">
<!--主要放表单控件-->
<!--文本输入框-->
<input type="text" name = 'wd' value = '路飞学城'>
<label for="password">密码</label>
<input type="password" name="pwd" id="password" placeholder="请输入密码"> <input type="submit" value="搜索"> </form> </body>
</html>
表单应用示例
特点:
- 独占一行
- 可以设置宽高,如果不设置宽, 默认是父盒子宽度的100% ##
请求必有响应
前端的解释器就在浏览器中
F12 或检查
elements 元素
console 输出
sources资源
network网络 General请求的响应首行 :
request URL: 请求地址
request method: 请求方式 GET获取/post提交
status code 状态码
remote address 远程地址 Response响应:
显示的页面:HTML
内容: 标签 将文本放到浏览器去渲染,不是超文本,则将文件中的文本改变字体,浏览器不会跟着显示
输入标签名按Tab键自动创建闭合标签 br*20 自动创建20个br标签
ul>li*10 自动创建ul标签及下面的10个li标签
按住alt键,鼠标点多行,可以编辑多行 颜色 各个颜色加起来等于盒子大小
蓝色: 内容
黄色:边框 border
橘黄色: 外边距 margin
绿色: 内填充,内边距 padding form input 里面可以设置宽高 style="hight= ;" 网页:
顶部栏
头部(有LOGO) 今日内容:
HTML+CSS+JS
HTML+CSS 没有逻辑可言 需要记住 HTML: 定义文档的结构 (人的骨架)
CSS: 修饰文档的样式 (肉和衣服)
JS: JavaScript 动作 (点击, 交互)
提示补充
其他标签:
超链接
1. 外部链接
a : anchor 是英语anchor“锚”的意思，就好像这个页面往另一个页面扔出了一个锚。是一个文本级的标签。
herf : hypertext reference 超文本链接, 超链接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<a name="top">顶部</a>
<span id="active" title="你好" style="color:aqua;width: 100px;">嘿嘿</span>
<!--id在文档中是唯一的-->
<span>hehehe</span>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <a href="#top">跳转顶部</a>
<!--阻止a标签的默认跳转-->
<a href="javascript:void(0);">跳转顶部</a>
<!--在本页面打开-->
<a href="./01-我的第一个html代码.html">跳转第一个网页</a>
<a href="./01-我的第一个html代码.html" target="_self">跳转第一个网页</a>
<!--在新标签中打开-->
<a href="./01-我的第一个html代码.html" target="_blank">跳转第一个网页</a>
</body>
</html>
返回顶部
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body> <div class="logo">
<!--解决a标签不能设置宽高的问题: 1.把a标签强制转成块级标签 2.再设置宽高-->
<!--src: 图片链接的资源地址 alt:图片资源加载失败的时候显示的代替文本-->
<a href="https://image.baidu.com/search/detail?ct=503316480&z=0&ipn=d&word=%E6%A0%A1%E8%8A%B1&step_word=&hs=2&pn=2&spn=0&di=101433843280&pi=0&rn=1&tn=baiduimagedetail&is=0%2C0&istype=0&ie=utf-8&oe=utf-8&in=&cl=2&lm=-1&st=undefined&cs=1265067270%2C3260796563&os=2337861475%2C1381772050&simid=0%2C0&adpicid=0&lpn=0&ln=1945&fr=&fmq=1540956776967_R&fm=&ic=undefined&s=undefined&se=&sme=&tab=0&width=undefined&height=undefined&face=undefined&ist=&jit=&cg=&bdtype=0&oriquery=&objurl=http%3A%2F%2Fimg3.duitang.com%2Fuploads%2Fitem%2F201504%2F12%2F20150412H4253_NwGvx.thumb.700_0.jpeg&fromurl=ippr_z2C%24qAzdH3FAzdH3Fooo_z%26e3B17tpwg2_z%26e3Bv54AzdH3Fks52AzdH3F%3Ft1%3Dnca8cdbcl&gsm=0&rpstart=0&rpnum=0&islist=&querylist=" style="display: block; height: 100px;">
<img src="./images/xiaohua.jpg" alt="校花" height="100">
</a>
<a href="https://image.baidu.com/search/detail?ct=503316480&z=0&ipn=d&word=%E6%A0%A1%E8%8A%B1&step_word=&hs=2&pn=2&spn=0&di=101433843280&pi=0&rn=1&tn=baiduimagedetail&is=0%2C0&istype=0&ie=utf-8&oe=utf-8&in=&cl=2&lm=-1&st=undefined&cs=1265067270%2C3260796563&os=2337861475%2C1381772050&simid=0%2C0&adpicid=0&lpn=0&ln=1945&fr=&fmq=1540956776967_R&fm=&ic=undefined&s=undefined&se=&sme=&tab=0&width=undefined&height=undefined&face=undefined&ist=&jit=&cg=&bdtype=0&oriquery=&objurl=http%3A%2F%2Fimg3.duitang.com%2Fuploads%2Fitem%2F201504%2F12%2F20150412H4253_NwGvx.thumb.700_0.jpeg&fromurl=ippr_z2C%24qAzdH3FAzdH3Fooo_z%26e3B17tpwg2_z%26e3Bv54AzdH3Fks52AzdH3F%3Ft1%3Dnca8cdbcl&gsm=0&rpstart=0&rpnum=0&islist=&querylist=" >
<img src="./images/xiaohua.jpg" alt="校花" height="100">
</a> </div>
<div>
<img src="./images/xiaohua.jpg" alt="">
</div> </body>
</html>
图片超链接
# 相当于刷新了页面,此时 #后面不加锚点也会返回到顶部,相当于刷新页面的效果
2. 锚链接
3. 邮件链接
特殊字符
：空格 （non-breaking spacing，不断打空格）<：小于号（less than）>：大于号（greater than）&：符号&"：双引号'：单引号©：版权©™：商标™
Day039--HTML的更多相关文章
- day039 数据库索引
今日内容: 1.为什么要有索引 简而言之,索引出现的意义是为了更方便,更快速的查询数据. 什么是索引 索引在mysql中也叫''键''或'key'(primary key unique key,ind ...
- navicat 和 pymysql
---------------------------------------------------相信时间的力量,单每月经过努力的时间,一切的安排都是懊脑的安排. # # ------------ ...
随机推荐
- 【Linux】阿里云ECS提示RHSA-2017:3263: curl security update（CentOS 7 更新 curl 为最新版本）
1.前言 由于 CentOS 7 内置的 curl 和 libcurl 源为较旧的 7.29.0,不支持一些新特性且有安全性问题,所以需要更新一下. 2.开始 1.更新ca-bundle · 首先备份 ...
- Vue一个案例引发的递归组件的使用
今天我们继续使用 Vue 的撸我们的实战项目,只有在实战中我们才会领悟更多,光纸上谈兵然并卵,继上篇我们的<Vue一个案例引发的动态组件与全局事件绑定总结> 之后,今天来聊一聊我们如何在项 ...
- 利用ZYNQ SOC快速打开算法验证通路（1）——MATLAB浮点数与定点二进制补码互转
最近本人一直在学习ZYNQ SOC的使用,目的是应对科研需要,做出通用的算法验证平台.大概思想是:ZYNQ PS端负责与MATLAB等上位机数据分析与可视化软件交互:既可传输数据,也能通过上位机配置更 ...
- Allowed memory size of 134217728 bytes exhausted解决办法(php内存耗尽报错)【简记】
报错: PHP Fatal error: Allowed memory size of 134217728 bytes exhausted (tried to allocate 72 bytes) i ...
- phpstorm ftp主动模式能连接上，但获取不到目录；
前面一直都在使用ST做开发,但是也想试试传说中的phpstorm神器.一切都弄好了,想使用它的远程开发功能,省去我本地开发然后再ftp上传做法. 但是却遇到了这个问题,困扰了我三四天!!!我各种百度都 ...
- formatter的使用
1.目的 如图所示,实现行编辑栏中的编辑删除,以及在时间建议中显示上中下旬 可参考easyui官方文档中所写的关于datagrid列属性:http://www.jeasyui.net/plugins/ ...
- Spring MVC @RequestMapping注解详解
@RequestMapping 参数说明 value:定义处理方法的请求的 URL 地址.(重点) method:定义处理方法的 http method 类型,如 GET.POST 等.(重点) pa ...
- (转）Cesium教程系列汇总
https://www.cnblogs.com/fuckgiser/p/5706842.html Cesium系列目录: 演示实例 ExamplesforCesium 最近老实有一些人问我,下载后在本 ...
- Linux-基础学习（四）-部署图书管理系统项目
部署图书管理项目需要以下软件 项目文件(django项目文件夹) 数据库文件(django项目对应的数据库文件) centos7(linux本体) nginx(反向代理以及静态文件收集) uWSGI( ...
- 程序员买房指南——LZ的三次买房和一次卖房经历
引言 买房,一直是程序员群体绕不开的一个话题,尤其是到了一定年纪和人生阶段以后,买房这件事会变得越来越迫切. 为什么LZ一上来就说,买房是程序员绕不开的一个话题? 其实原因很简单,由于程序员这个职业的 ...