HTML
一 概念
html:html 文件根标签
head:编写页面相关的属性
title:页面标题
body:页面内容展示信息
二 DOM 树:
所有的标签都是 html 的子标签
head 和 body 是兄弟标签,同一级别
head 和 title 为父子标签
1.第一个程序
html
<html>
<head>
<title>标题</title>
</head>
<body>
hello world
</body>
</html>
三 快速生成代码框架
!+ 回车
快速生成的模板:
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
数字越大,则字体越小
html
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
3.段落标签
html
<p>段落1</p>
<p>段落2</p>
<p>段落3</p>
<p>段落4</p>
4.换行标签
默认换行标签换行之后间隙比段落标签间隙要小
html
<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 照片
html
<img src="照片路径" />
(2)绝对路径
图片路径
html
<img src="照片路径" />
网络上的图片资源
html
<img src="照片路径" />
2.src 属性
(1)alt 属性
html
<img src="照片路径" alt="此照片加载失败" />
(2)title 属性
html
<img src="照片路径" title="这是图片的标题" />
(3)width/heigh 控制宽度高度
高度和宽度一般改一个就行,另外一个会等比缩放,否则就会造成图片失衡。
html
<img src="照片路径" height="100px" />
(4)border 属性 边框
html
<img src="照片路径" border="10px" />
7.a 标签
- href:必须具备,表示点击后会跳转到那个页面
- target:打开方式,默认是_self,,如果是_blank 则用新标签页打开
1. href
html
<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
是否打开新页面
默认就是在当前页面打开新页面
html
<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+向下 直接将选中的内容向下复制
- 边框:
html
<table border="10px"></table>
- 大小:
html
<table width="500" height="300"></table>
- 单元格之间的间距:
html
<table cellspacing="0"></table>
- 内容距离边框的距离:
html
<table cellpadding></table>
- 控制表格整体位置:
html
<table align="center"></table>
<!--left center right-->
- 表头区域 thead
thead 中的内容是居中+加粗表示
html
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
- 表格内容区域 tbody
html
<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>
- 单元格合并
行合并:
html
<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>
列合并:
html
<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
html
<body>
<h1>这是无序列表</h1>
<ul>
<li>这是内容1</li>
<li>这是内容2</li>
<li>这是内容3</li>
<li>这是内容4</li>
</ul>
</body>
(1).属性
type
- disc 无序列表默认的实心圆点
- square 实心黑方块
- circle 空心圆圈
html
<body>
<h1>这是无序列表</h1>
<ul type="circle">
<li>这是内容1</li>
<li>这是内容2</li>
<li>这是内容3</li>
<li>这是内容4</li>
</ul>
</body>
2.有序列表
ol li
html
<h1>这是有序列表</h1>
<ol>
<li>这是内容1</li>
<li>这是内容2</li>
<li>这是内容3</li>
<li>这是内容4</li>
</ol>
(1).属性
type
- a 表示小写英文字母编号
- A 表示大写英文字母编号
- i 表示小写罗马字母编号
- I 表示大写罗马字母编号
- 1 表示数字编号(默认)
html
<h1>这是有序列表</h1>
<ol type="I">
<li>这是内容1</li>
<li>这是内容2</li>
<li>这是内容3</li>
<li>这是内容4</li>
</ol>
start
- 决定从那个数字开始计数
html
<h1>这是有序列表</h1>
<ol type="I" start="2">
<li>这是内容1</li>
<li>这是内容2</li>
<li>这是内容3</li>
<li>这是内容4</li>
</ol>
3.自定义列表
dl dt dd
html
<h1>自定义列表</h1>
<h1>自定义列表</h1>
<dl>
<dt>我的朋友们
<dd>老三</dd>
<dd>王五</dd>
<dd>mike</dd>
</dt>
</dl>
10.表单标签
form
用表单标签来完成服务器的一次交互
分为两个部分
- 表单域:包含表单元素的区域重点是 form 标签。
- 表单控件:输入框,提交按钮等,重点是 input 标签。
1.属性
(1)action
html
<form action="服务器地址"></form>
(2)input
文本框
html
<input type="text" />
-
单行输入
html<form action="">姓名<input type="text" /></form>
密码框
html
<form action="">密码<input type="password" /></form>
单选框
-
单选
此时还不是单选框,男女都可以选
html<form action="">性别<input type="radio" />男 <input type="radio" />女</form>
name="gender"相等的只能选其中的一个
html<form action=""> 性别<input type="radio" name="gender" />男 <input type="radio" name="gender" />女 </form>
默认开始选择,checked="checked"所在的地方就是默认值
html<form action=""> 性别<input type="radio" name="gender" checked="checked" />男 <input type="radio" name="gender" />女 </form>
复选框
-
多选
html<form action=""> 爱好<input type="checkbox" />吃饭 <input type="checkbox" />睡觉 <input type="checkbox" />玩游戏 </form>
普通按钮
html
<form action="">
<input type="button" value="这是一个普通按钮" />
</form>
-
应用
点击后弹出 hello
html<input type="button" value="这是一个普通按钮" onclick="alert('hello')" />
提交按钮
提交按钮必须放到 form 标签内,点击后就会尝试给服务器发送
html
<form action="">
<input type="submit" />
</form>
-
目标网址为百度一下
html<form action="http://www.baidu.com"> 用户名<input type="text" name="user" /> <br /> 密码<input type="password" /> <br /> <input type="submit" /> </form>
-
重置按钮 reset
html<form action="http://www.baidu.com"> 用户名<input type="text" name="user" /> <br /> <input type="submit" /> <input type="reset" /><!--重置按钮--> </form>
选择文件(提交文件)
html
<form action="http://www.baidu.com">
<input type="file" />
</form>
(3)label
通常与 input 搭配使用
html
<label for="存放关联的id">文本</label>
例如:
html
<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 表示默认选择那个选项
html
<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:高
html<textarea name="" rows="30" cols="10"></textarea>
11.无语义标签 div&span
-
div 标签,divsion 的缩写,含义是 分割
-
span 标签 含义是 跨度
-
div 是独占一行,是一个大盒子
-
span 是不独占一行,是一个小盒子
无语义标签无固定用途
拿着这个标签啥都可以干