【HTML5】2.语法入门总结（第二部分）

0.思维导图

1.HTML5基本框架

HTML5 是HyperText Markup Language 5 的缩写，是一种标记语言。
第一个程序，基本框架。

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>第一个程序</title>
</head>
<body>hello world
</body>
</html>

2.语法举例（第二部分）

2.1.表格

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>表格基本语法</title>
</head>
<body><!-- 表格属性写在表格标签里面，align对齐方式  cellpadding文字与边框距离，cellspacing边框之间的距离--><table align="center"  border="1" cellpadding="2" cellspacing="0" width="200" height="100"><tr><th>姓名</th>   <th>性别</th> <th>年龄</th></tr><tr><td>刘德华</td> <td>男</td>   <td>56</td></tr><tr><td>张学友</td> <td>男</td>   <td>58</td></tr></table>
</body>
</html>

合并表格：

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>单元格合并</title>
</head>
<body><p>步骤</p><p>1.确定行和列，跨列colspan、跨行rowsapn</p><p>2.写代码</p><p>3.删除多余单元格</p><table width="500" height="249" border="1" cellspacing="0"><tr><td></td><td colspan="2"></td></tr><tr><td rowspan="2"></td><td></td><td></td></tr><tr><td></td><td></td></tr></table>
</body>
</html>

2.2.列表

无序列表

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>列表</title>
</head>
<body><h4>你最喜欢吃的食物</h4><!-- Unordered list --><ul><!-- List items --><li>西瓜</li><li>火锅</li><li>菠萝</li></ul>
</body>
</html>

有序列表

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>有序列表</title>
</head>
<body><h4>你最喜欢吃的食物</h4><!-- ordered list --><ol><!-- List items --><li>西瓜</li><li>火锅</li><li>菠萝</li></ol>
</body>
</html>

自定义列表

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>自定义列表</title>
</head>
<body><!-- Define listdefine themeDefine data --><dl><dt>关注我们</dt><dd>新浪微博</dd><dd>微信邮箱</dd><dd>联系电话</dd></dl>
</body>
</html>

2.3.表单域

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>表单</title>
</head>
<body><!-- 提交数据 --><from action="demo.php" method="post" name="name1"> </from>
</body>
</html>

2.4.input表单元素

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>input 表单元素</title>
</head>
<body><form action="xxx.php" method="get"><!-- text 文本框 用户可以里面输入任何文字 -->用户名: <input type="text" name="username" value="请输入用户名" maxlength="6">   <br> <!-- password 密码框 用户看不见输入的密码 -->密码: <input type="password" name="pwd" >  <br> <!-- radio 单选按钮  可以实现多选一 --><!-- name 是表单元素名字 这里性别单选按钮必须有相同的名字name 才可以实现多选1 --><!-- 单选按钮和复选框可以设置checked 属性, 当页面打开的时候就可以默认选中这个按钮 -->性别: 男 <input type="radio" name="sex" value="男"> 女  <input type="radio" name="sex" value="女" checked="checked"> 外星人   <input type="radio" name="sex" value="人妖">   <br> <!-- checkbox 复选框  可以实现多选 -->爱好: 吃饭 <input type="checkbox" name="hobby" value="吃饭"> 睡觉 <input type="checkbox" name="hobby">  打豆豆 <input type="checkbox" name="hobby" checked="checked"> <br> <!-- 点击了提交按钮,可以把 表单域 form 里面的表单元素 里面的值 提交给后台服务器 --><input type="submit" value="免费注册"><!-- 重置按钮可以还原表单元素初始的默认状态 --><input type="reset" value="重新填写"><!-- 普通按钮 button  后期结合js 搭配使用--><input type="button" value="获取短信验证码"> <br><!-- 文件域 使用场景 上传文件使用的 -->上传头像:  <input type="file" ></form>
</body>
</html>

type属性值：

除type外的其他属性

2.5.label标签

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>label</title>
</head>
<body><!-- label 绑定标签，提升用户体验 --><label for="username">用户名：</label> <input type="text" id="username"  /> <br />性别： <input type="radio" name="sex" id="male" value="male" /> <label for="male">男</label><input type="radio" name="sex" id="female" value="female" /><label for="female">女</label>
</body>
</html>

2.6.下拉选择框

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>12.select下拉选择标签</title>
</head>
<body>喜欢的城市：<select><option value="重庆">重庆</option><option selected="selected" value="湖南">湖南</option><option value="深圳">深圳</option></select>
</body>
</html>

2.7.文本域

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>13.textarea文本域标签</title>
</head>
<body>今日心得：<textarea name="xinde" id="xinde" cols="30" rows="10">2022年4月17日，天气阴。好好学习，天天向上。</textarea>
</body>
</html>

【HTML5】2.语法入门总结（第二部分）相关推荐

尚硅谷Java入门视频教程第二章——Java基本语法
尚硅谷Java入门视频教程第二章第一章复习课后习题 Java语言概述第2章:Java基本语法 2.1 关键字和保留字 2.2 标识符(Identifier) 2.3 变量 2.3.1 变量基本概 ...
C语言入门练习 - 第二期判断语句与循环语句（题解）
比赛地址:C语言入门练习 - 第二期判断语句与循环语句 A.入门--基础语法(for) #include<stdio.h> int main(){int n,i;scanf(" ...
C++ C++基础语法入门总结（二）引用-内联函数-C++11新特性
C++基础语法入门总结 C++引用再谈引用和指针 C++内联函数附加C++11新特性 auto关键字基于范围的for循环指针空值nullptr C++引用引用:就是某一变量(目标)的一个别名 ...
Python基础语法入门篇(一)
Python基础语法入门篇(二) 1. 注释在我们工作编码的过程中,如果一段代码的逻辑比较复杂,不是特别容易理解,可以适当的添加注释,以辅助自己或者其他编码人员解读代码. 注释是给程序员看的,为了 ...
xmuoj《C++与Python语法入门练习(By郭炜老师)》python参考代码
目录前言 xmuoj对应链接 Pycharm安装代码 001 输出第二个整数 002 字符菱形 003 打印ASCII码 004 打印字符 005 整型数据类型存储空间大小 006 浮点型数据类型 ...
【 linux系统入门管理篇-第二章文件和用户的管理】
linux系统入门管理篇-第二章文件和用户的管理本章介绍一.文件管理 (一).Linux目录结构 (二).文件管理 1.文件管理命令 2.文件类型二.用户管理 (一).用户/组基本概念 (二). ...
谷歌黑客语法入门视频教程_入门教程：Google Go入门
谷歌黑客语法入门视频教程您为什么要使用Go语言? 基本上,它是一种简洁,简单,安全且快速的编译语言,具有出色的并发功能,并且可以轻松处理大型项目. 即使它最初是由Google开发的,它也是免费的开源 ...
零基础学C++——黑马程序员课程笔记（C++基础语法入门篇）
封面来自互联网侵删视频地址:点击访问 (我这里开发工具选用VSstudio) 此笔记有三个系列: C++基础语法入门篇 C++核心编程篇点击查看 C++提高编程篇文章目录 C++初识变量常量 ...
泛型模板和STL语法入门
泛型模板和STL语法入门 STL简介 STL是Standard Template Library的简称,中文名标准模板库,惠普实验室开发的一系列软件的统称.它是由Alexander Stepanov. ...

【HTML5】2.语法入门总结（第二部分）

0.思维导图

1.HTML5基本框架

2.语法举例（第二部分）

2.1.表格

2.2.列表

2.3.表单域

2.4.input表单元素

2.5.label标签

2.6.下拉选择框

2.7.文本域

【HTML5】2.语法入门总结（第二部分）相关推荐

最新文章

热门文章