HTML基础语法入门
2024-06-24 01:38:03
1.基本结构
<html> --html开始标签<head> -- 文件头（用户在浏览器的主体是看不到的）</head> <body> --文件体（用户在浏览器的主体看得到）</body>
</html> --html结束标签
2.head文件头
作用：告诉浏览器如何解释该html页面
<html>
<head><!-- html注释 --><!-- 作用：告诉浏览器如何解释该html页面 --><!-- 标题 ：在窗口的标题栏看到--><title>这是标题</title><!-- 告诉浏览器使用什么码表解释html文件 --> <!-- html标签分类：有标签体标签：有开始，有结束标签、 <title></title>没有标签体标签 ： 也叫空标签 <meat />--><meta http-equiv="content-type" content="text/html;charset=utf-8"/><!-- 关键词：keywords搜索引擎： 百度 输入 java培训网页的排名 推广 SEOSEO优化关键词是网页排名的一个因素。100% 权重 50% 33.3.% （3-5个合适）--><meta name="keywords" content="java培训,net培训,php培训" /><!-- 描述：标题描述标题描述标题描述--><meta name="description" content="这是一家专门做IT职业培训的公司"/>
</head><body>
</body>
</html>
3.文本标签
标题(h1~h6)
水平线(hr)
段落§
段落缩进(blockquote)
上下标(sup和sub)
换行(br)
原样输出(pre)
有序列表ol li
无序列表ul li
项目列表标签(dl dt dd)
行内标签(span)
块标签
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>html文本标签</title>
</head><body>
<!-- 标题(h1~h6)-->
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
<!-- 水平线(hr) -->
<hr/>
<!-- p 段落 -->
<p>第一个章节内容第一个章节内容第一个章节内容第一个章节内容第一个章节内容第一个章节内容第一个章节内容第一个章节内容第一个章节内容第一个章节内容第一个章节内容
</p>
<p>
第二个章节第二个章节第二个章节第二个章节第二个章节第二个章节第二个章节第二个章节第二个章节第二个章节第二个章节第二个章节第二个章节第二个章节第二个章节
</p>
<!--段落缩进(blockquote) -->
<blockquote>
第三个章节第三个章节第三个章节第三个章节第三个章节第三个章节第三个章节第三个章节第三个章节第三个章节第三个章节第三个章节第三个章节第三个章节第三个章节第三个章节第三个章节第三个章节第三个章节第三个章节第三个章节
</blockquote>
<!-- 上下标(sup和sub) 用于公式-->
数学公式：y=x的平方： y=x<sup>2</sup>水的化学式： H<sub>2</sub>O
<!-- 换行(br) -->
<br/>
下一个内容
<!-- 原样输出(pre)： 按照编辑器的效果直接输出 -->
<pre>凉州词
葡萄美酒夜光杯，欲饮琵琶马上催。
醉卧沙场君莫笑，古来征战几人回。
</pre>
<pre>
function checkName(){alert("用户名不能为空!");
}
</pre>
<!--有序列表ol li -->
<a name="list"></a>
你最喜欢的明星？
<ol> <li>凤姐</li><li>芙蓉姐姐</li><li>如花</li>
</ol>
学生管理系统
<!--无序列表ul li -->
<ul type="disc"><li>学生管理</li><li>成绩管理</li><li>系统管理</li>
</ul>
<!-- 项目列表标签(dl dt dd) -->
软件公司的组织架构
<dl><dt>技术总监</dt><dd>攻城狮1号</dd><dd>攻城狮2号</dd><dd>攻城狮3号</dd><dt>财务总监</dt><dd>出纳1号</dd><dd>出纳2号</dd><dd>出纳3号</dd>
</dl>
<!-- 行内标签(span) 块标签<div> 在html中使用非常少，在css中用得多。div+css的网页布局--><span>span的内容</span><div>div的内容</div></body>
</html>
4.超链接标签
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>超链接标签</title>
</head><body>
<!-- a 超链接标签：常用的属性：href 表示链接到的地址（文件）target 打开资源方式 _self: 当前窗口打开， _blank: 新窗口打开 协议执行资源的基本流程（超链接的原理）： 使用协议到本地计算机的注册表中查询是否有对应协议的软件（程序），有就执行，没有就不执行。常见的协议：file:// 本地文件协议（本地或局域网） 在href中不写就是使用这个默认协议http:// http协议（执行流程） 通常连接到域名或IP地址thunder： 迅雷下载软件的协议mailto: 调用本地的发送邮件的客户端软件超链接作用；1）链接到资源 2）作为锚点使用打锚点： <a name="锚点名称"></a>去到锚点： <a href="#锚点名称">内容</a>-->
<a name="top"></a>
<a href="03.html文本标签.html#list" target="_blank">超链接</a><br/>
<a href="../1.jpg">链接到图片</a><br/>
<a href="http://www.baidu.com">链接到百度</a><br/>
<a href="http://www.moive.com/fuzhouzhe.avi">高清《小小星球》(普通通道)</a><br/>
<a href="thunder://www.moive.com/fuzhouzhe.avi">高清《小小星球》(迅雷通道)</a><br/>
<a href="mailto:343539633@qq.com">发送邮件给朋友</a>
<br/><a href="#ch01">去到第一章</a>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<a name="ch01"></a>
第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容第一章内容<br/>
<a href="#top">返回顶部</a></body>
</html>
5.图像标签
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图像标签</title>
</head><body>
<!-- img 图像标签常用属性：src : 表示图片源位置width: 图片宽度height: 图片高度alt: 替代文本。当图片的src属性失效时，alt属性的内容就会生效title: 提示文本。当鼠标放到图片上面出现。地图（热点区域）：map热点： area-->
<img src="../2.jpg" alt="这是一张美女图片" border="0" usemap="#Map" title="提示文字"/>
<map name="Map" id="Map"><area shape="rect" coords="196,338,301,398" href="04.超链接.html" target="_self" /><area shape="circle" coords="139,191,45" href="03.html文本标签.html" target="_blank" />
</map>
</body>
</html>
6.转义字符
常见的转义字符：
7.表格标签
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>表格标签</title>
</head><body>
<!--标签：table 表格tr 行td 单元格th 表头caption 标题常用的属性：border 表格的边框width 宽度heigth 高度align 对齐方式。 left: 左对齐 center:居中 right：右对齐rowspan 行合并。把多行的单元格合并colspan 列合并。把多列的单元格合并-->
<table border="1px" width="400px" height="200px" align="center"><caption>2019年期末考试成绩</caption><thead><tr><th>姓名</th><th>班级</th><th>成绩</th></tr></thead><tbody><tr><td rowspan="2">狗娃</td><td>计算机1班</td><td>80</td></tr><tr><td>经济1班</td><td>90</td></tr><tr><td>狗剩</td><td>计算机2班</td><td>78</td></tr><tr><td>狗蛋</td><td>软件1班</td><td>90</td></tr></tbody><tfoot><tr><td colspan="2">平均分</td><td>85</td></tr></tfoot>
</table>
</body>
</html>
8.表单标签
作用：用于采集用户输入的数据，提交给后台程序处理
表单标签：<form> 就是一个表单<input type="text"> 单行输入域<input type="password"/> 密码输入域<input type="radio"/> 单选按钮<input type="checkbox"/> 多选按钮<select/> 下拉选项<input type="hidden"/> 隐藏域。特点：不会显示到html页面上，但可以携带数据。 <input type="file"/> 文件选择器<textarea></textarea> 多行输入域<input type="submit"/> 提交按钮<input type="button"/> 普通按钮<input type="reset"/> 重置按钮
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>表单标签</title>
</head><body>
<!-- 一个表单标签：常用的属性：action: 表单提交到的地址.。点击了submit的提交按钮，就会把数据提交到action的地址method: 提交方式。 两种提交方式：get1）提交的数据会放到地址栏上面 2) get提交的数据不超过1kb，只适合简单的数据post1）提交的数据不会放到地址栏2）post提交的数据没有限制。比如文件上传
-->
<form action="http://localhost:8080/Test/GetData" method="get"><!-- 单行输入域：常用的属性value: 该输入的默认值name: 这个必须填。该name的属性值用于给后台程序获取该标签输入的内容size: 可以输入的字符数量-->用户名：<input type="text" value="4-10位的字母或数字" name="userName" size="25" /><br/><!--密码输入域： 以非明文的效果获取用户输入的数据。 -->密码：<input type="password" name="userPwd" /><br/><!-- 单选： 注意： 1)如果是同一组的单选选项就使用相同的name属性值2)单选按钮的value属性一定填。这个value的值就是发送给后台程序的内容-->性别：<input type="radio" name="gender" value="男"/>男<input type="radio" name="gender" value="女"/>女<br/>爱好：<!-- 多选按钮：注意：1）如果是同一组的多选选项就使用相同的name属性值2)多选按钮的value属性一定填。这个value的值就是发送给后台程序的内容--><input type="checkbox" name="hobby" value="篮球"/>篮球<input type="checkbox" name="hobby" value="足球"/>足球<input type="checkbox" name="hobby" value="兵乓球"/>兵乓球<br/>籍贯：<!--下拉选项：注意： 1）name属性就是后台程序获取的标记2)下拉选项的option标签中的value属性一定填。这个value的值就是发送给后台程序的内容--><select name="jiguan"><option value="广东">广东</option><option value="广西">广西</option><option value="湖南">湖南</option><option value="山东">山东</option><option value="北京">北京</option><option value="云南">云南</option><option value="湖北">湖北</option><option value="天津">天津</option><option value="四川">四川</option><option value="重庆">重庆</option><option value="江苏">江苏</option><option value="浙江">浙江</option><option value="上海">上海</option><option value="陕西">陕西</option><option value="福建">福建</option><option value="山西">山西</option><option value="河南">河南</option><option value="河北">河北</option><option value="江西">江西</option><option value="港澳台">港澳台</option><option value="其它">其它</option></select><br /><!-- 隐藏域：用于携带数据，但是在页面上不会显示效果注意： 1）name属性就是后台程序获取的标记2) 这个value的值就是发送给后台程序的内容--><input type="hidden" name="id" value="001"/>个人简介：<!--多行输入域：可以输入多行文本rows: 一共有几行cols: 一行可以输入几行字符--><textarea rows="5" cols="20" name="info"></textarea> <!-- 提交按钮： 点击这个按钮，form中的全部数据就会发送到后台value: 表示按钮显示的文本--><input type="submit" value="注册"/><!--重置按钮： 点击这个按钮，form中的所有标签返回到初始默认状态--><input type="reset" /></form>
</body>
</html>
HTML基础语法入门相关推荐
- C++ C++基础语法入门总结（二）引用-内联函数-C++11新特性
C++基础语法入门总结 C++引用 再谈引用和指针 C++内联函数 附加C++11新特性 auto关键字 基于范围的for循环 指针空值nullptr C++引用 引用:就是某一变量(目标)的一个别名 ...
- C++ C++基础语法入门总结（一）命名空间-输入输出-缺省参数-函数重载
C++基础语法入门总结 C++ 命名空间 如何定义和使用命名空间 C++ 输入与输出 C++ 缺省参数 C++函数重载 名字修饰 extern "c" 推荐阅读 C++ 命名空间 ...
- Python基础语法入门篇(一)
Python基础语法入门篇(二) 1. 注释 在我们工作编码的过程中,如果一段代码的逻辑比较复杂,不是特别容易理解,可以适当的添加注释,以辅助自己 或者其他编码人员解读代码. 注释是给程序员看的,为了 ...
- 零基础学C++——黑马程序员课程笔记（C++基础语法入门篇）
封面来自互联网侵删 视频地址:点击访问 (我这里开发工具选用VSstudio) 此笔记有三个系列: C++基础语法入门篇 C++核心编程篇 点击查看 C++提高编程篇 文章目录 C++初识 变量 常量 ...
- Go（一）：Go基础语法入门
Go基础语法入门 第一个go程序 变量 常量 数据类型 字符串处理 `++` `--` 运算符 逻辑运算符 循环 `for ... := range ...` `switch` 死循环 数组的CURD ...
- C++基础语法入门（一）
C++基础语法入门(一) C++基础语法 与语法对应的实例 C++基础语法 笔记是跟着B站黑马视频学习记下来的,https://www.bilibili.com/video/BV1et411b73 ...
- 黑马程序员 C++ 基础语法入门 学习记录
基础语法入门 文章目录 一.初识C++ 1.1 新建项目 1.2 编写项目 1.3 运行程序 1.4 注释 1.5 变量 1.6 常量 1.7 关键字 1.8 标识符命名规则 二.数据类型 2.1 整 ...
- Vue.js 基础语法 入门语句 Vue学习笔记 v-model 双向数据绑定
Vue.js 基础语法,入门语句,Vue学习笔记 学习网站:https://www.bilibili.com/video/BV15741177Eh vue 的体验 响应式:数据一旦改变,视图就会响应改 ...
- java基础语法入门到类型转换问题，运算符，数据输入，数组，方法概述，Debug模式，以及10个小案例的详细介绍。
java基础语法 目录 java基础语法 1. Java概述 1.1 Java语言发展史(了解) 1.2 Java语言跨平台原理(理解) 1.3 JRE和JDK(记忆) 1.4 JDK的下载和安装(应 ...
- Python基础语法入门
14天学习训练营导师课程: 李宁<Python Pygame游戏开发入门与实战> 李宁<计算机视觉OpenCV Python项目实战>1 李宁<计算机视觉OpenCV P ...
最新文章
- java 注解类说明
- 防止私自接交换机_防止私接家用路由器干扰DHCP功能，禁止用户手动设置IP地址-肖哥...
- JUnit：使用Java 8和AssertJ 3.0.0测试异常
- 转：Java多线程学习（吐血超详细总结）
- 多线程往文件里写数据
- oralce数据库创建同义词
- NMS非极大值抑制原理——目标检测
- java判断简体和繁体字_java获取系统语言（区分简体中文和繁体中文）
- 【IDE】【WebStorm】html排版设置head和body缩进
- 酞菁-氧化石墨烯(NiPc- NHCO-EGO)，复合酞菁材料齐岳生物供应
- 在优矿（uqer.io）上打开量化投资的黑箱-技术分析篇
- android dm 分区异常,硬盘分区时损坏,无法使用PQ和DM,如何修复
- 开源语音助手_开源语音助手软件入门
- 时间块青春版android版,时间块青春版
- AlphaGo之父戴密斯·哈萨比斯：是天才，也是生活里的普通人
- 男生说fb是什么梗_男生聊污是什么意思 男生会对谁聊污
- mail163企业邮箱从哪申请，tom企业邮箱怎么样？
- 用python3爬取天猫商品评论并分析（1）
- 基于Java/Mysql的个人博客网站
- matlab能输入铁心参数,变压器铁心剩磁预测研究