HTML
1. HTMl定义
FTP UPLOAD|ooxx.avi|1024 --> HTTP协议
HTML: 超文本标记语言
2. HTML标签的结构
HTML的结构
head --> 给浏览器看的内容
title --> 标题
style --> CSS样式
link --> CSS文件
script --> JS
meta
<meta charset="UTF-8">
<meta http-equiv="refresh" content="2;URL=https://www.oldboyedu.com">
body --> 给用户看的内容
HTML标签的语法：
<head 属性1=值1 属性2=值2></head>
<body></body>
常用标签:
<h1>内容<h1> 标题
<br> 换行
<hr> 横线
<a href="网站">自定义连接</a> 点击自定义连接会连接到其他网站(内联标签)
<span>内容</span> 内联标签
<p> 段落(块级标签)
<b>内容</b> 加粗
<i>内容</i> 斜体
<u>内容</u> 下划线
<s>内容</s> 删除
<div>内容</div> 独占一行,是块级标签
ul 让内容一行一行的排列下来,每排前面有空格:
<ul type="none">
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
让每节内容前面带上序号(可以规定序号的类型和从什么地方开始):
<ol type="a" start='3>
<li>111</li>
<li>222</li>
dl 给内容加上标题:
<dl>
<dt>标题1</dt>
<dd>内容1</dd>
<dt>标题2</dt>
<dd>内容1</dd>
<dd>内容2</dd>
</dl>
结果如下:
特殊字符:
div标签和span标签
1, div标签用来定义一个块级元素，并无实际的意义。主要通过CSS样式为其赋予不同的表 现。
2, span标签用来定义内联(行内)元素，并无实际的意义。主要通过CSS样式为其赋予不同 的表现。
块级元素与行内元素的区别：
所谓块元素，是以另起一行开始渲染的元素，行内元素则不需另起一行。如果单独在网页 中插入这两个元素，不会对页面产生任何的影响。
这两个元素是专门为定义CSS样式而生的。
img标签:
<img src="图片的路径" alt="图片未加载成功时的提示" title="鼠标悬浮时提示信息" width="宽" height="高(宽高两个属性只用一个会自动等比缩放)">
示例代码:
<imgsrc="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=4278083535,964765985&fm=27&gp=0.jpg" alt="刘诗诗" title="鼠标">
a 标签:
超链接标签
所谓的超链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。
示例代码:
<a href="https://www.taobao.com">淘</a>
制作表格:
分为两部分
第一部分:(表头部分,相当于表格的分类)
第二部分:(内容部分,可以把相同的特征合到一起,也可以不合)
属性:
border 表格边框
cellpadding 内边距
cellspacing 外边距
width 像素,百分比,(最好通过css来设置长宽)
rowspan 单元格竖跨多少行
colspan 单元格横跨多少行
用户输入标签 form
功能:
表单用于向服务器传输数据,从而实现用户与Web服务器的交互
表单能够包含input系列标签,比如文本字段,复选框,单选框,提交按钮等
表单还可以包含textarea , select , fieldset 和 label标签
表单属性:
表单元素
基本概念
(1)HTML表单是HTML元素中较为复杂的部分,表单往往和脚本,动态页面,数据处理等功能 相结合,因此它是制作动态网站很重要的内容
(2)表单一般用来收集用户的输入信息
表单工作原理:
访问者在浏览有表单的网页时,可填写必须的信息,然后按某个按钮提交.这些信息通过 Internet传送到服务器上
input
<input>元素会根据不同的type属性,变化为多种形态
select 标签
属性说明:
multiple : 布尔值属性,设置后为多选,否则默认单选
disabled : 禁用
selected : 默认选中该项
value : 定义提交时的选项值
label 标签
定义: <label>标签为 input 元素定义标注(标记)
说明: 1. label元素不会向用户呈现任何特殊效果
2. <label>标签的for属性值应当与相关元素的id属性值相同
用法及结果展示:
用户名 和 密码:
结果:
选择文件:
结果
checkbox用法:
结果:
按钮(button):
结果:
选择内容(第一种方法):
结果:
第二种方法:
结果:
完整代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h1>哈哈</h1> <form action="'http://127.0.0.1:8090" method="post"> <label for="i">用户名</label> <input type="text" id="i" placeholder="请输入用户名"> <label>密码 <input type="password" placeholder="请输入密码"> </label> <br> <br> <label>时间 <input type="date" placeholder="请输入时间"> </label> <label>邮箱 <input type="email" placeholder="请输入邮箱"> </label> <hr> <input type=checkbox>阅读并接受<<百度用户协议>> <hr> <select name="city"> <option value="020">北京市</option> <option value="010">上海市</option> <option value="000" selected>深圳市</option> </select> <hr> <select name="city" multiple> <option value="020" selected>北京市</option> <option value="010" selected>上海市</option> <option value="000" selected>深圳市</option> </select> <hr> <textarea name="'info" cols="60" rows="20"></textarea> <hr> <input type="file" name="avatar"> <hr> <input type="button" value="按钮"> <input type="reset" value="重置"> <input type="submit"> </form> <hr> <form action="http://127.0.0.1:8080" method="post"> <input type="text" name="alex"> <input type="submit"> </form> </body> </html>