作者简介:大家好我是小唐同学(๑><๑),为梦想而努力的小唐,让我们一起加油!!!
个人主页:小唐同学(๑><๑)的博客主页
初学者,不喜互喷,有错请指正
目录
HTML解释:
HTML:超文本标记语言
HTML运行在浏览器上,标签由浏览器解析
网页有三部分组成:
结构:HTML
表现:CSS
行为:JavaScript
简易标签介绍:
<HTML>标签定义HTML文档
<head>标签定义文档信息
<title>定义文档标题
<body>定义文档主题
<font>定义属性(文本内容的字体,尺寸,颜色)
<font face="楷体"size="5"color="#ffc0cb">大哥666</font>
<h1>定义标签1-6(1最大,6最小)
<b>加粗
<i>斜体
<u>下划线
<hr>定义水平线
<br>定义换行
<p>定义段落
<center>定义文本居中
<img>定义图片
src:规定显示图像的URL(统一资源定位符--路径(可绝对路径,相对路径))
height:图片高度(单位:1.像素px 2.百分比)
width:定义图像宽度(单位:1.像素px 2.百分比)
<audio>定义音频
src:规定音频的URL
controls:显示播放控件
<video>定义视频
src:规定视频的URL
controls:显示播放控件
<a>:超链接标签--定义超链接,用于连接到另一个资源
href:指定访问资源的URL
target:指定打开资源的方式
_self:默认值,在当前页面打开
_blank:在空白页面打开
列表标签:
<ol>定义有序列表
<ul>定义无须列表
<li>定义列表项
type属性是修改标识符(1.-2.-3.)
有序标签(order list):
<ol>
<li>咖啡</li>
<li>茶</li>
</ol>
无序列表(unorder list):
<ul>
<li>咖啡</li>
<li>茶</li>
</ul>
表格标签:
table:定义表格
border:规定表格边框的宽度
width:规定表格宽度
cellspacing:规定单元格之间的空白
tr:定义行
align:定义表格行的内容对齐方式(left左对齐,right右对齐,center居中)
td:定义单元格
rowspan:规定单元格可横跨的行数
colspan:规定单元格可横跨的列数
<th>表头单元格(可加粗)
布局标签:
<div>:定义HTML文档中的区域部分,经常与CSS一起使用,用来布局网页(沾满一行)
<span>用于组合行内元素
表单标签:(登录窗口)
表单:在网页中主要负责数据的采集功能,使用<form>标签定义表单
表单项(元素):不同类型的input元素,下拉列表,文本域等
<form>:定义表单,是一个整体
属性:
action:规定当提交表单时向何处发送表单数据,URL(统一资源定位符--路径(可绝对路径,相对路径))(默认“#”--提交网页,后期可以提交服务器)
method:规定用于发送表单数据的方式
1.get:浏览器会将数据直接附在表单的action URL之后,大小有限制(4KB)
2.post:浏览器会将数据放到http请求消息体中,大小无限制(会隐藏起来)
<input>:定义表单项,通过type属性控制输入形式
type取值:
text :默认值,定义单行的输入字段
password:定义密码字段
radio:定义单选按钮
checkbox:定义复选框(多选)
file:定义文件上传按钮
hidden:定义隐藏的输入字段(不会在页面显示,在开发者页面可显示)
submit:定义提交按钮,提交按钮会把表单数据发送到服务器
reset:定义重置按钮,重置按钮会清除表单中的所有数据
button:定义可点击按钮(结合js产生效果)
<select>:定义下拉列表,<option>定义列表项
<textarea>:文本域(在表单中让你填意见改进)
代码实现:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="#" method="post">
用户名:<input type ="text" name ="username"><br>
密码:<input type="password" name="userpassword"><br>
<!--name 用于提交数据-->
<br>
<!--扩大按钮点击区域-->
<label for="username">用户名:</label>
<br>
<input type ="text" name ="username" id="username">
<br>
<input type="submit" value="免费注册">
<!-- value 给按钮设置文本显示内容-->
<!-- 单选框-->
<br>
<input type="radio" name="gender">男
<input type="radio" name="gender">女
<br>
<!-- 多选框-->
爱好:
<input type="checkbox" name="hobby"value="1">旅游
<input type="checkbox"name="hobby"value="2">电影
<input type="checkbox"name="hobby"value="3">游戏
<!-- 文件-->
<br>
头像:
<input type="file"> <br>
<!--下拉列表-->
城市:
<select name="city"><!--name是指定属性,必须指定属性才能提交-->
<option>上海</option>
<option>北京</option>
</select>
<br>
意见 : <textarea></textarea>
</form>
</body>
</html>