01.01_网页开发基础知识
- 代码编写工具
- python PyCharm Subline iPython。。。
- HTML HBulider Dreamweaver WebStorm Eclipse。。。
- 网页内容
- html
- head 设置信息
- title 标题
- script 引入JavaScript代码
- link 引入css样式表
- meta 说明/配置
- 。。。
- body 展示具体内容
- div 块级元素 分割网页形成不同模块
- ol
- li
- a
- img
- h2
- 。。。 。。。
- head 设置信息
- html
- 网站开发过程
- 客户提需求 --> 产品分析需求，做出原型 --> 需求技术讨论 --> UI/前端/后端/… --> 测试 --> 上线 --> 运维 --> 市场宣传
01.02_html简介
- HTML
- head
- js 动作 == 具体动作–动画–交互
- css 修饰网页内容 == 皮肉/衣服
- body
- html标签
- 网页内容 == 人的骨架
- html标签
- head
- 第一个HTML程序
<!DOCTYPE html>
<html>
<head>
<title>HelloWorld</title>
<meta charset="utf-8">
</head>
<body>
<h1>我的第一个HTML程序</h1>
</body>
</html>
- HTML代码规范
- 文件名
- 由数字，英文，下划线，$组成
- 不要以数字开头
- 不要用中文命名
- 标签
- 根据功能命名
- 大驼峰命名法
- 下驼峰命名法
- 下划线命名
- 中划线命名
- 。。。
- 文件名
01.03_html常用的标签
- 注释
-
< !-- 这是来自古诗文网的一首诗词 -->
- 快捷键 Ctrl + /
- 单行注释和多行注释写法相同
-
- 文字相关
- font
- size 尺寸，字符尺寸最大为7，超过这个标号还是7
- color
- 英文表示颜色
- RGB：16进制表示颜色
- R == Red
- G == Green
- B == Blue
- 用16进制从0开始，到F结束
- p
- 段落标签
- 每一个p标签自成一段，如果内容超出一行会自动换行，还在本段落中
- strong
- 加粗
- < strong>疑是地上霜
- hr
- 一条横线
- 属性
- size
- color
- width
- align
- 。。。
- s
- 删除标记
- u
- 下划线
- i
- 斜体
- 可以和其他标签混合使用
- em
- 斜体
- pre
- 原文显示
- br/
- blockquote
- 自动缩进
- font
- 标题
- hn
- n 可以是1–6，超出范围没有任何效果
- 属性
- color 调整颜色
- font-size 可以调整大小
- height 调整本行高度
- width
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<h1 style="color: red;height: 100px;">标题01</h1>
<h2>标题02</h2>
<h6>标题06</h6>
<h7>标题07</h7>
标题08
</body>
</html>
- 字符实体
- 空格:
- 乘号: ×
- 除号: ÷
- … …
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<p> 1）连写式命名法，如 helloworld
2）中线命名法，如：hello-world（目前采用此方法的较多，建议采用）
3）下划线命名法，如：hello_world
4）骆驼命名法，如：helloWorld
5）帕斯卡命名法，如：HelloWorld
6）其他方法。 </p>
<p>2×3=6</p>
<p>2x3=6</p>
<p>6÷3=2</p>
<p>6/3=2</p>
<p>< br >的作用是换行</p>
<p><br>的作用是换行</p>
<p>©copyright-2010-1019</p>
</body>
</html>
- 图片
- img
- 属性
- width
- 定义图片在页面占用的宽度
- 如果只写了宽或者高中的一个，name图片会按比例缩放
- 如果宽和高都定义了，那就显示具体的款和高
- height
- 像素
- 单位px，具体的尺寸
- 百分比
- 参照当前浏览器页面的，50%就是浏览器宽度的一半，其他参数也是这样
- 像素
- alt
- 图片加载失败时显示的文字
- src
- 相对路径
- 绝对路径
- title
- 光标悬浮在图片上显示的内容
- 如果图片加载失败并且没有设置alt，那么会显示title属性的内容
- width
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<img src="img/pic01.jpg" alt="">
<font size="6" color=""></font>
</body>
</html>
- 超链接
- a
- 属性
- href
- 网络/本地连接
- target
- _self 在当前页面加载新的网页
- _blank 打开新的页面加载网页
- name
- 使用name下锚点，后面的超链接可以指向这个位置
- < a name=“middle”>
- < a href="#middle">返回中部
- href
- 段落
- p
- 块
- span
- 使用style修饰属性
- 宽和高设置失败：需要使用display:block转变为块级元素
- span
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<a name="top"></a>
<a href="http://www.baidu.com">百度一下，你就知道</a>
<a href="http://www.baidu.com">
<img src="img/bd_logo1.png" title="百度一下，你就知道"/>
</a>
<img src="img/pic01.jpg"/>
<a name="middle"></a>
<a href="#">无效点击</a>
<a href="03.转义字符.html" target="_self">转义字符</a>
<a href="www.baidu.com">百度一下，你就知道</a>
<a href="#top">返回顶部</a>
<a href="#middle">
<font size=6 color="red">
返回中部
</font>
</a>
<span style="background: red; color: blue; width: 300px; display: block; line-height: 50px">
span渡荆门送别
唐代：李白
渡远荆门外，来从楚国游。
山随平野尽，江入大荒流。
月下飞天镜，云生结海楼。
仍怜故乡水，万里送行舟。
</span>
</body>
</html>
- 原文显示
- pre
- 列表
- 自定义列表
- dl area 列表区域
- dt title 标题
- dd context 内容
- 有序列表
- ol area 列表区域
- type
- 有1,a,i,I,A五种，如果输入其他则使用默认值1
- type
- li context 列表item
- ol area 列表区域
- 无序列表
- ul area
- type
- 有circle，square，disc三种，默认使用disc(实心圆)
- type
- li context 列表item
- ul area
- 自定义列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- 有序列表 ol
无序列表 ul
自定义列表 dl
-->
<ol type="I">
<li>市场部</li>
<li>研发部</li>
<li>行政部</li>
<li>财务部</li>
<li>人力资源部</li>
</ol>
<ol type="a">
<li>市场部</li>
<li>研发部</li>
<li>行政部</li>
<li>财务部</li>
<li>人力资源部</li>
</ol>
<ol type="5">
<li>市场部</li>
<li>研发部</li>
<li>行政部</li>
<li>财务部</li>
<li>人力资源部</li>
</ol>
<ul type="circle">
<li>HTML</li>
<li>Python</li>
<li>Java</li>
<li>UI</li>
<li>BigData</li>
</ul>
<ul type="square">
<li>HTML</li>
<li>Python</li>
<li>Java</li>
<li>UI</li>
<li>BigData</li>
</ul>
<ul type="disc">
<li>HTML</li>
<li>Python</li>
<li>Java</li>
<li>UI</li>
<li>BigData</li>
</ul>
<dl>
<dt>武侠名著
<dd>笑傲江湖</dd>
<dd>天龙八部</dd>
<dd>书剑恩仇录</dd>
<dd>雪山飞狐</dd>
<dd>鹿鼎记</dd>
</dt>
</dl>
</body>
</html>
- 音频：audio
- src 资源位置：相对路径、绝对路径
- autoplay 自动播放
- controls 控制
- loop 循环
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<audio src="audio/BEYOND_xihuanni.mp3" autoplay loop controls/>
</body>
</html>
- 视频：video
- src 资源位置：相对路径、绝对路径
- autoplay 自动播放
- controls 控制
- loop 循环
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<video src="video/MovieTest.mp4" autoplay controls loop></video>
</body>
</html>
- 表格：table
- 属性：
- width
- height
- align
- border
- bgcolor 背景色
- border-color 表格边线颜色
- 标签
- table
- caption 标题
- tr 行
- td 列
- th 加粗的列
- tbody 不用编写，网页里有时候回看到
- 属性
- width 宽度
- height 高度
- border 表格边线
- bordercolor 边线颜色
- cellspacing 表格内元素和表格编剧
- align 摆放位置
- 属性：
- 合并单元格
- rowspan 合并行
- colspan 和并列
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table border="1" width="500px" height="300px">
<caption>英雄榜</caption>
<tr style="height: 150px; color: red;"align="center">
<td width="80px">天龙八部</td>
<td width="70px">乔峰</td>
<td width="70px">段誉</td>
<td>虚竹</td>
<td rowspan="2">慕容复</td>
</tr>
<tr>
<td >射雕英雄传</td>
<td>杨过</td>
<td>黄蓉</td>
<td>东邪</td>
</tr>
<tr>
<td>少林寺</td>
<td>圆寂法师</td>
<td colspan="2">通济大师</td>
<td>圆通法师</td>
</tr>
</table>
</body>
</html>