分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 技术分享

HTML学习总结&基础篇

发布时间:2023-09-06 02:34责任编辑:苏小强关键词:HTML

何为坚持?一个“勤”,一个“忍”。

年前给自己定的目标,今年一定要坚持多逛园子,多看一些大佬的帖子,然后自己也尽量能够分享自己学习的收获,让自己进步快些,但是多逛园子是做到了,写博客这个东西,今年好像还没分享了一篇,想想真是惭愧。仔细想想,主要原因是自己懒,文笔差,感觉自己技术掌握的东西太少了,对学习到的东西理解不深入,不知道该写些啥......,所以就没有去做,不过在接下来,自己也反复思考,觉得还是希望自己能够勤快点,通过博客记录自己学习的东西,多和大家讨论学习。

今天主要分享的是自己这两天学习HTML的一些知识点,由于自己在学校没有好好学,导致前端的知识点学的是一团糟,所以想趁着最近项目不是很赶,找点时间来补补重新去学习一下。

1.0何为HTML?

HTML(超文本标记语言)是一种用于创建网页的标准标记语言,HTML不需要编译,可以直接由浏览器执行,它的解析依赖于浏览器的内核。它不是一种变成编程语言,而是一种标记语言。

2.0HTML骨架

<!DOCTYPE> ??????//文档声明头<html> ???????????????//html标签<head> ??????????????//head标签的开始<meta charset="utf-8"> //meta标签,设置编码,编码种类有很多,但是常见的是utf-8和gb2312<title>HelloWord</title> //title标签</head> ?????????????//head标签结束<body> ?????????????//body标签开始,主要是包含了可见页面内容</body> ????????????//body标签结束</html> ????????????//html标签结束

3.0两类标签

1、 容器级标签,代表:h系类标签,h标签有六种h1,h2,h3,h4,h5,h6

2、 文本级标签,代表p标签

4.0图片标签

HTML的图像是通过标签<img>来定义的。

语法: <img src=”01.jpg” />

src 图片地址   alt图片无法显示时显示文字  title 悬停文字, 当鼠标停在图片上禁止不动时, 出现的补充说明

5.0图片的相对路径

一、图片和html文件在同一个文件夹中, 则src="01.jpg" 或者src=”./01.jpg”

二、图片在上一层文件夹中, 则  src=”../01.jpg”

三、图片在下一层文件夹中, 则 src="./images/01. jpg"

四、 图片在上一层的上一层文件夹中, 则  src=”../../01.jpg”

注意:超链接的相对路径和图片的相对路径基本一样

6.0给图片添加超链接的语义

意思就是我们点击一张图片可以跳转到一个网页

<a href=”http://www.taobao.com”><img src=”./images/02.jpg” /></a>

7.0页面内的锚点

回到顶部:<a href=”#” >回到顶部</a>

8.0无序列表

无序列表是一个组合标签(缺一不可)

<ul><li>语文</li><li>数学</li><li>英语</li></ul>

9.0有序列表

有序列表是一个组合标签(缺一不可)<ol><li>冠军</li><li>亚军</li><li>季军</li></ol>

10.0自定义列表

<dl>

<dt></dt>

<dd></dd>

<dd></dd>

<dd></dd>

</dl>

11.0 div和span

HTML可以通过<div>和<span>将元素组合到一起。

div是一个块级元素,可以包含段落,表格等内容,用于放置不同的内容。一般我们在网页通过div来布局定位网页中的每个区块。
span是一个内联元素,没有实际意义,它的存在纯粹是为了应用样式,给一段内容加上<span></span>标记可以通过在span上定义样式来设定其内容的样式。

12.0表单元素

表单主要获取用户填写的数据,然后通过浏览器向服务器传送。

表单使用的标签(<form></form>)

12.1文本框

<form><input type="text" name=”username”></form>

Input  就是输入的意思  type是类型  text就是文本 name是元素的名称 value是input元素的值

12.2密码框

<form><input type=”password” name=”pwd”></form>

Input  就是输入的意思  type是类型  password就是密码,代码密码字段不会以明文形式显示,而是以星号或者原点代替

12.3单选框

<form><input type="radio" name="sex" ?value=”male”>男<input type="radio" name="sex" ?value=”female”>女</form>

 要实现单选功能, 必须使用name属性, 让该属性具有相同的值, 那么就成组, 就可以实现单选功能。

12.4复选框

<form><input type="checkbox" name="hobby” value="basketball">打篮球<input type="checkbox" name="hobby” value="football">踢足球</form>

12.5 label标签

<form><input type="checkbox" name="sex" id=”male” value="1"><label for=”male”>男</label></form>

12.6下拉列表

<form><select><option>C#</option><option>Java </option><option>PHP</option></select></form>

12.7多行文本域

<form><textarea cols=”20” rows=”10” name=”content”></textarea></form>

name 是元素的名称 rows是指定文本框的高度 cols  是指定文本框的宽度

12.8隐藏域

<form><input type="hidden” name="id” value="1”/></form>

12.9上传文件

<form><input type="file” name="image"/></form>

利用这项功能时,在 form 标签中要指定method属性。要把method 指定为post, enctype属性指定为 multipart/form-data。

 multiple     控制是否上传多文件

12.10三种按钮标签

普通标签

<form><input type="button" value="登录" /></form>

提交按钮

<form><input type="submit" value="提交"/></form>

重置按钮

<form><input type="reset" value="重置"/></form>

13.0 <iframe>内嵌框架

语法:<iframe src="url" name="框架名"></iframe>
<iframe src="http://www.taobao.com" name="taobao" height="800" width="1080"></iframe>

主要属性:

 width 指定框架的宽度 属性值:px ,%

heigh 指定框架的宽度 属性值:px ,%

scrolling 是否显示滚动条 属性值:yes,no,auto

frameborder 是否显示边框属性值:1, 0  

 14.0表格

表格是由<table>标签来定义。每个表格均有若干行(由 <tr> 标签定义),每行被分割为若干单元格(由 <td> 标签定义)

语法:

<table border="1"> ???<tr> ???????<td>12</td> ???????<td>12</td> ???</tr> ???<tr> ???????<td>21</td> ???????<td>21</td> ???</tr></table>

HTML学习总结&基础篇

原文地址:https://www.cnblogs.com/Erhao/p/10488152.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved