web基础
HTML:超文本标记语言（HyperText Markup Language，简称 HTML）
HTML 是一门标记语言，标记语言由一套标记标签组成，学习 HTML，其实就是学习标签。
HTML基本结构
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>标题</title>
</head>
<body>
</body>
</html>
HTML的标签
标签的特点：
- 尖括号包裹关键字
- 成对的标签（双标签），由开始标签和结束标签组成,
- 单标签 ，只有一个，不是成对出现（自闭合标签）
- 区分大小写
- 在开始标签和自闭合中书写属性，格式：属性名=属性值,但是必须属性值要用单引号或者双引号扩上
标签的属性：
- 通常为键值对形式出现，eg：color=“red” id = ‘eat’
- 属性只能出现在开始标签和自闭合标签内
- 属性名字全部小写，属性值必须用单引或者双引包裹
- 如属性名和属性值完全一样，直接写属性名即可，eg：“readonly”（input标签属性）
<!DOCTYPE html>
<!-- 声明：文档类型声明 ，这是一个html文件-->
<html>
<!-- 开始标签 -->
<!-- 在html中的注释 ctrl+/ -->
<head>
<!--头部 -->
<meta charset="utf-8">
<title>这是标题</title>
<!-- 标题 -->
</head>
<body>
<!-- 身体部分，可视化区域 -->
<!--
标签的特点：
1.尖括号包裹关键字
2.成对的标签（双标签），由开始标签和结束标签组成
单标签 （自闭合标签） <img/>
3.区分大小写
4.在开始标签和自闭合中书写属性，格式：属性名=属性值,但是必须属性值要用单引号或者双引号扩上
-->
<!-- 我是一个段落标签 -->
<!--<p style="color:red;">我是一个段落标签</p> -->
<!-- 块级标签 -->
<!-- 1.设置宽高有效 -->
<!-- 2.在不设置宽度的情况下,默认和浏览器的宽度保持一致 -->
<!-- 3.独占一行,而且会自动换行 -->
<!-- 4.多个块级标签写在一起时,默认使用从上到下的排列方式 -->
<!-- <p style="width:100px;height:100px">我是一个段落标签</p> -->
<p>我是一个段落标签2</p>
<p>我是一个段落标签3</p>
<p>我是一个段落标签4</p>
<p>我是一个段落标签5</p>
<!-- 行内标签 -->
<!-- 1.设置宽高无效 -->
<!-- 2.宽度只会和内容相关 -->
<!-- 3.不会自动换行，只有当一行的内容满了之后才会自动换到第二行 -->
<!-- 4.当多个行内标签写在一起的时候，排列的方式是从左到右的 -->
<!-- <span style="width:100px;height:100px;">我是一个行内标签</span> -->
<span>我是一个行内标签1</span>
<span>我是一个行内标签2</span>
<span>我是一个行内标签3</span>
<span>我是一个行内标签4</span>
<span>我是一个行内标签5</span>
</body>
</html>
<!-- 结束标签 -->
各种标签
常见的标签如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 标题标签 h1 h6 -->
<h1>这是一级标题</h1>
<!-- 一个页面最好只有一个标题标签 -->
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>
<h4>这是四级标题</h4>
<h5>这是五级标题</h5>
<h6>这是六级标题</h6>
<p>段落标签</p>
<!-- 列表标签：有序列表，无序列表，定义列表 -->
<!-- 有序：order 列表：list -->
<!-- 有序列表：ol -->
<!-- type:列表标识的样式，值：1（默认），A,a,i,I -->
<ol type="1">
<!-- 列表项 -->
<li>python</li>
<li>java</li>
<li>c++</li>
<li>web前端</li>
</ol>
<!-- 无序列表
type:值：disc(默认，实心圆)，circle（空心圆），none（去除）
-->
<ul type="none">
<li>平面</li>
<li>插画</li>
<li>ui</li>
</ul>
<!-- 定义列表 -->
<dl>
<dt>科目</dt>
<!-- 可以理解为对科目列表的解释项 -->
<dd>python</dd>
<dd>java</dd>
<dd>c++</dd>
</dl>
<!-- div:盒子标签 -->
<div style="width:300px;height:500px;border:1px solid red">xixixixi</div>
</body>
</html>
行内标签
行内标签
- 设置宽高无效
- 宽度只会和内容相关
- 不会自动换行，只有当一行的内容满了之后才会自动换到第二行
- 当多个行内标签写在一起的时候，排列的方式是从左到右的
- 设置margin只有左右margin有效，上下无效
- 设置padding只有左右padding有效，上下则无效，注意元素范围是增大了，但是对元素周围的内容是没影响的。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 图片标签
src:图片的路径
alt:当图片找不到的情况下进行显示，可以理解为提示信息
1.网络上的图片
2.本地图片
同一个级别，图片需要引用，直接写图片名字就可以了
-->
<!-- <img alt="哎呀!图片出错啦" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1588090825017&di=42ca2f51e88fb25423d2cc2bd8a5ecee&imgtype=0&src=http%3A%2F%2Fa4.att.hudong.com%2F20%2F62%2F01000000000000119086280352820.jpg"/> -->
<!-- <img src="1.jpg"/> -->
<!-- 在上下级别中的文件查找，由当前文件出发，先找上级，再找图片 -->
<!-- <img src="img/2.jpg"> -->
<p>身材不错</p>
<b>微胖</b>
<i>脉动回来</i>
<!-- 超链接标签
href：点击a标签时需要跳转的路径
target:代表目标页面的打开方式，属性值：_self(默认，在当前窗口打开)，_blank（打开一个新窗口显示）
title：代表鼠标放上a标签的提示
-->
<!-- 网络地址 -->
<a href="https://www.shiguangkey.com/">我想去官网</a>
<!-- 文件地址 -->
<a href="认识html.html" target="_blank" title="abc">我想去本地文件</a>
<!-- 空链接 -->
<a href="#">空链接</a>
<!-- span标签 文本标签 -->
<span>文本标签</span>
</body>
</html>
标签的嵌套规则
- 块级标签可以嵌套行内标签或者某些块级标签，但是行内标签不可以嵌套块级标签，只能嵌套行内标签
- 块级标签不可以放在p标签内
- 有几个特殊的块级标签只能包含行内标签，不能包含块级标签
- 块级标签与块级标签并列，行内标签与行内标签并列
如下示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 1.块级标签可以嵌套行内标签或者某些块级标签，但是行内标签不可以嵌套块级标签，只能嵌套行内标签 -->
<!-- 规范 -->
<div>
<h1></h1>
<p></p>
<span></span>
<a></a>
</div>
<!-- 不规范的，行内标签不能嵌套块级标签 -->
<a>
<div></div>
</a>
<!-- 规范 -->
<a>
<span></span>
</a>
<!-- 2.块级标签不可以放在p标签 -->
<!-- 不规范的 -->
<p>
<ol>
<li></li>
<li></li>
</ol>
</p>
<!-- 不规范的 -->
<p>
<div></div>
</p>
<!--3.有几个特殊的块级标签只能包含行内标签，不能包含块级标签，-->
<!-- h1-h6 p dt -->
<!-- 不规范的 -->
<p>
<p></p>
</p>
<!-- 4.块级标签与块级标签并列，行内标签与行内标签并列 -->
<!-- 规范 -->
<div>
<h2></h2>
<p></p>
</div>
<div>
<a></a>
<span></span>
</div>
<!-- 不规范的 -->
<div>
<a></a>
<h2></h2>
</div>
<!--<!---->-->
</body>
</html>大于号">"
特殊符号
注意写的时候后面都要带上一个;号
| 写法 | 显示样式 |
|---|---|
| < | 小于号"<" |
| > | 大于号">" |
| " | 一个"号 |
| © | 一个©号 |
| ® | 一个®号 |
| & | 一个&号 |
|   | 一个空格字符宽度 |
| &emsp | 一个字符的宽度 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<span>文本 标签</span>
<span>文本 标签</span>
<!--   > < -->
<span>3>1</span>
<span>1<11</span>
<span>"</span>
<span>©</span>
<span>®</span>
<span>&</span>
</body>
</html>
显示如下
<!--
文本 标签 文本 标签 3>1 1<11 x"y © ® &
-->
表格
表格其实就是大家平时看到的二维表，比如Excel表格之类。
标签table标签
代码演示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>表格</title>
</head>
<body>
<!-- 加边框border="solid 1px red" 宽width="500px" 高height="20px"-->
<!-- 居中align="center" -->
<!-- cellspacing="5px" 单元格与单元格之间的距离 -->
<!-- cellpadding=""控制单元格中的数据距离格子的距离 -->
<table border="1px" width="500px" height="20px" align="center" cellspacing="5px" cellpadding="10px">
<!-- 表格标题 放在第一行的上方 -->
<caption>菜品单</caption>
<!-- 列 -->
<tr>
<!-- 第一行 表格头 加粗并自动居中 -->
<th>名称</th>
<th>名称</th>
<th>名称</th>
<th>名称</th>
</tr>
<tr align="center">
<!-- 第二行 -->
<td>橘子</td>
<td>香蕉</td>
<td>西瓜</td>
<td>荔枝</td>
</tr>
<tr align="center">
<!-- 第三行 -->
<td>青椒肉丝</td>
<td>鱼香肉丝</td>
<td>番茄炒蛋</td>
<td>水煮肉片</td>
</tr>
</table>
<!-- 1.先确定好是跨行合并还是跨列合并 -->
<!-- 2.根据先上后下（跨行），先左后右（跨列），的原则找到目标单元格，再写合并方式 -->
<!-- 3.删除多余的单元格 -->
<table border="1px" width="500px" height="200px" align="center" cellspacing="0px">
<tr>
<td>姓名：limitfly</td>
<td>性别：未知</td>
<td>年龄：未知</td>
<!-- rowspan="2" 夸行合并 -->
<td rowspan="2">个人照骗</td>
</tr>
<tr>
<td>身高：哈哈</td>
<td>体重：巨重</td>
<td>渣男</td>
<!-- 多余单元格删除<td></td> -->
</tr>
<tr>
<!-- colspan="4" 跨列合并 -->
<td colspan="4">个人特长：腿特长</td>
<!-- <td></td>
<td></td>
<td></td> -->
</tr>
</table>
</body>
</html>
显示如下
表单
表单是搜集用户数据信息的各种表单元素的集合区域；
用于收取用户数据并向后台发送，前后交互的方式之一；
表单常应用于 登录注册，搜索，文件上传等。
标签 form标签，配合input标签使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单</title>
</head>
<body>
<!-- 1.表单控件 -->
<!-- 2.表单文本（提示文本） -->
<!-- 3.表单域 form标签
定义表单域，可以实现用户信息和传递，form的所有内容都会被提交到后台服务器中
action:url地址（用于指定接受并处理表单数据的服务器程序的url地址）
method：数据提交的方式，有get和post，默认为get，get不安全，明文提交-->
<!-- input标签 -->
<!-- type类型：
text 文本类型
password 密码类型
radio 单选，但是需要注意加上name属性作为表示，如果是一组，name的标识一致
checkbox 设置单选或者多选，checked属性checked="checked"表示默认选中，
如果属性名和属性值一致，则可以直接写属性，name值一致的话，表示是一组
button 一个普通的按钮
submit 提交表单信息的按钮
reset 重置按钮把表单中所有的数据情况
file 上传文件
属性值：
value:设置值
placeholder：一般用户给出提示信息
readonly:设置只读属性
disable:设置禁用属性
-->
<!-- label标签：配合表单标签使用，目的是为了提高用户的体验 -->
<!-- textarea：文本域标签 -->
<!-- select：下拉选项的标签,需要配合option标签来设置下拉选项 -->
<!-- 表单域 -->
<form action="" method="POST">
用户名：<input type="text" value="" placeholder="请设置用户名" name="username"/><br/>
密  码：<input typr="password"/><br/>
姓名：<input type="text" name="xm"><br/>
性别：男<input type="radio" name="sex"> 女 <input type="radio" name="sex"><br>
吃货食谱：<br>
烧烤<input type="checkbox" name="food" checked="checked">
臭豆腐<input type="checkbox" name="food">
炸鸡<input type="checkbox" name="food">
大排档<input type="checkbox" name="food">
小龙虾<input type="checkbox" name="food">
<br>
<input type="button" value="这是一个按钮"><br>
<select name="city" id="city">
<option value="">请选择城市</option>
<option value="">武汉</option>
<option value="">宜昌</option>
<option value="">荆州</option>
</select><br>
<input type="submit" value="提交按钮">
<input type="reset" value="重置按钮"><br>
上传文件<input type="file">
<!-- 第一种：label标签包含表单标签,点击文本内容时，也会弹到input文本框中 -->
<label>
个人标记：<input type="text">
</label>
<!-- 第二种：使用for属性规定label与哪个表单元素绑定 -->
<!-- input标签中的id与label中的for绑定了 -->
<label for="lc">楼层</label>
<input type="text" id="lc"><br>
用户留言<textarea name="liuyan" id="ly" cols="30" rows="10"></textarea>
</form>
</body>
</html>
显示如下：
1168
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
