HTML—看完轻松入门

简介: HTML超文本标记语言(Hyper Text Markup Language),超文本标记语言的结构包括“头”部分(英语:Head)、和“主体”部分(英语:Body),其中“头”部提供关于网页的信息,“主体”部分提供网页的具体内容。

概述:


   HTML超文本标记语言(Hyper Text Markup Language),超文本标记语言的结构包括“头”部分(英语:Head)、和“主体”部分(英语:Body),其中“头”部提供关于网页的信息,“主体”部分提供网页的具体内容。


标签元素:


 基本内容:

 

20150727182920860.png


 基本元素:


   空元素:<br>

   带有属性的空元素:<hr color="blue">

   带有内容的元素:<title>http://www.makang.com</title>

   带有内容和属性的元素:<font color="red">http://www.makang.com</font>


 对文本内容的控制:


   1.<p align="#">:表示paragraph 作用:创建一个段,属性align表示段的对齐方式,#可以是left、center、right、justify

   2.<br>:表示line break 作用:换行

   3.<hr color="clr">:表示horizontal rule 作用:插入一条水平线,属性color用来指定线的颜色,clr可以是预定义的颜色名字,例如:red、blue、green、black等等,或者以16进制数表示的颜色值,clr=#rrggbb,例如:#ff0000表示红色。

 

20150727183100548.png


 对文本的控制:


   1.<center>...</center>:使文本居中显示

   2.<hn align="#">...</hn>:用于指出文档的标题,n是从1到6的整数,1表示最大标题,6表示最小标题;属性align用于设置标题对齐的方式,#可以是left、center、right等。

   3.<font size=n color="clr">...</font>:用于设置字体,属性size表示字体的大小,n可以是从1到7的整数,数字越大,字体越大;属性color表示字体的颜色,clr可以是预定义的颜色名字,或者以16进制数表示的颜色值。

   4.<b>...</b>:使文本成为粗体。

   5.<i>...</i>:使文本成为粗体。

 

20150727183001030.png


 列表属性:


   1.创建带数字的列表:<ol>标签中使用start属性,设置起始的序号;<li>标签中使用value属性,改变列表内的编号顺序。

 

20150727183035568.jpg


   2.创建带字符的列表:在<ol>和<li>标签中使用type属性制动标号系统的类型,取值如下:

 

20150727183050919.jpg


   3.创建带有项目符号的列表:在<ol>和<li>标签中使用type属性指定符号的样式,取值如:disc—显示为实心的圆圈、square—显示为实心的方块、circle—显示为空心的圆圈。

   4.创建无符号的列表:<dl>与<dt>无符号列表;<dd>和<dt>缩进的列表。

表格元素:


   表格定义:<table border=n aligh="#" bgcolor="clr">...</table>

      border —边框的宽度,n为从0开始的整数,没有设置将不显示边框。

      aligh  —表格对齐方式,#可以是left、center或right。

      bgcolor—表格背景颜色,与color属性取值一样。

   <caption>...</caption>:表格标题。

   <tr>:在表格中添加新行,如:<tr align="#" valign="#">..</tr>

   <th>...</th>:定义表头。

   <td>...</td>:定义单元格。

建立连接的语法:


   1.超链接标签:<a href="URL">...</a>;href用于指定链接的目标,目标地址由URL定位,开始标签<a>和结束标签</a>之间输入的文本将作为浏览器中显示的链接文本。

   2.建立图片标签:<img src="URL" width=n height=n>;src指定图像资源的位置,属下width和height用于指定图片的尺寸。

   3.URL相对路径、绝对路径、网址:

     <a href="from.html">表单</a>,当前目录下文件

     <a fref="../from.html">表单</a>,当前文件夹下的文件

     <a href="E:/123/12/table.html">表格</a>,绝对路径文件

     <a href="http://http://blog.csdn.net/makang456">马康CSDN</a>网址链接


 特殊字符元素:字符引用和实体引用

 

20150727183227440.png


 <input>元素:

 

20150727183125473.png


感受:


  学习了XTML之后,眼界开阔了许多,为下一步学习打下了一个好基础,不过学到的知识还是在以后运用的过程中才能更深入的理解。

相关文章
|
8月前
|
前端开发 JavaScript 开发工具
【HTML/CSS】入门导学篇
【HTML/CSS】入门导学篇
84 0
|
17天前
|
移动开发 前端开发 Java
|
4月前
|
前端开发 程序员
【前端web入门第二天】01 html语法实现列表与表格_合并单元格
本文介绍了HTML中的列表与表格的使用方法。列表包括无序列表(`&lt;ul&gt;`嵌套`&lt;li&gt;`)、有序列表(`&lt;ol&gt;`嵌套`&lt;li&gt;`)和定义列表(`&lt;dl&gt;`嵌套`&lt;dt&gt;`和`&lt;dd&gt;`)。
85 19
|
4月前
|
前端开发 Windows
【前端web入门第一天】02 HTML图片标签 超链接标签 音频标签 视频标签
本文档详细介绍了HTML中的图片、超链接、音频和视频标签的使用方法。首先讲解了`&lt;img&gt;`标签的基本用法及其属性,包括如何使用相对路径和绝对路径。接着介绍了`&lt;a&gt;`标签,用于创建超链接,并展示了如何设置目标页面打开方式。最后,文档还涵盖了如何在网页中嵌入音频和视频文件,包括简化写法及常用属性。
71 13
|
3月前
|
移动开发 前端开发 JavaScript
HTML入门(详细)
HTML入门(详细)
33 0
|
5月前
|
缓存 Java 应用服务中间件
SpringMVC入门到实战------七、SpringMVC创建JSP页面的详细过程+配置模板+实现页面跳转+配置Tomcat。JSP和HTML配置模板的差异对比(二)
这篇文章详细介绍了在SpringMVC中创建JSP页面的全过程,包括项目的创建、配置、Tomcat的设置,以及如何实现页面跳转和配置模板解析器,最后还对比了JSP和HTML模板解析的差异。
SpringMVC入门到实战------七、SpringMVC创建JSP页面的详细过程+配置模板+实现页面跳转+配置Tomcat。JSP和HTML配置模板的差异对比(二)
|
4月前
|
前端开发 程序员 C++
【前端web入门第一天】01 开发环境、HTML基本语法文本标签
本文档详细介绍了HTML文本标签的基础知识。首先指导如何准备开发环境,包括安装VSCode及常用插件;接着全面解析HTML的基本结构与标签语法,涵盖从基本骨架搭建到注释的使用,以及标题、段落、换行和平行线、文本格式化等标签的具体应用,适合初学者循序渐进地掌握HTML。
|
5月前
|
移动开发 开发者 HTML5
构建你的首个个人网站:HTML基础入门
【8月更文挑战第29天】在数字化时代,拥有一个个人网站是展示自我、分享知识和技能的窗口。本文将引导你通过简单的步骤,使用HTML构建你的第一个个人网站。我们将探索HTML的基础标签,页面结构,以及如何将这些元素融合在一起创建一个简单的网页。无论你是编程新手还是希望扩展你的技术工具箱,这篇文章都提供了一条清晰的路径,帮助你开始你的网站开发之旅。
|
7月前
杨老师课堂之网页制作HTML的学习入门-含有案例1
杨老师课堂之网页制作HTML的学习入门-含有案例
59 3
|
7月前
|
存储 移动开发 API
HTML5本地存储:从入门到精通
HTML5本地存储:从入门到精通
99 1