HTML

为什么要学习HTML,学习HTML可以用来做什么?<详情猛戳>

通过链接了解对html的一些简单的认识,那么先简单概述一下

HTML概念

HTML 是用来描述网页的一种语言。

  • HTML 指的是超文本标记语言: HyperText Markup Language
  • HTML 不是一种编程语言,而是一种标记语言
  • 标记语言是一套标记标签 (markup tag)
  • HTML 使用标记标签来描述网页
  • HTML 文档包含了HTML 标签文本内容
  • HTML文档也叫做 web 页面
  • HTML文档通过web浏览器来解析,显示所写内容
  • HTML文档的后缀名一般是.html(推荐)

HTML标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

  • HTML 标签是由尖括号包围的关键词,比如 <html>
  • HTML 标签通常是成对出现的,比如 <b> 和 </b>
  • 标签对中的第一个标签是开始标签,第二个标签是结束标签
  • 开始和结束标签也被称为开放标签闭合标签
  • 有一些标签功能比较简单,使用一个标签即可,这种标签叫做自闭和标签:例如<br/>换行 <hr/> 下划线 <input /> <img />
1
<标签>内容</标签>

HTML标签属性

  • 通常是以键值对形式出现的. 例如 name="alex"
  • 属性只能出现在开始标签 或 自闭和标签中.
  • 属性名字全部小写. *属性值必须使用双引号或单引号包裹 例如 name="alex"
  • 如果属性值和属性名完全一样.直接写属性名即可. 例如 readonly

<!DOCTYPE>标签声明

  • <!DOCTYPE>声明有助于浏览器中正确显示网页。
  • 网络上有很多不同的文件,如果能够正确声明HTML的版本,浏览器就能正确显示网页内容。
  • doctype 声明是不区分大小写的

上述对HTML有了一些简单的认识,那么可以看一下简版html文档树形结构图(如图参考)

由图可得,根元素html分为俩部分元素head和元素body,又基于这俩部分进行一些甚至更多的拓展

又例如在IDE工具pycharm新建一个html文件,可以看到pycharm会为这个文件默认添加一些内容,即必须要有的。

接下来对head和body这俩部分进行阐释

head标签

<head> 标签用于定义文档的头部,它是所有头部元素的容器。<head> 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。

文档的头部描述了文档的各种属性和信息,包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。

如图可得head标签下面有俩条内容,那么它们是什么呢?

下面这些标签可用在 head 部分(详情可点击):<base><link><meta><script><style>, 以及 <title>

<title> 定义文档的标题,它是 head 部分中唯一必需的元素。

提示:应该把 <head> 标签放在文档的开始处,紧跟在 <html> 后面,并处于 <body> 标签或 <frameset> 标签之前。

提示:请记住始终为文档规定标题!

如题,下面代码简单阐释了下head头部信息的一些标签(当然还有其它的)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>  # 声明
<html lang="en">
<head>                 # 头部信息,包含的数据并不会真正作为内容显示给用户
    <meta charset="UTF-8">  # 如果有中午,设定一下编码格式
    <title>病毒尖er</title>  # 标题描述
    <!--<meta http-equiv="Refresh" content="2;url=https://www.baidu.com">-->  # 此代表刷新的概念,即过俩秒跳转到指定的url
    <meta http-equiv="Refresh" content="2">  # 即每俩秒自动刷新
    <meta name="keywords" content="管道工,超级马里奥">  # 搜索关键词
    <meta name="description" content="马里奥是站在游戏界顶峰的超人气多面角色。马里奥靠吃蘑菇成长,特征是大鼻子、头戴帽子、身穿背带裤、还留着胡子。与他的双胞胎兄弟路易基一起,长年担任任天堂的招牌角色">  # 描述内容
    <link rel="icon" href="马里奥.ico">  # 标题图片
</head>
<body>  # body标签里面所包含是真正呈现给用户的数据
    <h1 style="color: chartreuse">我是修水管的马里奥</h1
</body>
</html>

body标签

所有标签统分为 块级和内联

块级标签

HTML块级通过标签<div>来定义,以上标签可以称之为块级标签

注释:<div> 是一个块级元素,也就是说,浏览器通常会在 div 元素前后放置一个换行符。

提示:请使用 <div> 元素来组合块级元素,这样就可以使用样式对它们进行格式化。

内联标签

提示:请使用 <span> 来组合行内元素,以便通过样式来格式化它们。

注释:span 没有固定的格式表现。当对它应用样式时,它才会产生视觉上的变化。

<hn>: n的取值范围是1~6; 从大到小. 用来表示标题.

<p>: 段落标签. 包裹的内容被换行.并且也上下内容之间有一行空白.

<b> <strong>: 加粗标签.

<strike><del>: 为文字加上一条中线.

<em>: 文字变成斜体.

<sup><sub>: 上角标 和 下角表.

<br>:换行.

<hr>:水平线

<div><span>
基本标签

块级标签:<p><h1><table><ol><ul><form><div>

内联标签:<a><input><img><sub><sup><textarea><span>

特殊符号有很多很多,例如 &lt 小于 &gt 大于 &copy 版权,更多点击

标题

HTML标题通过标签<h1>-<h6>来定义

请确保将 HTML 标题 标签只用于标题。不要仅仅是为了生成粗体大号的文本而使用标题。

搜索引擎使用标题为您的网页的结构和内容编制索引。

因为用户可以通过标题来快速浏览您的网页,所以用标题来呈现文档结构是很重要的。

1
2
3
4
5
6
7
8
<body>
    <h1 style="color: chartreuse">我是修水管的马里奥</h1>
    <h2>我</h2>
    <h3>我</h3>
    <h4>我</h4>
    <h5>我</h5>
    <h6>我</h6>
</body>

注释: 浏览器会自动地在标题的前后添加空行。

换行

换行的方式有俩种<p>和<br>

<p>(段落换行)有俩个作用换行隔行  定义一个段落

1
2
3
4
5
6
<body>
    <h1 style="color: chartreuse">我是修水管的马里奥</h1>
    <p>我靠吃蘑菇成长</p>
    <p>特征是大鼻子、头戴帽子、身穿背带裤、还留着胡子.</p>
    <p>与我的双胞胎兄弟路易基一起,我们长年担任任天堂的招牌角色.</p>
</body>

<br>只是单纯的换行

1
2
3
4
5
6
<body>
    <h1 style="color: chartreuse">我是修水管的马里奥</h1>
    <br/>我靠吃蘑菇成长
    <br/>特征是大鼻子、头戴帽子、身穿背带裤、还留着胡子.
    <br/>与我的双胞胎兄弟路易基一起,我们长年担任任天堂的招牌角色.
</body>

如图

 

水平线

HTML水平线通过标签<hr>来定义

1
2
3
4
<body>
    <h1 style="color: chartreuse">我是修水管的马里奥</h1>
    <hr/>
</body>

注释

HTML注释通过标签<!--被注释标签-->

1
<!--<h1 style="color: chartreuse">我是修水管的马里奥</h1>-->

链接

HTML 链接通过标签 <a> 来定义

1
<a href="http://www.cnblogs.com/leguan1314">病毒尖er博客</a>
1
<a href="http://www.cnblogs.com/leguan1314" target="_blank">病毒尖er博客</a> 在新的标签页中打开

上面叙述的是文本超链接,也可以通过图像进行点击超链接(如题,就可以通过1.jpg这张图像可以访问到百度的主页)

1
2
3
4
5
6
7
8
<body>
<p>
您也可以使用图像来作链接:
<a href="https://www.baidu.com">
<img border="0" src="1.jpg"/>
</a>
</p>
</body>

<a></a>也有另外一个作用,锚的概念

例如链接到同一页面的某个位置(也可以通过一个箭头返回顶部的图像返回页面顶部)

图像

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

1
<img src="logo.jpg" width="120" height="60" />
  • img 表示创建一个图片对象
  • src 表示图片的路径 
  • width 图片的宽度
  • height 图片的高度
  • alt 图片没有加载成功的提示
  • title 鼠标悬浮时的提示信息(当然还有其它的属性)

表单标签(form) 

HTML表单通过标签<form>来定义

input,可以理解为输入属性,input属性type="如下"

  • text 文本输入
  • password 密文输入
  • checkbox 多选框
  • radio 单选框
  • file 上传文件,form表单需要加上属性enctype="multipart/form-data"
  • reset 重置;即所填写的内容进行清空操作
  • submit 提交按钮
  • button 按钮;需要配合js使用

input类型补充(以下属性被设置在input类型中)

  • name: 表单提交项的键.注意和id属性的区别:name属性是和服务器通信时使用的名称;而id属性是浏览器端使用的名称,该属性主要是为了方便客户端编程,而在cssjavascript中使用的
  • value: 表单提交项的值.对于不同的输入类型,value 属性的用法也不同
  • checked: radio 和 checkbox 默认被选中
  • readonly: 只读. text 和 password
  • disabled: 对所用input都好使.

select,即下拉框

  • mutiple 多选
  • size 显示在页面的最大限制
  • name 提交项的键    以上三个属性为select内的属性
  • option下拉选中的每一项 属性:value:表单提交项的值. selected: selected下拉选默认被选中
  • optgroup 为每一项加上分组

textarea,即文本编辑框

  • name: 表单提交项的键. 文本框内容即为提交的值
  • cols: 文本域默认有多少列
  • rows: 文本域默认有多少行
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="http://127.0.0.1:8080/index" method="post" enctype="multipart/form-data">
    <h1 style="color: chartreuse">欢迎加入博客园</h1>
    用户 <input type="text" placeholder="手机号/邮箱/用户名"><br><br>
    密码 <input type="password" placeholder="密码"><br><br>
    喜好 音乐<input type="checkbox"> 电影<input type="checkbox"><br><br>
    性别 男<input type="radio" name="sex" value="boy"><input type="radio" name="sex" value="girl">
    <p><input type="file" name="filename"></p>
    <input type="button" value="注册">
    <input type="submit" value="注册">
    <input type="reset" value="重置"><br><br>

    山西省 <select name="sx" id="" size="1" multiple>
            <optgroup label="山西省">
                <option value="jc">晋城</option>
                <option value="ll">吕梁</option>
                <option value="dt">大同</option>
                <option value="ty">太原</option>
                <option value="cz">长治</option>
                <option value="jz">晋中</option>
                <option value="yc">运城</option>
                <option value="gp">高平</option>
            </optgroup>
          </select>

    个人简历 <textarea name="desc" cols="30" rows="10">个人简历</textarea>

</form>
</body>
</html>
form表单实例

html一些其它标签、表格标签、列表标签 更多猛戳

 

更新中......

posted @ 2019-03-17 16:37  初遇ぃ  阅读(215)  评论(0编辑  收藏  举报
//一下两个链接最好自己保存下来,再上传到自己的博客园的“文件”选项中 //一下两个链接最好自己保存下来,再上传到自己的博客园的“文件”选项中