HTML基础做出属于自己的完美网页
HTML
HTML解释:
HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写,他是一种制作万维网页面标准语言(标记)。相当于定义统一的规则(W3C),大家都来遵守他,这样就可以让浏览器根据标记语言的规则去解释它。
浏览器负责将标签翻译成用户“看得懂”的格式,呈现给用户!
网页的组成:
一个网页一般由两部分组成即:
- HTML(Hypertext Markup Language)
- 和CSS(Cascade Style Sheets)
HTML负责描述网页的结构和内容(如标题,导航栏等) CSS则负责网页的表现(外观)(如背景颜色,字体样式等)。
<head>和</head>之间的内容,是元信息和网站的标题 元信息一般是不显示出来的,但是记录了你这个HTML文件的很多有用的信息
<body>和</body>之间的内容,是浏览器呈现出来的,用户看到的页面效果。也就是说这里是网页的主体。也就是body的身体之意
<html></html>是说明这个是一个网页。告诉浏览器这个网页的开始和结束。他包含了之后的两个元素。<head>和</head>|<body>和</body>
文档结构如下:
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body></body> </html>
DOCTYPE部分
Doctype告诉浏览器使用什么样的html或xhtml规范来解析html文档
HTML语言需要一个标准,当我们在第一行指定了<!DOCTYPE html>的时候,当浏览器去访问我们的代码的时候就就按照HTML代码里指定的标准去读取和渲染给我们展现的页面。
为什么要使用<!DOCTYPE html>这个去告诉浏览器呢?
DOCTYPE模式:
我们先了解一下DOCTYPE的模式
- BackCompat:标准兼容模式未开启(或叫怪异模式[Quirks mode]、混杂模式)
- CSS1Compat:标准兼容模式已开启(或叫严格模式[Standards mode/Strict mode])
问题产生:
当Netscape4(译注:网景公司早期的浏览器)和IE4(微软公司早期的浏览器)实现CSS机制时,并没有遵循W3C提出的标准。Netscape4 提供了糟糕的支持,而IE4 虽然接近标准,但依旧未能完全正确的支持标准。尽管IE 5 修复了IE4 许多的问题(bugs),但是依然延续CSS实现中的其它故障(主要是盒模型(box model)问题)。
为了保证自己的网站在不同的浏览器中都能正确展现,网页开发者不得不依据各个浏览器的自身的规范来使用CSS。因此大部分网站的CSS实现并未符合W3C的标准。
然而随着标准一致性变得越来越重要,浏览器开发商不得不面临一个艰难的抉择:逐渐遵循W3C的标准是前进的方向。但是改变现有CSS的实现,完整去遵循标准,会使许多网站或多或少受到破坏。如果浏览器突然以正确的方式解析现存的CSS,陈旧的网站显示必然受到影响。
因此立即遵循标准会产生问题,然而忽略标准则又会维持浏览器大战时(译注:微软和网景之间的一段竞争)所产生的混乱。
解决方案:
- 允许网站开发者能够选择他们所熟知的模式。
- 依然使用旧式规则显示陈旧的网站。
换句话说,所有的浏览器需要提供两种模式:怪异模式(即兼容模式)服务于旧式规则,严格模式服务于标准规则。Mac平台的IE浏览器最先实现这两种模式,Mozilla, Safari、Opera和Windows平台的IE6也相继实现了这两种模式。WIndows平台的IE5和Netscape4则只提供了怪异模式。
选择使用哪种模式需要一个触发器,而 “DOCTYP切换” 则用于此目的。依照标准:任何一个(X)HTML文档必须拥有一个DOCTYPE(译注:DTD(文档类型定义)是一组机器可读的规则,它们指示 (X)HTML文档中允许有什么,不允许有什么,DOCTYPE正是用来告诉浏览器使用哪种DTD,一般放在(X)HTML文档开头声明)用以告诉其他人 这个文档的类型风格
- 产生于标准化浪潮以前的网页并没有DOCTYPE声明。因此'没有DOCTYPE'意味着触发怪异模式:既依据旧式的CSS规则渲染网页。
- 相反,如果开发者明确知道包含DOCTYPE,他们应该明白他们想要怎么做。因此大部分的DOCTYPE声明将触发严格模式:即依据标准的CSS规则渲染网页。
- 任何新的或未知的DOCTYPE将触发严格模式。
head部分
1、Meta(metadata information)
提供有关页面的元信息,例:页面编码、刷新、跳转、针对搜索引擎和更新频度的描述和关键词
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"> <meta http-equiv="refresh" content="5"> <metahttpequiv="refresh"Content="1;Url=http://www.cnblogs.com/aylin1/" /> <meta name="keywords" content="博客,张岩林,帅哥,"> <meta name="description" content="博客园是一个面向开发者的知识分享社区。自创建以来,博客园一直致力并专注于为开发者打造一个纯净的技术交流社区,推动并帮助开发者通过互联网分享知识,从而让更多开发者从中受益。博客园的使命是帮助开发者用代码改变世界。"><title>张岩林</title> <link rel="icon" href="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png" type="image/x-icon"> </head> <body></body> </html>
1>定义编码格式
<meta charset="UTF-8"> #定义编码为utf-8
2>刷新和跳转页面
<meta http-equiv="refresh" content="5"> # 5秒跳转 <metahttpequiv="refresh"Content="1;Url=http://www.cnblogs.com/aylin1/" /> #跳转至我的博客
3>关键字
关键字的作用:一般是让爬虫之类的收录程序,当他们在爬你的网站的时候,如果你有关键字,那么他们会优先把关键字收录到他们的记录中,比如百度:如果他们收录之后,他们搜索你的关键字的时候,就能找到咱们的网站。
<meta name="keywords" content="博客,张岩林,帅哥,">
4>描述
例如博客园的描述如下:
<meta name="description" content="博客园是一个面向开发者的知识分享社区。自创建以来,博客园一直致力并专注于为开发者打造一个纯净的技术交流社区,推动并帮助开发者通过互联网分享知识,从而让更多开发者从中受益。博客园的使命是帮助开发者用代码改变世界。">
5>title
设置标签为张岩林
<title>张岩林</title>
6>标签图标Link
<link rel="icon" href="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png" type="image/x-icon">
7>导入CSS类似python中导入模块类似
<link rel="stylesheet" href="css/css_model.css">
8>、Style
1、在当前文件中写Css样式
2、在其他文件中写Css样式类似python的模块导入的方式把Css样式导入到当前文件中使用
9>、Script
1、在当前文件中写JS
2、在其他文件中写JS类似python的模块导入的方式把JS导入到当前文件中使用
body部分
body里面分为两类标签:块级标签和内联标签。
1、块级标签:<p><h1><table><ol><ul><form><div>
2、内联标签:<a><input><img><sub><sup><textarea><span>
块级标签元素的特点
① 总是在新行上开始;
② 高度,行高以及外边距和内边距都可控制;
③ 宽度缺省是它的容器的100%,除非设定一个宽度。
④ 它可以容纳内联元素和其他块元素
内联标签元素的特点
① 和其他元素都在一行上;
② 高,行高及外边距和内边距不可改变;
③ 宽度就是它的文字或图片的宽度,不可改变
④ 内联元素只能容纳文本或者其他内联元素
对行内元素,需要注意如下
设置宽度width 无效。
设置高度height 无效,可以通过line-height来设置。
设置margin 只有左右margin有效,上下无效。
设置padding 只有左右padding有效,上下则无效。注意元素范围是增大了,但是对元素周围的内容是没影响的。
1、基本标签
<hn>: n的取值范围是1~6; 从大到小. 用来表示标题.
<p>: 段落标签. 包裹的内容被换行.并且也上下内容之间有一行空白.
<b> <strong>: 加粗标签.
<strike>: 为文字加上一条中线.
<em>: 文字变成斜体.
<sup>和<sub>: 上角标 和 下角表.
<br>:换行.
<hr>:水平线
<div><span>
废话不多说,直接撸码分析
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>张岩林</title> </head> <body><br><hr><h1>张岩林</h1><h2>张岩林</h2><h3>张岩林</h3><h4>张岩林</h4><h5>张岩林</h5><h6>张岩林</h6><hr><p>段落标签1</p><p>段落标签2</p><hr><b>加粗文字方法一</b><br><strong>加粗文字方法二</strong><hr><p>原价:<strike>299 </strike> 现价:10 文字中间加横线</p><p><em>斜体字</em></p><p> 2<sup>n</sup> 上角标</p><p>h<sub>2</sub>o 下角标</p><p>< 小于号</p><p>> 大于号</p><p>© </p><p>®</p></body> </html>
效果如下:
2、图形标签<img>
src: 要显示图片的路径.
alt: 图片没有加载成功时的提示.
title: 鼠标悬浮时的提示信息.
width: 图片的宽
height:图片的高 (宽高两个属性只用一个会自动等比缩放.)
<img src="111426147.jpg" alt="图片加载失败" title="美女">
3、超链接标签(锚标签)<a>:
href:要连接的资源路径 格式如下: href="http://www.baidu.com"
target: _blank : 在新的窗口打开超链接. 框架名称: 在指定框架中打开连接内容.
name: 定义一个页面的书签.
用于跳转 href : #书签名称.
<a href="http://www.cnblogs.com/aylin/p/5608175.html" target="_blank">猛戳这里</a>
还有一种本页标签跳转,通过定义ID来进行查找到内容
<a href="#a">李白</a> <div id="a" style="background-color: #197991">床前明月光,<br>疑是地上霜。<br>举头望明月,<br>低头思故乡。</div>
4、列表标签:
<ul>: 无序列表
<ol>:有序列表
<li>:列表中的每一项.
<dl> 定义列表
<dt> 列表标题
<dd> 列表项
<body><ol><li>无序一</li><li>无序二</li><li>无序三</li><li>无序四</li></ol><ul><li>有序一</li><li>有序二</li><li>有序三</li><li>有序四</li></ol></ul><dl><dt>第一章</dt><dd>1.1</dd><dd>1.2</dd><dd>1.3</dd><dd>1.4</dd></dl>
效果如下:
5、表格标签: <table>:
border: 表格边框.
cellpadding: 内边距
cellspacing: 外边距.
width: 像素 百分比.(最好通过css来设置长宽)
<tr>: table row
<th>: table head cell
<td>: table data cell
rowspan: 单元格竖跨多少行
colspan: 单元格横跨多少列(即合并单元格)
<th>: table header <tbody>(不常用): 为表格进行分区.
<table border="" cellspacing="1" cellpadding="20" style="text-align: center;height: 100px"><tr><td>编号</td><td>姓名</td><td>班级</td><td>数学</td><td>语文</td><td>英文</td></tr><tr><td>001</td><td>张岩林</td><td>S1</td><td>120</td><td>109</td><td>120</td></tr><tr><td>001</td><td>张林</td><td>S1</td><td>100</td><td>19</td><td>100</td></tr><tr><td>001</td><td>小康</td><td>S1</td><td>89</td><td>100</td><td>10</td></tr><tr><td>001</td><td>小虎</td><td>S1</td><td>10</td><td>19</td><td>12</td></tr></table>
code
效果如下:
表格中还有合并单元格:
<table border="" cellspacing="1" cellpadding="1" style="width: 300px;height: 100px;color: #FC0D51;background-color: #9E9C9C;text-align: center"><tr><td>一</td><td>二</td><td>三</td></tr><tr><td colspan="3">1 2 3</td></tr><tr><td>4</td><td>5</td><td rowspan="2">6 9</td></tr><tr><td>7</td><td>8</td></tr></table>
6、表单标签(django)<form>:
表单用于向服务器传输数据。
表单能够包含 input 元素,比如文本字段、复选框、单选框、提交按钮等等。
表单还可以包含textarea、select、fieldset和 label 元素。
1>.表单属性
HTML 表单用于接收不同类型的用户输入,用户提交表单时向服务器传输数据,从而实现用户与Web服务器的交互。表单标签, 要提交的所有内容都应该在该标签中.
action: 表单提交到哪. 一般指向服务器端一个程序,程序接收到表单提交过来的数据(即表单元素值)作相应处理,比如https://www.sogou.com/web
method: 表单的提交方式 post/get 默认取值 就是 get(信封)
get: 1.提交的键值对.放在地址栏中url后面. 2.安全性相对较差. 3.对提交内容的长度有限制.
post:1.提交的键值对 不在地址栏. 2.安全性相对较高. 3.对提交内容的长度理论上无限制.
get/post是常见的两种请求方式.
2>.表单元素
<input> type: text 文本输入框
password 密码输入框
radio 单选框
checkbox 多选框
submit 提交按钮
button 按钮(需要配合js使用.) button和submit的区别?
file 提交文件:form表单需要加上属性enctype="multipart/form-data"
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>知乎</title></head> <body><div style="background-color: aquamarine;height: 590px;width: 292px; margin: 0 auto;margin-top: 6%"><img src="QQ图片20160624092733.png"><br><p style="text-align: center">与世界分享你的知识、经验和见解</p><hr><form action="http://127.0.0.1:8080" method="post" enctype="multipart/form-data"><p> 用 户 <input type="text" name="username"></p><p> 密 码 <input type="password" name="passwd"></p><hr><p> 性 别 男<input type="radio" name="sex" value="man"> 女<input type="radio" name="sex" value="woman"></p><hr><p> 爱 好篮球<input type="checkbox" name="lanqiu" value="篮球">足球<input type="checkbox" name="zuqiu" value="足球">排球<input type="checkbox" name="paiqiu" value="排球">台球<input type="checkbox" name="taiqiu" value="台球"></p><hr><br>城 市<select name="language" ><optgroup label="河北省"><option value="保定市">保定市</option><option value="邯郸市">邯郸市</option><option value="承德市">承德市</option></optgroup><optgroup label="河南省"><option value="洛阳市">洛阳市</option><option value="信阳市">信阳市</option><option value="郑州市">郑州市</option></optgroup><br></select><hr><p style="text-align: center">备 注<textarea name="qq" style="height: 60px;width: 220px"></textarea></p><p><input type="file" name="file_name" ></p><hr><p style="text-align: center"><input type="button" value="提交"> <input type="button" value="猛戳这里"></p></form></div> <table ><tr><td>1</td><td>2</td></tr><tr><td>1</td><td>2</td></tr> </table></body> </html>
from表单
效果有点low,讲究看吧
下面咱就来分析一下每个代码的意义:
转载于:https://www.cnblogs.com/aylin/p/5617438.html
HTML基础做出属于自己的完美网页相关推荐
- 《Dreamweaver CS6完美网页制作——基础、实例与技巧从入门到精通》——1.3 常用网页设计软件...
本节书摘来自异步社区<Dreamweaver CS6完美网页制作--基础.实例与技巧从入门到精通>一书中的第1章,第1.3节,作者:何新起 更多章节内容可以访问云栖社区"异步社区 ...
- 《Dreamweaver CS6完美网页制作——基础、实例与技巧从入门到精通》——1.2 网页的基本构成元素...
本节书摘来自异步社区<Dreamweaver CS6完美网页制作--基础.实例与技巧从入门到精通>一书中的第1章,第1.2节,作者:何新起 更多章节内容可以访问云栖社区"异步社区 ...
- 平面设计零基础怎么设计出一个完美的名片
本文由:"学设计上兔课网"原创,图片素材来自网络,仅供学习分享 平面设计零基础怎么设计出一个完美的名片?每个人都会有专属的名片,好的名片可以让你的商业精英形象愈发生动起来.今天,为 ...
- 视频教程-Bootstrap3从基础到案例实战,完美实现响应式网站案例-Bootstrap
Bootstrap3从基础到案例实战,完美实现响应式网站案例 杰瑞教育Java.Android.Html5.PHP方向导师,5年互联网行业开发经验,擅长Android应用及Web开发技术,精通Java ...
- Bootstrap3从基础到案例实战,完美实现响应式网站案例-姜浩-专题视频课程
Bootstrap3从基础到案例实战,完美实现响应式网站案例-402人已学习 课程介绍 Bootstrap介绍和Bootstrap各个版本之间的差异对比.通过Bootstrap3这一稳 ...
- CSS基础「四」浮动 \ 常见网页布局
本篇文章为 CSS 基础系列笔记第四篇,参考 黑马程序员pink老师前端入门教程 其他CSS基础相关文章: CSS基础「一」基础选择器 / 字体属性 / 文本属性 / 三种样式表 CSS基础「二」复合 ...
- 系统学习金融数据挖掘 之爬虫技术基础(附源代码)(网页结构基础)
个人公众号 yk 坤帝 后台回复 python金融基础 获取源代码 1. 爬虫基础1 - 网页结构基础 1.1 浏览器F12的运用,以及如何看网页源代码 首先安装谷歌浏览器:从官网https://ww ...
- 《征服老板:零基础做出高逼格PPT》笔记(一)
第 1 讲 醍醐灌顶!你对PPT的理解过时了 1.1 如果一生只选一次技能,请选PPT(5分钟) 课程核心:这节课主要是建立好的PPT概念,PPT不重要,重要的是展示PPT的场合 ① PPT常用五大场 ...
- 《十》浏览器基础及渲染引擎解析一个网页的过程、JavaScript 引擎解析 JavaScript 代码的过程
浏览器:是安装在电脑里面的一个软件,能够将页面内容渲染出来呈现给用户查看,并让用户与网页进行交互. 服务器其实就是性能比较高的计算机,这些计算机 24 小时不断电. 不关机. 开发者在本地开发出 HT ...
最新文章
- R语言dataframe合并函数merge实战
- python表格控件_python GUI库图形界面开发之PyQt5表格控件QTableView详细使用方法与实例...
- 组合使用Laravel和vfsStream测试文件上传
- Java学习笔记30
- 长沙网络推广浅析影响网站收录的因素有哪些?该如何做的更好?
- 使用调用者权限实现Schema导向操作
- 一篇小的随笔,关于记忆算法和概念
- 最酷的windows后门 呵呵
- 牛客多校6 - Harmony Pairs(数位dp)
- 【机器学习】Lasso回归(L1正则,MAP+拉普拉斯先验)
- Flowable 数据库表结构 ACT_HI_VARINST
- .Net Core下使用 RSA
- NYOJ39-水仙花数
- 【ant项目构建学习点滴】--(3)打包及运行jar文件
- MATLAB画频率响应曲线(幅频特性和相频特性)并将横坐标转换为赫兹hz单位
- 平均数、中位数、众数,在分析中如何使用?
- 【广告算法工程师入门 26】机制设计-考虑客户ROI的机制设计方法与实践
- “匠心之韵,数据之美”之InfoQ专访COO叶谦:解读全域大数据战略背后的技术演进...
- 经过本人盘点与细数,总结出个人云存储与传统网盘五大差别
- Python爬虫自学笔记(三)动态网页爬取
热门文章
- python模块讲解_python模块详解
- React Hooks的使用(三)——useRef、useImperativeHandle、useLayoutEffect解析、自定义Hook
- Java 文件 IO 操作
- LeetCode 1723. 完成所有工作的最短时间(DFS+剪枝 / 状态压缩DP)
- 天池在线编程 2020年9月26日 日常周赛题解
- LeetCode 145. 二叉树的后序遍历(后序遍历总结)
- LeetCode 17. 电话号码的字母组合(回溯)
- mysql1033错误存储引擎_MySQL Innodb存储引擎因为缓存配置出现的错误
- c语言格式错误pe,C语言PE文件filebuffer到imagebuffer的错误
- EMNLP'21 | 让压缩语言模型自动搜索最优结构!