WEB前端开发--2（HTML基础）
HTML基础
HTML不分大小写
1.HTML概述
HTML(HyperText MarkUp Language)“超文本标记语言”，他是制作网页的标准语言
1.1 标签——元素
由尖括号包围，比如<title>，通常是成对出现
例如：<title> 百度一下，你就知道 </title>
开始标签 内容 结束标签
单独出现的标签：<img /> 图片标签单独出现
1.2 标签——嵌套
<html><body></body></html> ——正确
<html><body></html></body> ——错误
HTML语言中规定标签一定得有正确的嵌套关系，且要注意缩进，类似python。
标签嵌套关系可以用HTML DOM树表示.
1.3 标签——属性
<img src="logo.jpg" alt="站标" />
上面这句代码中有 src属性和alt属性两个属性。
一个标签可能由多个个属性，属性的先后顺序无关
2.文件
2.1 23文件结构
——————————
<html>
<head>
<title></title>
</head>
</html>
——————————
在最外层有一对<html>标签，表示此部分由html来规范
<head> 头部信息：浏览器、搜索引擎所需要信息，会出现在网页标题(标签)栏里
<body> 主体部分：网页中包含的具体内容
2.2 HTML 编辑器
记事本 / Sublime Text3 / Webstorm
2.3 HTML5 的文件结构
——————————————
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> </title>
</head>
<body>
<body>
</html>
—————————————
增加部分：
<!DOCTYOE html> 表示当前文档类型符合HTML5标准
lang 属性：搜索引擎 —— en英文 zh中文
<meta> ：元数据（作者，关键字等等数据）
charset属性：字符集编码方式——浏览器UTF-8是国际编码
2.4 字符集与编码
字符(Character): 文字、符号——123 abc 一二三 !?$#
字符集(Charset): 字符的集合——英文字符集、汉字字符集、日文汉字字符集
编码：将字符和二进制码对应起来
编码方式： ASCII：数字、英文字母、符号进行了编码
GB2312：简体中文
Unicode：所有语言、占用空间较大
UTF-8：所有语言、占用空间较小
2.5 乱码问题
源文件保存时编码与源文件声明<meata charset="编码方式">不一致就会出现乱码问题
3.HTML标签
3.1 标题标签h1~h6 一个页面建议只有一个h1
——————————————
<h1>一级标题 heading 1</h1>
<h2>二级标题 heading 2</h2>
<h3>三级标题 heading 3</h3>
<h4>四级标题 heading 4</h4>
<h5>五级标题 heading 5</h5>
<h6>六级标题 heading 6</h6>
这里是正文文字
——————————————
3.2 段落p
——————————————
<p>这是段落，每个段落自动换行。</p>
<p>这是段落，每个段落自动换行。</p>
<p>这是段落，每个段落自动换行。 空格，
也不会显示空行， 且不会换行
——————————————
输出：
————————————————————————————
这是段落，每个段落自动换行。
这是段落，每个段落自动换行。
段落内部文字忽略连续 空格， 也不会显示空行，且不会换行
————————————————————————————
空行和多个连续空格在段落内部都会只生成一个空格
3.3 段内换行 <br/>
<br/> 为单独出现的标签，直接结束
读到<br/>标签自动换行，类似于\n
3.4 空格字符
为特殊字符，全小写
——————————————————————————————
<body>
<p>段落内部文字忽略连续 空格，
<br/>
也不会显示空行，且不会换行
</p>
</body>
——————————————————————————————
输出：
——————————————————————————————
段落内部文字忽略连续 空格，
也不会显示空行，且不会换行
——————————————————————————————
3.5 预留格式pre
定义预格式化的文本，在pre标签内部，所有内容都会被保留源格式。
——————————————————————————————
<body>
<pre>
这是预留格式文本 它保留了 空格
和空行
</pre>
<p>pre 标签很适合显示计算机代码 </p>
<pre>
for i=1 to 10
print i
next i
</pre>
<body>
——————————————————————————————
3.6 行内组合span
组合行内元素，以便通过CSS样式来格式化
——————————————————————————————
<style type="text/css">
span{
color : blue;
font-wieight : bold;
}
</style>
<p> 最新<span>中国人口调查报告显示</span>显示</p>
——————————————————————————————
3.7 水平线<hr/>
——————————————————————
<p>正文段落</p>
<hr />
<p>正文段落</p>
——————————————————————
3.8 注释内容标签 <!-- 注释内容 -->
——————————————————————
<body>
<!-- 这是一段注释-->
<!-- 注释可以
跨行 -->
</
<body>
——————————————————————
3.9 超链接 <a>
<a href="网址"> 文字或图片 </a>
分类：
链接到本站点的其他网页：
<a href="news.html"> 新闻 </a>
链接到其他站点的网页：
<a href="http://www.baidu.com"> 百度 </a>
虚拟超链接：
<a href='#'> 板块2 </a> ——还没设置好超链接时用虚拟超链接替代
举例：
【index.html】
——————————————————————————
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<title>Doucment</title>
</head>
<body>
<h1>首页</h1>
<h2>导航</h2>
<a href="news.html"> 新闻 </a>
<a href="technology.html"> 科技 </a>
<a href="http://www.baidu.com"> 问问百度 </a>
</body>
</html>
————————————————————————————
【news.html】
———————————————————————————————
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> 新闻 </title>
</head>
<body>
<h1> 新闻板块 </h1>
<p><a href="#">五年来###这样论述"一带一路"</a></p>
<p><a href="#">关于中非合作 ###这些提法有深意</a></p>
<p><a href="#">专家学者高度评价###提出的"五不""四不能"</a></p>
<p><a href="#">###将赴俄出席东方经济论坛并与普京会晤</a></p>
<p><a href="#">人命日报：让能干事者有舞台 中国方案 专题</a></p>
<p><a href="#">中国人当心 又来了两则中美贸易战的宣言</a></p>
</body>
</html>
————————————————————————————————
【technology.html】
—————————————————————————————————————
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> 科技 </title>
</head>
<body>
<h1> 科技板块 </h1>
<p><a href="#">颜宁课题组70天里发3篇Sciense</a></p>
<p><a href="#">不良反应≠疫苗一定有问题</a></p>
<p><a href="#">自如事件：无限放大的甲醛恐慌</a></p>
<p><a href="#">超越基因的遗传： 你遗传给后代的也许不只是基因信息</a></p>
<p><a href="#">科学大家 |如何治愈癌症：个性化精准医疗将发挥大作用</a></p>
<p><a href="#">美国无人太空飞机执行第五次任务已一年 目的仍未知</a></p>
</body>
</html>
——————————————————————————————————————
3.10 图像
3.10.1 图像格式
常见图像格式有：JPG，PNG，GIF
JPG：有损压缩的图像格式，支持色彩丰富的图片
GIF ：简单动画背景透明
PNG: 无损压缩，透明、交错、动画
3.10.2 插图图像 <img />
<img src="w3school.gif">
img标签有两个重要属性：src属性 、 alt属性
src属性：图像路径+文件名
alt属性：当图像由于某种原因未打开时，图像的替换文本
3.10.3 绝对路径与相对路径
绝对路径：以根目录为基准<img src="C:/site/logo.gif" />
相对路径：以该文档所在位置为基准<img src="logo.gif" />
同级文件夹中：<img src="data:images/logo.gif" />
上级文件夹中：<img src="../logo.gif" />
3.11 区域div
——————————————
<div align="center"> # align=center 居中
<h1>web 前端开发</h1>
<p>HTML</p>
<p>CSS</p>
<p>JavaScript</p>
</div>
——————————————
3.12 列表
3.12.1 无序列表 <ul> <li>
可以将多个超链接变成列表项，存储为无序列表。
————————————————————————————————
<h1>Web 前端开发</h1>
<u1>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</u1>
————————————————————————————————
3.12.2 有序列表 <ol> <li>
例如排行榜，有些地方先后顺序很重要，故采用有序列表
————————————————————————————————
<h1>web 前端开发</h1>
<ol>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ol>
————————————————————————————————
3.13 表格 table tr td th
以表格的方式呈现信息
table——表 tr——表格行 td——普通单元格 th——表头单元格
————————————————————————————————
<table border="1">
<tr>
<td>red</td>
<td>yellow</td>
</tr>
<tr>
<td>blue</td>
<td>green</td>
</tr>
</table>
————————————————————————————————
3.14 表单与表单元素
表单：是一个区域，用于采集用户信息
表单元素：文本框、按钮、单选、复选、下拉列表、文本域
3.14.1 表单 <form>
action属性：表示收集来的数据交于哪个网页处理（后端范畴）
————————————
<form action="数据处理网页">
表单元素
</form>
————————————
3.14.2 文本框、密码框input
text与password的区别： text明文显示，password则是用星号显示
name属性为信息地址
——————————————————————————————
<form>
账户：<input type="text" name="userName" />
<br />
密码：<input typy="password" name="userPsd" />
</form>
——————————————————————————————
3.14.3 按钮 input——
按钮：提交按钮、重置按钮
type：提交按钮——submit 重置按钮——reset
value：按钮表面的文字
——————————————————————————
<form>
爱好：
<input type="text">
<input type="submit" value="确定" />
<input tyoe=“reset” value=“重置” />
</form>
——————————————————————————
3.14.4 单选框、复选框input——radio checkbox
单选框：只能选则一项 复选框：任意选择多项
type：单选框——eadio 复选框——checkbox
value：表示要提交到后端的数据
name：当前这一项的名称（单选框name值相同，复选框name值不同）
checkd：当前这一项是否被默认选择，一般为第一项
——————————————————————————————————
<form>
性别：
男 <input type="radio" value="boy" name="gender" checkd="checked" />
女 <input type="radio" value="girl" name="gender" />
<br />
爱好：
<input type="checkbox" value="1" name="music" checkd="checked" /> 音乐
<input type="checkbox" value="2" name="sport" /> 体育
<input type="checkbox" value="3" name="reading" /> 阅读
</form>
——————————————————————————————————
3.14.5 下拉列表框 selected option
selected="selected" 即为被选择的一项
——————————————————————
<select>
<option> 选项1 </option>
<option selected="selected"> 选项2 </option>
</select>
——————————————————————
3.14.6 文本域 Textarea
<textarea rows="行数" cols=“列数”> 文本 </textarea>
——————————————————————————————————
<form>
个人简介：<br >
<textarea cols="50" rows="10">
在这里输入内容
</textarea>
<br />
<input type="submit" value="确定" />
<input tyoe=“reset” value=“重置” />
</form>
——————————————————————————————————
4. web语义化
4.1 概述
Web语义化：让页面具有更好的结构与含义，从而让人和机器都能快速理解网页内容
优点：1.结构清晰，利于团队的开发、维护
2.有利于搜索引擎理解
3.SEO(Search Engine Optimization) 搜索引擎优化
4.容易兼容不同设备。
4.2 em strong 均成对使用
<em> = <i>: emphasize 斜体
<strong> = <b>：strong 加粗
4.3 dl，dt，dd
————————————————
<dl>
<dt>HTML</dt>
<dd> 超文本标记语言 </dd>
<dt>CSS<dt>
<dd>层叠样式表</dt>
</dl>
————————————————
输出：
————————————————
HTML
超文本标记语言
CSS
层叠样式表
————————————————
5. sublime 快捷键
alt+shift+2 分成两屏
alt+shift+1 回到单屏
ctrl+s 保存
ctrl+/ 注释
ctrl+shift+/ 取消注释
按下ctrl单击多处，可以多处同时编辑
配合Tab快捷键：
！ HTML5文件结构
p*4 四个段落
> 嵌套
ul>li*n 快速生成无序列表
table>tr*m>td*n 生成m*n的表格
p{段落内容} 生成含内容的段落
WEB前端开发--2（HTML基础）的更多相关文章
- 作为小白，如何学习Web前端开发？
作为一个已经写码这么多年的人,我不会告诉你我最初的时候是自学的,因为刚开始自己学真的特别无聊枯燥,实在学不下去,所以就自己报了一个培训(上元教育)的地方,毕竟是交了钱的,本着不服气的精神,硬是把自己生 ...
- WEB前端开发CSS基础样式全面总结
Web前端开发css基础样式全面总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-2 ...
- Web前端开发基础 第一天（Html和CSS）
学习web前端开发基础技术需要掌握:HTML.CSS.JavaScript语言.下面我们就来了解下这三门技术都是用来实现什么的: 1. HTML是网页内容的载体.内容就是网页制作者放在页面上想要让用户 ...
- 网络统计学与web前端开发基础技术
网络统计学与web前端开发基础技术 学习web前端开发基础技术(网页设计)需要了解:HTML.CSS.JavaScript三种语言.下面我们就来了解一下这三门技术在网页设计中的用途: HTML是网页内 ...
- 《JavaScript & jQuery交互式Web前端开发》之JavaScript基础指令
在本节中.你将開始学习阅读和编写JavaScript代码,还将学习怎样编写Web浏览器可以遵照运行的指令.在開始学习后面章节中的更复杂的概念之前.我们先学习语言的一些核心部分,然后看看怎 ...
- 零基础学习Web前端开发
目录 技术背景 开发环境 学习过程 参考资料 结束语 技术背景 什么是前端开发? 前端开发是创建Web页面或App等将界面呈现给用户的过程.通过使用 HTML,CSS,JavaScript,以及它们衍 ...
- 前端基础入门第一阶段-Web前端开发基础环境配置
Web前端和全栈的定义: A.什么是传统传统web前端:需要把设计师的设计稿,切完图,写标签和样式,实现JS的效果,简而言之即只需要掌握HTML的页面结构,CSS的页面样式,javaScript页面的 ...
- web前端开发学习内容
应该 具备的 知识技能 :懂web标准,熟练手写 xhtml css3 并符合 符合w3c标准 代码能 兼容主流浏览器.ie6.7.8.9 ff 等. ...
- Web前端开发工程师养成计划【转载】
Web前端开发工程师养成计划(入门篇) 最原始的忠告:这个世界上有想法的人很多,但是有想法又能实现它的人太少! 首先要感谢伟大的Web2.0概念.产品概念.用户体验概念.jQuery插件,是它们在中国 ...
随机推荐
- Ranger-Sqoop2插件实现详解
1.组件和插件介绍 1.1.Ranger介绍 Apache Ranger能够监控和管理整个Hadoop平台的综合数据安全, 目前作为Apache Top Level Project(TLP顶级项目), ...
- golang vue 使用 websocket 的例子
一. 编写golang服务端 1.导入必要的websocket包,golang.org/x/net/websocket 或 github.com/golang/net/websocket 2.编写消息 ...
- Nginx 全模块安装及匹配方式、反向代理和负载均衡配置
一.安装 OpenResty OpenResty 是一个基于 Nginx 与 Lua 的高性能 Web 平台,其内部集成了大量精良的 Lua 库.第三方模块以及大多数的依赖项.用于方便地搭建能够处理超 ...
- js 拟写登录页 可以拖动登录框
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- Python_time&datetime
获取常用日常时间 # encoding: utf-8 import time import datetime # 当前时间 datetime_now_time = datetime.datetime. ...
- Python_多任务：进程、线程、协程
进程 进程是一个具有一定独立功能的程序在一个数据集上的一次动态执行的过程,是操作系统进行资源分配和调度的一个独立单位,是应用程序运行的载体.进程是一种抽象的概念,从来没有统一的标准定义.进程一般由程序 ...
- scrollTop、scrollHeight与clientHeight
MDN上概念 scrollTop:获取或设置一个元素的内容垂直滚动的像素数. scrollHeight:一个元素内容高度的度量,包括由于溢出导致的视图中不可见内容. clientHeight:元素内部 ...
- redis的使用场景和优缺点
使用场景和优缺点: 2 Redis用来做什么? 通常局限点来说,Redis也以消息队列的形式存在,作为内嵌的List存在,满足实时的高并发需求.而通常在一个电商类型的数据处理过程之中,有关商品,热销, ...
- Android官方文档翻译 七 2.Adding the Action Bar
Adding the Action Bar 增加一个Action Bar(工具栏) The action bar is one of the most important design element ...
- 如何管理leader对你的能力预期？
在内网看到一个讨论帖,原文如下: 如何管理leader对你的能力预期? 你一个项目做得好,之后类似项目,leader认为你也就是合格水平,而且认为你只会做这种项目. SAD.. 思考 在开始之前先想下 ...