wordpress企业网站制作视频教程怎么开发一款app软件
HTML
一 概念
html:html 文件根标签
head:编写页面相关的属性
title:页面标题
body:页面内容展示信息
二 DOM 树：
所有的标签都是 html 的子标签
head 和 body 是兄弟标签，同一级别
head 和 title 为父子标签
1.第一个程序
<html><head><title>标题</title></head><body>hello world</body>
</html>
三 快速生成代码框架
！+ 回车
快速生成的模板：
<!DOCTYPE html>
<!-- 指定当前html版本为5 -->
<html lang="en"><!--指定当前页面为英文--><head><meta charset="UTF-8" /><!--浏览器解码规则--><meta name="viewport" content="width=device-width, initial-scale=1.0" /><!--移动端适配--><title>Document</title></head><body></body>
</html>
四 html 的标签
1.注释标签
ctrl+/ 一行变为注释
2.标题标签 h1-h6
数字越大，则字体越小
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
3.段落标签
<p>段落1</p>
<p>段落2</p>
<p>段落3</p>
<p>段落4</p>
4.换行标签
默认换行标签换行之后间隙比段落标签间隙要小
<br />规范 <br />不规范
5.格式化标签
(1)加粗标签
<strong>加粗</strong>
<b>加粗</b>
(2)倾斜标签
<em>倾斜</em>
<i>倾斜</i>
(3)删除线标签
<del>倾斜</del>
<s>倾斜</s>
(4)下划线标签
<ins>倾斜</ins>
<u>倾斜</u>
6.图像标签
1.img 标签
src 属性
img 标签必须搭配 src 来使用，src 是用来指定照片路径
(1)相对路径
./xxx.png 当前路径的 xxx 照片
./img/xx.png 当前路径的 img 文件夹下 xxx 照片
…/xx.png 上一个路径的 xxx 照片
<img src="照片路径" />
(2)绝对路径
图片路径
<img src="照片路径" />
网络上的图片资源
<img src="照片路径" />
2.src 属性
(1)alt 属性
<img src="照片路径" alt="此照片加载失败" />
(2)title 属性
<img src="照片路径" title="这是图片的标题" />
(3)width/heigh 控制宽度高度
高度和宽度一般改一个就行，另外一个会等比缩放，否则就会造成图片失衡。
<img src="照片路径" height="100px" />
(4)border 属性 边框
<img src="照片路径" border="10px" />
7.a 标签
- href：必须具备，表示点击后会跳转到那个页面
- target：打开方式，默认是_self，，如果是_blank 则用新标签页打开
1. href
<a href="网址">文字内容</a><a href="#">不做任何跳转，只在当前页面</a><a href="http://www.baidu.com"><!--通过图片的超链接--><img src="https://www.baidu.com/img/flexible/logo/pc/result.png" alt="" />
</a>
2. target
是否打开新页面
默认就是在当前页面打开新页面
<a href="www.baid.com" target="_blank"></a><a href="www.baid.com" target="_self"></a>
8.表格标签
- table：表示整个表格
- tr：表示表格的一行
- td：表示一个单元格
- th：表示表头的单元格。会居中加粗
- thead：表格的头部区域(与 th 区分，范围比 th 大)
- tbody：表格的内容区域
table 包含 tr；tr 包含 td 或者 th
shift+alt+向下 直接将选中的内容向下复制
- 边框：
<table border="10px"></table>
- 大小：
<table width="500" height="300"></table>
- 单元格之间的间距：
<table cellspacing="0"></table>
- 内容距离边框的距离：
<table cellpadding></table>
- 控制表格整体位置：
<table align="center"></table>
<!--left center right-->
- 表头区域 thead
thead 中的内容是居中+加粗表示
<thead><tr><th>姓名</th><th>性别</th><th>年龄</th></tr>
</thead>
- 表格内容区域 tbody
<tbody><tr><td>张三</td><td>男性</td><td>12</td></tr><tr><td>李四</td><td>女性</td><td>4</td></tr><tr><td>王五</td><td>女性</td><td>56</td></tr>
</tbody>
- 单元格合并
行合并：
<tbody><tr><td>张三</td><td rowspan="2">男性</td><td>12</td></tr><tr><td>李四</td><!-- <td>男性</td> --><td>4</td></tr><tr><td>王五</td><td>女性</td><td>56</td></tr>
</tbody>
列合并:
<tbody><tr><td>张三</td><td>男性</td><td>12</td></tr><tr><td>李四</td><td>男性</td><td>4</td></tr><tr><td colspan="2">王五</td><td>女性</td><td>56</td></tr>
</tbody>
9.列表标签
- 无序列表: ul li
- 有序列表：ol li
- 自定义列表：dl(总标签) dt(小标题) dd(围绕标题来说明)
1.无序列表
ul li
- 快捷键：ul>li*4
<body><h1>这是无序列表</h1><ul><li>这是内容1</li><li>这是内容2</li><li>这是内容3</li><li>这是内容4</li></ul>
</body>
(1).属性
type
- disc 无序列表默认的实心圆点
- square 实心黑方块
- circle 空心圆圈
<body><h1>这是无序列表</h1><ul type="circle"><li>这是内容1</li><li>这是内容2</li><li>这是内容3</li><li>这是内容4</li></ul>
</body>
2.有序列表
ol li
<h1>这是有序列表</h1>
<ol><li>这是内容1</li><li>这是内容2</li><li>这是内容3</li><li>这是内容4</li>
</ol>
(1).属性
type
- a 表示小写英文字母编号
- A 表示大写英文字母编号
- i 表示小写罗马字母编号
- I 表示大写罗马字母编号
- 1 表示数字编号(默认)
<h1>这是有序列表</h1>
<ol type="I"><li>这是内容1</li><li>这是内容2</li><li>这是内容3</li><li>这是内容4</li>
</ol>
start
- 决定从那个数字开始计数
<h1>这是有序列表</h1>
<ol type="I" start="2"><li>这是内容1</li><li>这是内容2</li><li>这是内容3</li><li>这是内容4</li>
</ol>
3.自定义列表
dl dt dd
<h1>自定义列表</h1>
<h1>自定义列表</h1>
<dl><dt>我的朋友们<dd>老三</dd><dd>王五</dd><dd>mike</dd></dt>
</dl>
10.表单标签
form
用表单标签来完成服务器的一次交互
分为两个部分
- 表单域：包含表单元素的区域重点是 form 标签。
- 表单控件：输入框，提交按钮等，重点是 input 标签。
1.属性
(1)action
<form action="服务器地址"></form>
(2)input
文本框
<input type="text" />
-
单行输入
<form action="">姓名<input type="text" /></form>
密码框
<form action="">密码<input type="password" /></form>
单选框
-
单选
此时还不是单选框，男女都可以选
<form action="">性别<input type="radio" />男 <input type="radio" />女</form>name="gender"相等的只能选其中的一个
<form action="">性别<input type="radio" name="gender" />男<input type="radio" name="gender" />女 </form>默认开始选择,checked="checked"所在的地方就是默认值
<form action="">性别<input type="radio" name="gender" checked="checked" />男<input type="radio" name="gender" />女 </form>
复选框
-
多选
<form action="">爱好<input type="checkbox" />吃饭 <input type="checkbox" />睡觉<input type="checkbox" />玩游戏 </form>
普通按钮
<form action=""><input type="button" value="这是一个普通按钮" />
</form>
-
应用
点击后弹出 hello<input type="button" value="这是一个普通按钮" onclick="alert('hello')" />
提交按钮
提交按钮必须放到 form 标签内，点击后就会尝试给服务器发送
<form action=""><input type="submit" />
</form>
-
目标网址为百度一下
<form action="http://www.baidu.com">用户名<input type="text" name="user" /><br />密码<input type="password" /><br /><input type="submit" /> </form> -
重置按钮 reset
<form action="http://www.baidu.com">用户名<input type="text" name="user" /><br /><input type="submit" /><input type="reset" /><!--重置按钮--> </form>
选择文件(提交文件)
<form action="http://www.baidu.com"><input type="file" />
</form>
(3)label
通常与 input 搭配使用
<label for="存放关联的id">文本</label>
例如:
<label for="male">男</label>
<input type="radio" name="sex" id="male" />
<label for="female">女</label>
<input type="radio" name="sex" id="female" />
(4)select
通常搭配 option 使用
- option 标签
属性:
selected 表示默认选择那个选项
<select name="" id=""><option valut="">--请选择年份--=</option><option valut="" selected>--1990--=</option><!--selected表示默认选择哪一个--><option valut="">--1991--=</option><option valut="">--1992--=</option><option valut="">--1993--=</option><option valut="">--1994--=</option>
</select>
(5)textarea
-
属性
rows:长
cols:高<textarea name="" rows="30" cols="10"></textarea>
11.无语义标签 div&span
-
div 标签，divsion 的缩写，含义是 分割
-
span 标签 含义是 跨度
-
div 是独占一行，是一个大盒子
-
span 是不独占一行，是一个小盒子
无语义标签无固定用途
拿着这个标签啥都可以干
12.HTML 特殊字符
空格：
小于号：<
大于号：>
按位与：&
