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 />

<标签>内容</标签>

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头部信息的一些标签(当然还有其它的)

<!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 标题标签只用于标题。不要仅仅是为了生成粗体或大号的文本而使用标题。

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

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

<body>
    <h1 style="color: chartreuse">我是修水管的马里奥</h1>
    <h2>我</h2>
    <h3>我</h3>
    <h4>我</h4>
    <h5>我</h5>
    <h6>我</h6>
</body>

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

换行

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

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

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

<br>只是单纯的换行

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

如图

水平线

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

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

注释

HTML注释通过标签

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

链接

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

<a href="http://www.cnblogs.com/leguan1314">病毒尖er博客</a>

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

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

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

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

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

<body>
<p>
<a href="#C4">查看 Chapter 4。</a>
</p>

<h2>Chapter 1</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 2</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 3</h2>
<p>This chapter explains ba bla bla</p>

<h2><a name="C4">Chapter 4</a></h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 5</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 6</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 7</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 8</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 9</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 10</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 11</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 12</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 13</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 14</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 15</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 16</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 17</h2>
<p>This chapter explains ba bla bla</p>

</body>

图像

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

<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 @ 2017-01-22 18:49 病毒尖er 阅读(349) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

liuzhichao

橡胶怎么会打不过年糕

HTML

HTML概念

HTML标签

HTML标签属性

<!DOCTYPE>标签声明

图像

表单标签(form)

公告