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 悬停文字, 当鼠标停在图片上禁止不动时, 出现的补充说明

扫描二维码关注公众号,回复: 5451696 查看本文章

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> 标签定义)

15.0杂项

15.1文本格式,设置文本字体元素

  <b>加粗</b><br />

  <i> 斜体 </i><br />

  <del>删除线</del><br />

  <sup>上标</sup><br />

  <sub>下标</sub>

  <br />换行

  <hr />水平线

15.2注释

主要功能是用于解释说明代码,让阅读起来更方便

语法:

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

 这就是这两天学习总结的内容,也许写的不好,希望大家能够谅解和指正。路漫漫其修远兮,吾将上下而求索.

---恢复内容结束---

猜你喜欢

转载自www.cnblogs.com/Erhao/p/10489031.html