HTML基础入门

Posted jiangmingbai

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了HTML基础入门相关的知识,希望对你有一定的参考价值。

学习推荐地址w3school

一、html页面结构

1、前端

前端开始中最基本的也是最必须的三个技能,前端的开发中,在页面的布局时:

  • HTML:页面结构,可以把他看成一个文档,定于展示页面的内容结构
  • CSS:页面表现,元素的大小、颜色、位置、隐藏或显示、部分动画效果
  • javascript:页面行为,部分动画效果,页面与用户的交互,页面功能

2、HTML历史

HTML:超文本标记语言,是网页制作必备的编程语言,超文本就是指页面可以包含图片,连接,甚至音乐,程序等非文字元素

  • HTML2.0:是1996年由internet工程工作小组的HTML工作小组开发的
  • HTML3.2:作为W3C标准发布于1997年1月14日,HTML3.2向HTML2.0标准添加了被广泛运用的特性,如:字体、表格、appies、围绕图像的文本流、上标和下标
  • HTML4.0:被发布1997年12月18日,而仅仅进行了一些编辑修正的第二版本发布于1998年4月24日。HTML4.0最重要的特性是引入了样式表(CSS)
  • HTML4.01:发布于1999年12月24日(微小改进)
  • XHTML1.0:发布于2000年1月20日,使用XML对HTML4.01进行了重新的表示
  • HTML5:,W3C于2014年1月22日发布工作草案

3、HTML的页面结构

超文本编辑语言的结构包括:头部(head)、和主体(boby),其中头部提供关于网页的信息,主体提供网页的具体结构

<!DOCTYPE html>
<html lang="en">
<head>
    <!--头部信息,不会在页面显示-->
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--主体部分 页面中显示内容-->
    <h1>第一个网页页面</h1>
</body>
</html>

1. 文档声明

  • HTML5: <!DOCTYPE html>

2. 页面头部

  • 第二行和最后一行组成的html标签对,定义html文档的整体
  • head和boby标签对是它的第一次子元素
  • head标签对:标签里负责对网页进行一些设置以及定义标题,设置包括定义网页的编码格式,外链css样式文件和js文件,设置的内容不会显示在网页上,标题的内容会显示在标题栏

3. 页面内容

  • body标签对:元素定义文档的主体,就是页面显示的内容
  • body元素包含文档的所有内容(文本、超链接、图像、列表、表格等)

二、常见的HTML标签

1、注释:<!-- -->

  • 注释标签用于源代码中插入注释、注释不会显示在游览器中
  • 代码中合理使用注释有助于以后的时间对代码编辑

2、标题标签:

  • <h1>-<h6>标签对定义
    • h1 定义最大的标题
    • h6 定义最小的标题
  • 由于h元素拥有确切的语义,因此请慎重的选择恰当的标签层级来构建文档结构,因此请不要用比标题标签来改变同一行的字体大小
<!--标题标签-->
    <h1>标题1</h1>
    <h2>标题2</h2>
    <h3>标题3</h3>
    <h4>标题4</h4>
    <h5>标题5</h5>
    <h6>标题6</h6>

3、段落和换行标签

  • <p></p>: p标签定义段落,元素会自动在其前后创建一些空白,游览器会自动添加这些空间,也可以在样式中规定
    • &nbsp; :段落中空格可以加入这个来增加段落的空格,一般不推荐使用,在样式控制格式
  • <hr> : hr标签在HTML页面中创建一条水平线,水平分割线可以在视觉上将文档分割成各个部分
  • <br> :换行标签
<hr>
<p>这个是段落标签 &nbsp;&nbsp;段落<br>标签</p>
<hr>

4、块标签

  • <div></div>: div标签块元素,表示一块内容,没有具体的语义,可以把页面内容分成一个个结构块
  • <span></span>: 行内元素,表示一行中的一小段内容,没有具体的语义,如果行内部分内容需要渲染时,可以用sapn标签分成一小块一小块的去渲染
<div >块标签,没有具体语义,</div>
<div>将结构分成一块一块的</div>
<p>这里是正常颜色<span style="color:red" >python是红色</span>
<span>java</span></p>

5、含样式和语义的行内标签

标签 含义
<i></i> 行内元素,字体为斜体
<em></em> 行内元素,语义为强调内容,表示重要,效果斜体
<b></b> 行内元素,字体加粗
<strong></strong> 行内元素,语义强调,表示非常重要,效果字体加粗
<i>字体是斜体</i><br>
<em>语义为强调,表示重要,效果斜体</em><br>
<b>粗体字</b>
<strong>语义强调,表示非常重要,效果字体加粗</strong>

6、图像标签和链接标签

图片标签:<img src=" alt="">:

  • img元素是向网页中嵌入一个图像
  • 请注意,从技术上讲,img标签并不会在网页中插入图像,img变迁创建的是被引用图像的占位空间
  • 属性
    • src:图片地址
    • alt:规定在图像无法显示时的替代文本

链接标签:<a href=""></a>

  • 定义超链接,用于从一张页面链接到另一张页面
  • 属性
    • href :连连接的地址
    • a标签中间的文本为连接说明和点击跳转的入口

样式链接:<link rel="stylesheet" type="text/css" href="theme.css">

  • 表示连接到一个外部样式,用在头部中
  • 属性
    • rel :规定当前文档与被链接文档之间的关系。
    • type :规定被链接文档的 MIME 类型。
    • href :规定被链接文档的位置。
<img src="img/bd_logo1.png" alt="百度首页" width="200" height="100">
<img src="img/bd_logo12222.png" alt="百度首页"><br>
<a href="http://www.baidu.com">百度一下</a>

<head>
    <link rel="stylesheet" type="text/css" href="">
</head>

7、列表

有序列表: <ol></ol>

  • <li></li> :表示列表的一列数据
  • li标签文字部分表示列表的内容
  • 有序表示列表有顺序1,2,3,4,5
<ol>
    <li>列表一</li>
    <li>列表一</li>
    <li>列表一</li>
    <li>列表一</li>
    <li>列表一</li>
</ol>

无序列表:<ul></ul>

  • <li></li> :表示列表的一列数据
  • li标签文字部分表示列表的内容
  • 无需表示,列表没有顺序,小黑点表示
<ul>
    <li>无序一</li>
    <li>无序一</li>
    <li>无序一</li>
    <li>无序一</li>
    <li>无序一</li>
</ul>

8、表格

表格标签:<table border="1"></table>

  • 简单的html表格由table元素以及一个或者多个tr、th、td标签组成
    • <th></th>:表示表格的表头
    • <tr></tr>:表示表格的行
    • <td></td>:表示表格的列
<!--border="1" 表示表格的线条粗细-->
<table border="5">
    <!--定义一行表头-->
    <tr>
    <th>姓名</th>
    <th>年龄</th>
    <th>性别</th>
    </tr>
    <!--定义两行-->
    <tr>
        <!--定义列和定义单元格内容-->
        <td>小明</td>
        <td>18</td>
        <td>男</td>
    </tr>

    <tr>
        <td>小明</td>
        <td>18</td>
        <td>男</td>
    </tr>
</table>

三、HTML表单

1、表单标签:input

<form action="url" method="get/post"></form>

  • action="url" :规定当提交表单时向何处发送表单数据,接口地址。
  • method="get/post":规定用于发送表单数据的 HTTP 方法。
  • form表单中包含的元素标签
元素标签 作用
<lable></lable> 中间写入文本,为表单元素定义文字标注
<input> 定义通用的表单元素
<textarea></textarea> 定义多行文本输入框
<slect></select> 定义下拉表单元素
<option></option> 定于下拉表单中的元素选项,配合select标签使用

2、input标签的属性

  • value属性: 定义表单元素的值
  • name属性: 定于表单元素的名称,此名称是提交数据时的键命(接口请求参数的名称)
  • placeholder属性: 帮助用户填写输入字段的提示
<!--name、value、placeholder属性示例-->
<form action="" method="get">
    <lable>帐号</lable>
    <input type="text" name="username" placeholder="请输入用户名"><br>
    <lable>密码</lable>
    <input type="password" name="pwd" placeholder="请输入密码"><br>
    <input type="submit" value="登陆">
</form>
  • type属性
作用
text 定义单行文本输入框
password 定义密码输入框
radio 定义单选框
checkbox 定义复选框
file 定义上传文件
submit 定义提交按钮
button 定义一个普通按钮
reset 定义重置按钮
image 定义图片作为提交按钮,用src属性定义图片地址

以上是关于HTML基础入门的主要内容,如果未能解决你的问题,请参考以下文章

推荐net开发cad入门阅读代码片段

1.JSP入门

Cg入门20:Fragment shader - 片段级模型动态变色(实现汽车动态换漆)

mybatis入门基础----动态SQL

Cg入门16:Fragment shader - 片段级光照

Atom编辑器入门到精通 Atom使用进阶