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>
显示如下: