目录
Web概述
HTML概述
工程师职业发展
vscode安装与使用
安装
下载地址:https://code.visualstudio.com/
安装插件(安装中文插件):
安装open inbrowser、view in brower
自动换行
快捷键
web前端的三大核心技术
HTML:结构
CSS:样式
JavaScript:行为
HTML基本结构与属性
HTML:超文本 标记 语言
- 超文本:如:文本、语音、视频等
- 标记:<单词>,也叫做标签;
|- 写法分为两种:
|- 单标签 <input type="text">
|- 双标签 <header></header>
|- 标签可以嵌套
|- 标签的属性:用来修饰标签的,设置当前标签的一些功能;
|- <标签 属性1=“值2”,属性2=“值2”......>
- 语言:编程语言
范例:第一个代码
<header>hello world</header>
<footer>hi HTML</footer>
范例:标签嵌套
<header>
hello world
<div>aaaa1</div>
aaaa1
<div>bbbb</div>
<div>aaaa2</div>
</header>
范例:标签属性
<header title="hello">hello world</header>
<footer title="hi">hi HTML</footer>
HTML初始代码
初始代码
为了规范每个.html都必须要有的代码,称之为初始代码:
<!DOCTYPE html> 文档声明,告诉浏览器这是一个HTML文件
<html lang="en"> HTML文件的最外层标签,包裹所有代码,例如lang="en"表示英文的网站,lang="zh-CN"表示中文网站
<head>
<meta charset="UTF-8"> 元信息:是编写网页中的一些赋值信息
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title> 设置网页的标题
</head>
<body>
显示内容的区域
</body>
</html>
通过 !+ tab 建立
HTML注释
写法如下:
<!--这是注释内容-->
HTML语义化
所谓的HTML语义化指的是根据网页中内容的结构,选择合适的标签进行编写。
文本修饰标签
标题与段落
标题是双标签,分为六个等级:<h1></h1> ... <h6></h6>。在网页中h1标题最重要,并且一个.html中只能有一个,h5、h6一般不用;
段落是双标签:<p></p>
范例:标题
<body>
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
</body>
范例:段落
<body>
<h1>标题1</h1>
<p>这是一个段落</p>
</body>
强调(双标签):
- 加粗:<strong></strong>
- 斜体:<em></em>
下标文本与上标文本(双标签):<sub>、<sup>
删除文本与插入文本(双标签):<del>、<ins>
范例:强调
<body>
<h1>标题</h1>
<p>这是一个段落</p>
<p>
<strong>这是strong强调的文本</strong>
</p>
<p>
<em>这是em强调的文本</em>
</p>
<p>
下标:a<sub>1</sub>+b<sub>1</sub>=c<sub>1</sub>
</p>
<p>
上标:a<sup>2</sup>+b<sup>2</sup>=c<sup>2</sup>
</p>
<p>
促销:原价<del>300</del>,现价<ins>200</ins>
</p>
</body>
需要注意的是,strong的强调性更强。一般情况下删除都是和插入配合使用的。
特殊符号
图片标签与属性
图片标签(单标签):<img>,属性有:
- src:引入图片的地址,网络连接地址或者本地文件地址
- alt:当图片显示出现问题时,显示一段提示的文字
- title:提示信息
- width、height:图片大小
范例:图片网络地址
<body>
<img src="http://cms-bucket.ws.126.net/2020/0601/bf89f113j00qb81yc0024c000f000jmc.jpg" alt="图片显示出错" title="这是提示信息" width="200" height="200">
</body>
范例:图片文件本地地址
<body>
<img src="./cat.jpg" alt="图片显示出错" width="100" height="147.2" title="cat">
</body>
、
跳转
跳转连接
连接标签(双标签):<a></a>,常用属性:
- herf:跳转的连接地址
- target:可以改变连接的方式,默认情况下是在当前页面打开_sef,新窗口打开_blank
改变标签的默认行为(单标签):base,一般写到head之中,一起改变;
范例:跳转连接
<body>
<p>
<a href="https://www.baidu.com">访问百度!</a>
</p>
<p>
<a href="https://cn.bing.com/" target="_bank">
<img src="./cat.jpg" alt="图片显示出错!" width="100" height="147.2" title="cat">
</a>
</p>
</body>
范例:base
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=0, initial-scale=1.0">
<title>Document</title>
<base target="_blank">
</head>
<body>
<p>
<a href="https://www.baidu.com">访问百度!</a>
</p>
<p>
<a href="https://cn.bing.com/">
<img src="./cat.jpg" alt="图片显示出错!" width="100" height="147.2" title="cat">
</a>
</p>
</body>
</html>
跳转锚点
跳转锚点有两种实现方式:
- 实现一:#号 id属性
- 实现二:#号 name属性
范例:跳转锚点
<body>
<a href="#html">HTML</a>
<a href="#css">CSS</a>
<a href="#javascript">JavaScript</a>
<h2 id="html">HTML超文本</h2>
<p>模拟段落</p>
<p>模拟段落</p>
<p>模拟段落</p>
<p>模拟段落</p>
<p>模拟段落</p>
<p>模拟段落</p>
<p>模拟段落</p>
<a name="css"></a>
<h2>CSS</h2>
<p>模拟段落</p>
<p>模拟段落</p>
<p>模拟段落</p>
<p>模拟段落</p>
<p>模拟段落</p>
<p>模拟段落</p>
<h2 id="javascript">JavaScript</h2>
<p>模拟段落</p>
<p>模拟段落</p>
<p>模拟段落</p>
<p>模拟段落</p>
<p>模拟段落</p>
<p>模拟段落</p>
<p>模拟段落</p>
<p>模拟段落</p>
</body>
列表
列表标签
列表标签(双标签):
- 无序列表:<ul></ul> <li></li> 它们之间不允许有其他的标签。同时提供有type属性:改变前面的标记样式(一般通过CSS去控制)
- 有序列表:<ol></ol> <li></li> 用的非常少
定义列表,对列表项添加标题对标题进行描述的内容:
- <dl>:定义列表
- <dt>:定义专业术语或名词
- <dd>:对名词进行解释或描述
例如:
<dl>
<dt>HTML</dt>
<dd>超文本标记语言</dd>
</dl>
嵌套列表:列表之间可以相互嵌套形成多层级的列表。
范例:列表标签
<body>
<ul>
<li>第一项</li>
<li>第二项</li>
</ul>
<ul type="circle">
<li>第一项</li>
<li>第二项</li>
</ul>
<ol>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ol>
</body>
</html>
范例:定义列表
<body>
<dl>
<dt>HTML</dt>
<dd>超文本标记语言</dd>
<dt>CSS</dt>
<dd>层叠样式表</dd>
<dt>JavaScript</dt>
<dd>网页脚本语言</dd>
</dl>
</body>
范例:嵌套列表
<body>
<ul>
<li>
四川
<ul>
<li>成都</li>
<li>内江</li>
<li>攀枝花</li>
</ul>
</li>
<li>
云南
<ul>
<li>昆明</li>
<li>昭觉</li>
</ul>
</li>
</ul>
</body>
注意使用工具:
创建多个<li></li>
表格
表格标签
<body>
<table>
<caption>天气预报</caption>
<tHead>
<tr>
<th>日期</th>
<th>天气情况</th>
<th>出行情况</th>
</tr>
</tHead>
<tBody>
<tr>
<td>2020-5-20</td>
<td><img src="./weather1.png" alt="图片显示出错"></td>
<td>适合出行</td>
</tr>
<tr>
<td>2020-5-21</td>
<td><img src="./weather2.png" alt="图片显示出错"></td>
<td>不适合出行</td>
</tr>
</tBody>
<tFood>
</tFood>
</table>
</body>
需要注意的是:在一个table中,tBoody是可以出现多次的,但是tHead、tFood只能出现一次
表格属性
align值:left、center、right
valign值:top、middle、bottom
范例:表格
<body>
<table border="1" cellpadding="30" cellspacing="30" >
<caption>天气预报</caption>
<tHead>
<tr align="right" >
<th colspan="2">日期</th>
<th>天气情况</th>
<th>出行情况</th>
</tr>
</tHead>
<tbody>
<tr valign = "top">
<td rowspan="2">2020-5-20</td>
<td>白天</td>
<td><img src="./weather1.png" alt="图片显示出错"></td>
<td>适合出行</td>
</tr>
<tr>
<td>夜晚</td>
<td><img src="./weather1.png" alt="图片显示出错"></td>
<td>适合出行</td>
</tr>
<tr>
<td rowspan="2">2020-5-21</td>
<td>白天</td>
<td><img src="./weather2.png" alt="图片显示出错"></td>
<td>不适合出行</td>
</tr>
<tr>
<td>夜晚</td>
<td><img src="./weather2.png" alt="图片显示出错"></td>
<td>不适合出行</td>
</tr>
</tbody>
<tFood>
</tFood>
</table>
</body>
表单
表单标签
范例:表单标签
<body>
<form >
<h2>输入框</h2>
<input type="text">
<h2>密码框</h2>
<input type="password">
<h2>复选框</h2>
<input type="checkbox">苹果
<input type="checkbox">香蕉
<input type="checkbox">葡萄
<h2>单选框</h2>
<input type="radio" name="gender">男
<input type="radio" name="gender">女
<h2>上传文件</h2>
<input type="file">
<h2>提交按钮与重置按钮</h2>
<input type="submit">
<input type="reset">
</form>
</body>
范例:改进
<body>
<form >
<h2>输入框</h2>
<input type="text" placeholder="请输入用户名">
<h2>密码框</h2>
<input type="password" placeholder="请输入密码">
<h2>复选框</h2>
<input type="checkbox" checked="checked">苹果
<input type="checkbox" disabled>香蕉
<input type="checkbox">葡萄
<h2>单选框</h2>
<input type="radio" name="gender">男
<input type="radio" name="gender">女
<h2>上传文件</h2>
<input type="file">
<h2>提交按钮与重置按钮</h2>
<input type="submit">
<input type="reset">
</form>
</body>
表单相关标签
<body>
<form >
<h2>多行文本框</h2>
<textarea cols="30" rows="10"></textarea>
<h2>下拉菜单</h2>
<select>
<option selected disabled>请选择</option>
<option>北京</option>
<option>上海</option>
<option>杭州</option>
</select>
<select size="2">
<option>北京</option>
<option>上海</option>
<option>杭州</option>
</select>
<select multiple>
<option>北京</option>
<option>上海</option>
<option>杭州</option>
</select>
<input type="radio" name="gender" id="man"><label for="man">男</label>
<input type="radio" name="gender" id="woman"><label for="woman">女</label>
</form>
</body>
表格表单组合实例
<body>
<form>
<table border="1" cellpadding="30">
<tBody>
<tr align="center">
<td rowspan="4">总体信息</td>
<td colspan="2">用户注册</td>
</tr>
<tr align="right">
<td>用户名</td>
<td><input type="text" placeholder="请输入用户名"></td>
</tr>
<tr align="right">
<td>密码</td>
<td><input type="password" placeholder="输入密码"></td>
</tr>
<tr align="center">
<td colspan="2">
<input type="submit">
<input type="reset">
</td>
</tr>
</tBody>
</table>
</form>
</body>
块与内联
范例:<div>与<span>
<body>
<div style="border:1px gray solid;">
<h2><a href="#">学海<span style="color:red">无涯</span>苦作舟</a></h2>
<a href="#"><img src="./weather1.png" alt=""></a>
<p>
小鸟学飞。《礼记·月令》:“鹰乃学习。” 陈澔集说:“学习,雏学数飞也。”
《史记·秦始皇本纪》:“士则学习法令辟禁。”
</p>
<a href="#">www.baidu.com</a>
</div>
<div>
<h2><a href="#">学如逆水行舟,<span>不进则退</span></a></h2>
<a href="#"><img src="./cat.jpg" alt="" width="100" height="137.2"></a>
<p>
狭义:通过阅读、听讲、研究、观察、理解、探索、实验、实践等手段获得知识或技能的过程,是一种使个体可以得到持续变化(知识和技能,方法与过程,情感与价值的改善和升华)的行为方式。
</p>
<a href="#">www.baidu.com</a>
</div>
</body>