HTML初涉
来源：互联网 发布：linux中ping命令 编辑：程序博客网 时间：2024/06/05 18:37
HTML是一门简单的网页制作语言，全称是hyperText Markup Language即超文本标记语言，HTML由标记组成，因此学习HTML最重要的就是记一些标记。
HTML框架：
<html> --html开始标签 <head> -- 文件头（用户在浏览器的主体是看不到的） </head> <body> --文件体（用户在浏览器的主体看得到） </body></html> --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培训 网页的排名 推广 SEO SEO优化 关键词是网页排名的一个因素。 100% 权重 50% 33.3.% （3-5个合适） --> <meta name="keywords" content="java培训,net培训,php培训" /> <!-- 描述： 标题 描述 标题 描述 标题 描述 --> <meta name="description" content="这是一家专门做IT职业培训的公司"/></head>文件体之间写的是你网页想要展示的东西，这里面有大量的标签：
文本标签(body里面的标签) 标题(h1~h6) align：设置位置 水平线(hr) color：线的颜色 换行(br) 标签规定粗体文本(b) 将文本以斜体显示(i) 将文本以下划线显示(u) 段落(p)(书写两段小说进行演示) 段落缩进(blockquote)(主要用于解释或者强调) 上下标(sup和sub)(一般用于公式)y=x2 H2O CaCo3 原样输出(pre)(希望网页上的东西和代码里面写的样式完全一样的时候)marquee: behavior属性值(alternata:来回滚动 scroll:重复滚动 slide:不重复滚动 bgcolor:字幕背景颜色 direction:设置字幕的滚动方向down right left upbgsound: src:需要播放的音乐路径 loop=-1(无限循环) autostart="true"自动播放列表标签： 有序列表ol li（type属性更改序号类型，案例：投票喜欢的女明星） 无序列表ul li（用于条目的罗列，type属性更改序号类型，案例：学生管理系统） 项目列表标签(dl dt dd)（一般用于有层次结构的列表，一个公司员工的列表） 下拉选项：<select/><option/> 行内标签(span) (html中用的非常少，css中用的非常多) 块标签<div> (html中用的非常少，css中用的非常多)超链接标签： 常用的属性： href 表示链接到的地址（文件） target 打开资源方式 _self: 当前窗口打开， _blank: 新窗口打开 协议执行资源的基本流程（超链接的原理）： 使用协议到本地计算机的注册表中查询是否有对应协议的软件（程序），有就执行，没有就不执行。发布个人网站的流程： 1.域名 2.服务器 3.服务器ip和域名进行绑定 4.将网站发布到服务器常见的协议： file:// 本地文件协议（本地或局域网） 在href中不写就是使用这个默认协议 http:// http协议（执行流程） 通常连接到域名或IP地址(画图讲解http协议执行流程) thunder:// 迅雷下载软件的协议 mailto:发送邮件协议超链接作用； 1）链接到资源 2）作为锚点使用 打锚点： <a name="锚点名称"></a> 去到锚点： <a href="#锚点名称">内容</a>img 图像标签 常用属性： src : 表示图片源位置 width: 图片宽度 height: 图片高度 alt: 替代文本。当图片的src属性失效时，alt属性的内容就会生效 title: 提示文本。当鼠标放到图片上面出现。 地图（热点区域）：map 热点： area，设置图片上可以被点击的区域（用工具做之后进行简单分析）2.6 转义字符 在html语法中，存在一些特殊的字符，这些字符是不能直接原样输出。如果想让这些特殊字符原样输出的话， 常见的转义字符： 特殊字符 转义字符(以&开头，以;结尾) 需求:在浏览器中显示：<h1>标题</h1> < < letter than > > greater than & & 需求：在浏览器中输入 华育 国际 空格 王老吉加上商标和版权： 版权 © 商标 ®表格标签 标签： table 表格 tr 行 td 单元格 th 表头 caption 标题 常用的属性： border 表格的边框 width 宽度 heigth 高度 align 对齐方式。 left: 左对齐 center:居中 right：右对齐 rowspan 行合并。把多行的单元格合并 colspan 列合并。把多列的单元格合并表单提交：
表单标签
作用：用于采集用户输入的数据，提交给后台程序处理
<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"/> 重置按钮 框架标签
frameset 框架集 属性： cols: 按照列的方向来划分框架 rows: 按照行的方向来划分框架以上两个属性的值填每个框架的比例或者长度，*号表示其他框架分配完之后剩下的比例frame 表示一个框架，框架中包含一个html页面，有2个或2个以上的frame就会包含在frameset当中。
注意：框架标签不能放在body标签中，否则无法显示！！！
整体代码演练：
1、farm表单和table表格的混用
<!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 border="1" width="300" height="200" bgcolor="#FF0000" align="center"><form action="8.form表单.html" method="get"><tr><td>用户名</td><td><input type="text" name="username" value="请输入用户名" /></td></tr><tr><td>密码</td><td><input type="password" name="password"/></td></tr><tr><td>性别</td><td><input type="radio" value="男" name="gender" />男<input type="radio" name="gender" value="女" />女</td></tr><tr><td>爱好</td><td><input type="checkbox" name="hobby" value="篮球"/>篮球<input type="checkbox" name="hobby" value="足球"/>足球<input type="checkbox" name="hobby" value="乒乓"/>乒乓</td></tr><tr align="center"><td colspan="2"><input type="submit" value="注册" /><input type="reset" value="重置" /></td></tr></form></table></body></html>2、框架集（一个选课系统简易页面）
<!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><frameset rows="20%,80%"><frame src="top.html"/><frameset cols="20%,*"><frame src="left.html"/><frame name="body"/></frameset></frameset></html><!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><h1 align="center">选课系统</h1></body></html><!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="选课.html" target="body">1.大一选课</a><br /><a href="选课.html" target="body">2.大二选课</a><br /><a href="选课.html" target="body">3.大三选课</a><br /><a href="选课.html" target="body">4.大四选课</a><br /></body></html><!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>欢迎来选课</body></html>阅读全文
0 0
- 初涉HTML
- HTML初涉
- 初涉HTML（2）
- 初涉HTML（3）
- HTML初涉（4）
- html
- html
- html
- HTML
- HTML
- html
- html
- html
- html
- HTML
- HTML
- Html
- html
- spring4 + redis 零配置文件
- 调用windows打印机
- 准确率与召回率（Precision & Recall）、F-score
- c++的一些记不住的特性= =
- Halcon学习（五）手眼标定之眼在手外
- HTML初涉
- mysql添加表注释、字段注释、查看与修改注释
- RMQ问题 在线算法-ST算法
- hibernate创建数据库
- HTML的基础框架
- Socket框架
- Cannot read property 'glob' of null
- Linux SD/MMC/SDIO驱动分析
- [Freemarker] 初识FreeMarker
