HTML基础学习记录
HTML基础学习记录
- 一、HTML的学习
- 1.网页的组成
- 2.HTML是什么
- 2.HTML特点
- 3.HTML基本结构
- 4.HTML标签语法
- (1)< html >标签
- (2)< head >标签
- (3)< title >标签
- (4)< body >标签
- (5)DTD
- 5.HTML常用标签
- (1)标题标签
- (2)段落标签
- (3)换行标签
- (4)文本格式化标签
- (5)图像标签
- (6)音频视频标签
- (7)超链接标签
- (8)无序列表标签
- (9)有序列表标签
- (10)定义列表标签
- (11)布局标签
- 6.表格制作
- (1)表格基础
- (2)表头单元格
- (3)分区标签
- 7.表单
- (1)表单域标签
- (2)表单元素
- 8.文本域< textarea >
- 二、制作一个登录框
一、HTML的学习
1.网页的组成
网页是由前端三层：HTML（结构层）、css（样式层）、JavaScript（行为层），其他多媒体内容：图片、视频、音频、超链接等组成的。
2.HTML是什么
HTML是HyperText Markup Language的简写，即超文本标记语言，用于搭建网页的结构。（超文本: 普通文本只能显示文字,超文本除了显示基本文字之外还能显示图片,视频,音频,文件特殊效果等；标记是HTML的组成元素）
HTML 不是一种编程语言，而是一种标记语言 (markup language)
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
2.HTML特点
- 不需要编译
- 后缀名*.html或*htm
3.HTML基本结构
<!DOCTYPE html>
<html>
<head><title>网页的标题</title>
</head>
<body>网页的主体
</body>
</html>
4.HTML标签语法
标签名必须书写在一对尖括号<>内部。
< html >< /html >
标签分为单标签和双标签，双标签必须成对出现。
< p >< /p > 双标签
< br/ > 单标签
双标签包含开始标签和结束标签，结束标签必须书写关闭符号/，单标签也需要进行封闭书写。在HTML5中，单标签可以不写关闭符号。
(1)< html >标签
作用:定义HTML文件的根元素，表示整个的HTML文档，所有的标签要书写在标签内部
(2)< head >标签
作用:定义HTML文件的头部，它是所有头部元素的容器
(3)< title >标签
作用1:让页面拥有一个属于自己的标题。
作用2:title中的关键字可以作为搜索引擎抓取时的关键字，提高SEO搜索引擎优化。
作用3:内部的内容会显示在搜索结果的标题部分。
作用4:作为浏览器收藏夹默认的网页标题。
(4)< body >标签
作用:定义网页的主体部分，用于存放所有的HTML显示内容的标签< p >,< h1 >,< div >等。
< body >内部的元素内容会显示在浏览器窗口中。
(5)DTD
完整的HTML文件的第一行内容叫做文档定义类型，英文DocType Definition， 简称DTD。也称作文档声明类型，DocType Declaration。
作用：告知浏览器该网页使用的是哪个版本的HTML规范，让浏览器按照对应 版本的HTML语法进行解析页面。
5.HTML常用标签
HTML注释语法:
< !-- 书写注释内容 – >
注释的特点：注释只在源代码中可见，在浏览器窗口是不显示的。
(1)标题标签
< h1 >定义最大的标题，< h6 >定义最小的标题。< h1 >-< h6 > 标签都是双标签，且是容器级标签
< h1 >一级标题< /h1 >
< h2 >二级标题< /h2 >
< h3 >三级标题< /h3 >
< h4 >四级标题< /h4 >
< h5 >五级标题< /h5 >
< h6 >六级标题< /h6 >
(2)段落标签
< p >标签是双标签且为文本级标签。内部只能放置文本、图片、表单元素，或者废弃的< font >标签等。
< p >这是一个段落< /p >
(3)换行标签
< br / >（breaking）标签是HTML中一个简单的换行符。
< br / >标签是一个单标签。
在需要换行的位置可以使用< br / >标签书写，但是< br / >与< p >不同，< br / >没有建立新的 段落的语义，只是简单的进行强制换行。
< p >这是第一< br / >个段落</p>
< p >这是第二个段落< /p >
(4)文本格式化标签
| 标签 | 描述 |
|---|---|
| b | 定义粗体文本，bold |
| big | 定义大号字 |
| em | 定义着重文字，emphasis,自带斜体效果 |
| i | 定义斜体字，italic |
| small | 定义小号字 |
| strong | 定义加重语气，自带加粗效果 |
| sub | 定义下标字，subscript |
| sup | 定义上标字，superccript |
| ins | 定义插入字，自带下划线效果，insert |
| del | 定义删除字，delete |
| s | 不赞成使用，使用del代替，strike的简化 |
| strike | 不赞成使用，使用del代替 |
| u | 定义下划线，不赞成使用，使用css中样式代替，underline |
(5)图像标签
标签的作用是在指定的位置插入一张图片。
在HTML文件，常用的插入图片的类型有：jpg、png、gif。
< img >常用属性
| 属性名 | 描述 |
|---|---|
| src | 表示图片的路径； |
| width | 表示图片的宽度； |
| height | 表示图片的高度； |
| border | 边框属性；它的值可以设置边框的厚度； |
| title | 设置提示文本； |
| alt | 设置图像没有找到时候的替换文本； |
(6)音频视频标签
音频使用标签进行定义。
是双标签。
同图片一样，需要使用src属性设置音频查找的路径。
音频文件支持的格式包括：.mp3、.ogg、.wav。
<audio src="audio.mp3"> </audio>
视频的设置方法与音频非常类似。
视频使用标签进行定义。
是双标签。
使用src属性设置视频查找的路径。
视频文件支持的格式包括：.mp4、.ogg、.webm。
<video src="video.mp4"></video>
音频和视频控制条属性 音频和视频加载后不会自动显示播放器的控制条，需要使用controls属性进行设置，属性值也是 controls。
<audio src="audio.mp3" controls="controls"> </audio>
<video src="video.mp4" controls="controls" ></video>
(7)超链接标签
在HTML中使用< a >标签可以创建链接。
a全称anchor，锚的意思。
< a >为双标签。
作用：在指定的位置添加超级链接，提供用户进行点击和跳转。
< a >标签可以实现两种跳转：跨页面跳转、页面内跳转。实现跳转的方式需要用到一些标签 属性。
< a >链接内容< /a >
href属性
href全称hypertext reference，超文本引用，用于规定链接的目标地址。
书写方式如下：
< a href="目标地址" >链接内容< /a >
target属性
使用target 属性，可以定义被链接的文档在何处跳转显示。
属性值有两种：
_self：默认值，表示跳转的页面在当前窗口打开，不会打开新的窗口。
_blank：空白的，表示跳转的页面在新窗口打开。
< a href="http://www.lagou.com" target="_blank">R</a >
title属性
title设置的是鼠标悬停时的提示文本，与标签类似。
属性值：自定义的文字内容。该属性用于给用户进行提示，该链接的功能是什么，提高用户的体验。
<a href="smile.html" title="点击查看源网页">
<img src="data:images/smile02.png" /></a>
(8)无序列表标签
无序列表需要两个标签参与，分别是< ul >和< li >。ul：unordered list，表示定义一个无序列表的大结构。li：list item，列表项，定义的是无序列表内的某一项。< ul >和< li >是嵌套关系，快捷键：ul>li。一个列表中可以有任意个列表项。
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
<li>列表项4</li>
</ul>
(9)有序列表标签
有序列表的语法与无序列表非常类似，只是在语义上有差异。有序列表由两个标签组成，分别是< ol >和< li >。ol：ordered list，表示定义一个有序的列表的大结构。li：list item，定义的是有序列表的每一项。< ol >和< li >是嵌套关系，快捷键：ol>li。< ol >标签内部可以嵌套任意多个< li >标签。< ol > < li >列表项1< /li > < li >列表项2< /li > < li >列表项3< /li > < li >列表项4< /li > < /ol >
<ol> <li>列表项1</li><li>列表项2</li> <li>列表项3</li><li>列表项4</li></ol>
(10)定义列表标签
自定义列表不仅仅是一列项目，而是项目及其注释的组合。由三个标签组成完整的结构，包含< dl >、< dt >和< dd >。dl：definition list，表示定义一个自定义列表的大结构。dt：definition term，表示定义自定义列表中的一个主题或者术语。dd：definition description，定义解释项，表示描述或解释前面的定义主题。< dl >内部只能嵌套< dt >和< dd >，< dt >与< dd >是同级关系。
<dl><dt>主题</dt> <dd>解释项</dd></dl>
(11)布局标签
< div >标签
div：全称division，分割、区域、跨度的意思。俗称大盒子。
< div >是双标签，是最经典的容器级标签，内部可以放置任意内容。
作用：多用于划分网页区域，进行结构布局。一般将相关的内容使用< div >包裹起来，整体设置大的布局效果。
< span >标签
span：小区域、小跨度的意思。俗称小盒子。
< span >也是双标签，容器级标签。
作用：在不改变整体效果的情况下，可以辅助进行局部调整。
6.表格制作
(1)表格基础
创建一个简单的表格至少有三个标签组成，分别是< table >、< tr >、< td >标签。table：表格，定义的是整个的表格大结构。tr：table rows，表格的行，定义的是表格由多少行组成。td：table data，表格数据，也叫表格单元格，定义的是每一行内部的单元格。 三者的关系：table>tr>td.一个表格中有多个行，每个行中有多个单元格。
< table >的属性
< table >标签可以添加border边框属性。属性值：数字，表示像素值。表格的单元格之间有默认的空隙，会导致双线边框。解决方法：设置标签样式属性style。属性值：border-collapse : collapse; 表示边框塌陷。
(2)表头单元格
如果要绘制表头，使用标签< th >，table head data，表头单元格。
在表格中绘制的时候，替换的是< td >的位置。
< th >标签中自带默认的css样式效果，文字显示粗体居中。
单元格属性
表格的单元格可以进行合并，通过< th >和< td >的两个属性可以进行合并设置。
rowspan：跨行和并。上下的合并。
colspan：跨列合并。左右的合并。
属性值：数字，数字是几表示跨几行或跨几列合并。
(3)分区标签
< table >内部最直接的子级包含四个分区标签，他们都是双标签。caption：表格的标题，内部书写标题文字。thead：table head，表格的头部。内部嵌套tr>th。tbody：table body，表格的主体。内部嵌套tr>td。tfoot：table foot，表格的页脚。内部嵌套tr>td。
7.表单
HTML 表单用于搜集不同类型的用户输入。
(1)表单域标签
HTML表单域使用< form >标签进行定义。
< form >标签是一个功能性标签，填写的表单信息要想正确的提交到后台服务器，必须放在 一个< form >标签之内。
< form >标签为双标签，容器级标签。
表单域标签属性
标签通过对应属性规定提交数据的方法和提交位置。
| 属性名 | 属性值 | 描述 |
|---|---|---|
| action | url | 指定接收并处理表单数据的服务器程序的url地址 |
| method | get/post | 用于设置表单数据的提交方式 |
| name | 自定义名称 | 规定表单的名称 |
示例
<form action="xxx.php" method="post/get" name="message">提示信息及表单控件书写位置 </form>
(2)表单元素
< input >标签常用属性
| 属性名 | 属性值 | 描述 |
|---|---|---|
| type | text | 单行文本输入框 |
| type | password | 密码输入框 |
| type | radio | 单选框 |
| type | checkbox | 复选框 |
| type | butto | 普通按钮 |
| type | rese | 重置按钮 |
| type | submit | 提交按钮 |
| type | image | 图像形式按钮 |
| type | file | 定义输入字段和"浏览"按钮，供文件上传。 |
| type | hidden | 定义隐藏的输入字段 |
| name | 自定义 | 定义控件的名称 |
| value | 自定义 | 定义控件的默认文本值 |
| size | 数字 | 定义控件的宽度 |
| checked | checked | 定义选框控件的默认被选中项 |
| maxlength | 数字 | 定义允许输入的最多的字符数 |
8.文本域< textarea >
< textarea >有两个标签属性，可以设置显示区域大小。rows：行，属性值是数字，数字是几表示文本框显示的最大行数，如果超过了行数， 会被隐藏并且出现滚动条。cols：列，属性值是数字，数字是几，表示在出现滚动条之后，每一行显示的最大字 节数（一个汉字按2字节计算）。
<textarea cols="30" rows="10">默认输入文字</textarea>
二、制作一个登录框
代码如下：
<html>
<head>
<title>test</title>
</head>
<body >
<fieldset>
<table background="images\bg_img1.jpg " width="933" height="412"><tr height="170"><td width="570px"> </td><td> </td></tr> <tr>
<td> </td>
<td><table>
<form method ="POST" action="http://localhost:8080/test/hello.html?login=%B5%C7%C2%BC" name="frmLogin" ><tr><td>用户名：</td><td><input type="text" name="username" value="Your name" size="20" maxlength="20" οnfοcus="if (this.value=='Your name') this.value='';" /></td><td > </td><td> </td></tr><tr><td>密 码：</td><td><input type="password" name="password" value="Your password" size="20" maxlength="20" οnfοcus="if (this.value=='Your password') this.value='';" /></td><td> </td><td> </td></tr><tr><td>验证码:</td><td><input type="text" size="" name="inputcode" value="Your code" οnfοcus="if (this.value=='Your code') this.value='';" /></td><td><img src="data:images\bg_img2.gif" alt="打不开网页"> </td><td><a href="#" οnclick="shuaxin();">刷新</a></td></tr><tr><td><input type="checkbox" name="zlogin" value="1">自动登录</td></tr></table></td><tr><td> </td> <td><table><tr><td><input type="submit" name="login" value="登录" onClick="return validateLogin()"/></td><td><input type="reset" name="rs" value="重置"></td><td><input type="button" name="button" value="注册" οnclick="location.href='http://localhost:8080/test/zc.html?login=%B5%C7%C2%BC'"></td></tr></tr></table></td></table>
</fieldset>
</form>
<script language="javascript">function validateLogin(){var sUserName = document.frmLogin.username.value ;var sPassword = document.frmLogin.password.value ;var sinputCode =document.frmLogin.inputcode.value ; if ((sUserName =="") || (sUserName=="Your name")){alert("请输入用户名!");return false ;}if ((sPassword =="") || (sPassword=="Your password")){alert("请输入密码!");return false ;}if ((sinputCode =="") || (sinputCode=="Your code")){alert("请输入验证码!");return false ;}} </script>
</body>
</html>效果图如下：
HTML基础学习记录相关推荐
- 无线通信零基础学习记录（2）——GSM空中接口物理层的设计
无线通信零基础学习记录(2)--GSM空中接口物理层的设计 本章解释清楚了之前未搞懂的名词,如时隙等,以及各种信道类型,在此一并总结. TDMA空中接口技术 时分多址(TDMA,Time Divisi ...
- 主线剧情01-ARM-IMX6ULL基础学习记录
ARM & i.MX6ULL 基础学习记录 编辑整理 by Staok 本文大部分内容摘自"100ask imx6ull"开发板的配套资料(如<IMX6ULL裸机开发 ...
- react基础学习记录一
react 学习记录 自己学习,记录便于后面回顾 基础知识点的记忆: state与props state是组件自己的数据,而props是父组件通过属性赋值方式将其传送给组件:这样达到了,父子组件数据的 ...
- R语言基础学习记录4：重要函数
时间: 2018-07-18(学习) 2018-07-22(学习记录) 教程:慕课网 <R语言基础> 讲师:Angelayuan 补充内容: R语言常用函数总结大全.gl()函数 学习内容 ...
- vue基础学习记录（一）
根据B站黑马程序员 VUE教程基础学习 为了毕业设计做准备 Vue基础 工具准备 Vue的基本使用步骤 vue模板语法 `v-cloak`指令用法 数据绑定指令 数据响应式 双向数据绑定 MVVM设计 ...
- Go基础学习记录 - 编写Web应用程 - 完善Blog Model
完善Blog Model 前面的章节 我们分别介绍了MySQL.SQLite.PostgreSQL等数据库的使用 本节简单介绍并完善下我们自己的小博客的Model部分,这部分暂时先分享下Blog Mo ...
- 傅里叶变换零基础学习记录
文章目录 1 不谈数学公式,说明傅里叶变换的前世今生 1.1 什么是傅里叶变换? 1.2 为什么要有傅里叶变换? 1.3 为什么是正弦波而不是三角波或其他波? 2 如何求傅里叶变换 TODO 2.1 ...
- Redis基础学习记录(1)
最近因为一些原因用到Redis不得不学一点,就想着记录一下学习的印记.若有不对的地方还望指出为谢. Redis (REmote DIctionary Server) 是用 C 语言开发的一个开源的高性 ...
- python基础学习记录
#学习的课程是跟随着 网易云课堂中 同时推荐一下 这个课程不错哦 http://study.163.com/course/courseMain.htm?courseId=1004106037 老师学习 ...
最新文章
- [洛谷P5137]polynomial
- 字节跳动最新开源！java语言程序设计进阶篇
- 网络推广软文浅谈网站优化过程中图片的优化技巧和注意事项！
- 【IDEA】干掉注释自动在行首
- 郑州轻工业学院OJ-杨辉三角
- Json.NET特殊处理64位长整型数据
- IronJS与CSScript
- Android速度仪表盘，速度评级小车动画（模仿电脑版360宽带测速器）
- 三种CSS样式实现（内联样式、内联样式表、外联样式表）
- ASP.NET 入门基础--搭建网站开发环境
- r730 raid5 linux 驱动,Dell power edge R730 raid卡安装配置
- itunes计算机无法启动,电脑怎么打开itunes
- 微信网页授权获取用户基本信息 --- 20/03/16
- js 显示12小时，24小时制时间
- 你还在为“收钱”发愁吗？BeeCloud打造支付平台
- 在MySQL内部存储代码
- 我的世界java版存档转基岩版_我的世界基岩版与java版存档互转
- 爱的1000+篇文章总结
- CSS Class 3
- 固体微电子学与半导体物理学（六）