首页  思维导图  详情

html

2022-05-22 10:24:45   25  举报





AI智能生成

html的基础语法和常用标签

html

笔记整理

简单入门

前端

知识管理

作者其他创作

大纲/内容

概念：

是最基础的网页开发语言
Hyper Text Markup Language 超文本标记语言

超文本:

超文本是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本.

标记语言:

由标签构成的语言。<标签名称> 如 html，xml
标记语言不是编程语言

基础概括

语法

   1. html文档后缀名 .html 或者 .htm
   2. 标签分为
    1. 围堵标签：有开始标签和结束标签。如 <html> </html>
    2. 自闭和标签：开始标签和结束标签在一起。如 <br/>

   3. 标签可以嵌套：
    需要正确嵌套，不能你中有我，我中有你
    错误：<a><b></a></b>
    正确：<a><b></b></a>

   4. 在开始标签中可以定义属性。属性是由键值对构成，值需要用引号(单双都可)引起来
   5. html的标签不区分大小写，但是建议使用小写。

代码

   <html>
    <head>
     <title>title</title>
    </head>
    <body>
     <FONT color='red'>Hello World</font><br/>
     <font color='green'>Hello World</font>
    </body>
   </html>

标签

文件标签：构成html最基本的标签

   * html:html文档的根标签
   * head：头标签。用于指定html文档的一些属性。引入外部的资源
   * title：标题标签。
   * body：体标签
   * <!DOCTYPE html>：html5中定义该文档是html文档

文本标签：和文本有关的标签

注释：

段落标签：<p>

标题标签：<h1> to <h6>
h1~h6:字体大小逐渐递减

换行标签：<br>

<hr>：展示一条水平线

属性

color：颜色
width：宽度
size：高度
align：对其方式

center：居中
left：左对齐
right：右对齐

<b>：字体加粗
<i>：字体斜体
<font>:字体标签
<center>:文本居中

属性：
color：颜色
size：大小
face：字体

属性定义

color：

     1. 英文单词：red,green,blue
     2. rgb(值1，值2，值3)：值的范围：0~255  如  rgb(0,0,255)
     3. #值1值2值3：值的范围：00~FF之间。如： #FF00FF

width：

1. 数值：width='20' ,数值的单位，默认是 px(像素)
2. 数值%：占比相对于父元素的比例

图片标签

img：展示图片

属性：

* src：指定图片的位置

代码示例

<img src="image/jingxuan_2.jpg" align="right" alt="古镇" width="500" height="500"/>

       

       <img src="./image/jiangwai_1.jpg">

       <img src="../image/jiangwai_1.jpg">

列表标签

有序列表：

* ol:
* li:

无序列表：

* ul:
* li:

链接标签

a:定义一个超链接

属性：

1.href：指定访问资源的URL(统一资源定位符)
2.target：指定打开资源的方式
_self:默认值，在当前页面打开
_blank：在空白页面打开

代码举例

<a href="http://www.itcast.cn">点我</a>
       <a href="http://www.itcast.cn" target="_self">点我</a>
       <a href="http://www.itcast.cn" target="_blank">点我</a>
<a href="./5_列表标签.html">列表标签</a>
       <a href="mailto:itcast@itcast.cn">联系我们</a>

div和span