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插件,是它们在中国 ...
随机推荐
- RSA非对称加密算法实现：Java
RSA是1977年由罗纳德·李维斯特(Ron Rivest).阿迪·萨莫尔(Adi Shamir)和伦纳德·阿德曼(Leonard Adleman)一起提出的.当时他们三人都在麻省理工学院工作.RSA ...
- Centos 修改环境变量
环境变量文件路径 添加一个X变量,在etc/profile 尾部添加 X=12345即可 输入命令 vim /etc/profile 变量生效 source /etc/profile 测试结果
- C语言 生成一个随机数
随机数的生成 有缺陷的生成方式 生成随机数可以使用 <stdlib.h> 里的 int rand(void); 函数实现! 注释: C语言中还有一个 random() 函数可以获取随机数, ...
- 微软的Serialize和Newtonsoft的SerializeObject比较
微软的序列化反序列化组件出来已有好几年了,刚出来的时候各种吐槽.最近在优化代码,比较了一下微软的Serialize和Newtonsoft的SerializeObject,感觉大部分场景下可以用微软的序 ...
- 【Java】子类实例化过程
子类对象实例化的全过程 子类继承父类以后,就获取了父类中声明的属性或方法.创建子类的对象,在堆空间中,就会加载所有父类中声明的属性. 当我们通过子类的构造器创建子类对象时,我们一定会调用其父类的构造器 ...
- 网络编程-TCP连接的建立与终止
TCP是一个面向连接的协议.无论哪一方向另一方发送数据之前,都必须先在双方之间建立一条连接. 1.建立连接 请求端(通常称为客户)发送一个 SYN 段指明客户打算连接的服务器的端口,以及初始序号( I ...
- 带你读AI论文丨RAID2020 Cyber Threat Intelligence Modeling GCN
摘要:本文提出了基于异构信息网络(HIN, Heterogeneous Information Network)的网络威胁情报框架--HINTI,旨在建模异构IOCs之间的相互依赖关系,以量化其相关性 ...
- 【VictoriaMetrics】vm-select源码阅读
调用层次表格 源文件 行号 函数 说明 app/vmselect/main.go 63 main 入口 92行调用 requestHandler app/vmselect/main.go 132 -r ...
- Mysql 死锁分析
1. 结论 死锁检查机制 当事务A需要获取一个行锁时(例如更新一行数据),假如需要获取行1的锁 检查其他事务有没有已获取了行1的锁. 如果有,例如事务B已获取了行1的锁. 继续检查事务B在等待的锁,如 ...
- golang中的排序算法实现
1. 冒泡排序算法实现 package main import "fmt" func main() { values := []int{3, 98, 55, 46, 22, 3, ...