其他分享
首页 > 其他分享> > HTML 超文本标记语言——html笔记

HTML 超文本标记语言——html笔记

作者:互联网

一、认识HTML

1. 概念

HTML(Hyper Text Markup Language),超文本标记语言,顾名思义,超文本就是除了文本还有其他类似于图片、音频、视频的标记语言。

image-20210809082708375

1.1 超文本

超出文本之外的内容

1.2 标记

无论是文本、图片、音频还是视频,想要将其呈现出来,就需要使用特殊的标记来进行表示。

image-20210809082742330

2. 意义

2.1 网站的根本

各大网站均是由HTML语言所构建的。

image-20210809082823561

image-20210809082856077

image-20210809082958761

image-20210809083228710

2.2 后端的基石

我们必须掌握网站的结构,才能在其基础之上构建后台脚本程序。

2.3 网安的桥梁

掌握网站的前后台设计,网络安全的落实才有迹可循。

3. 关系

3.1 HTML:搭架子

就像盖一个大楼,一开始就是钢筋混凝土搭建起来的框架。虽然框架已经有了,但是没有任何装修。

3.2 CSS:搞装修

使用CSS可以让我们的大楼变得更漂亮,网页也是同理,可以使用CSS加装饰。

3.3 JavaScript:搞特效

使用HTML+CSS构建的网站,虽然已经足以满足我们的需求,但是并不够高端,我们可以使用JavaScript让网站于用户的交互更加友好。

二、基础语法

1. 标签/标记分类

1.1 单标签

名字只出现一次,且使用斜杠直接将自己结束的标签,就是单标签。

1.2 双标签

名字出现两次,在后面的标签使用斜杠结束的标签,就是双标签。

2. HTML文件

新建HTML文件的方法非常简单,右键新建一个文本文档,将其后缀名修改为 .html 即可。

3. 编辑器

HTML的可用编辑器非常多,我们推荐使用 Notepad++、Sublime、PHPStorm。

4. 主体结构

每个HTML网页的构成,都脱离不了以下的基础代码,每创建一个HTML文档,都将这些代码加入其中,可以帮助我们更方便快捷的开始编写HTML脚本。

<span style="background-color:#dadada"><span style="color:#1f0909"><span style="color:#555555"><!DOCTYPE html></span>
<span style="color:#117700"><</span><span style="color:#117700">html</span><span style="color:#117700">></span>
    <span style="color:#117700"><</span><span style="color:#117700">head</span><span style="color:#117700">></span>
        <span style="color:#117700"><</span><span style="color:#117700">meta</span> <span style="color:#0000cc">charset</span>=<span style="color:#aa1111">"utf-8"</span><span style="color:#117700">></span>
        <span style="color:#117700"><</span><span style="color:#117700">title</span><span style="color:#117700">></span>网页标题<span style="color:#117700"></</span><span style="color:#117700">title</span><span style="color:#117700">></span>
    <span style="color:#117700"></</span><span style="color:#117700">head</span><span style="color:#117700">></span>
    <span style="color:#117700"><</span><span style="color:#117700">body</span><span style="color:#117700">></span>
    <span style="color:#117700"></</span><span style="color:#117700">body</span><span style="color:#117700">></span>
<span style="color:#117700"></</span><span style="color:#117700">html</span><span style="color:#117700">></span></span></span>
  1. <!DOCTYPE html>:声明当前文档格式为html格式

  2. <html></html>:网页文件最外层标签,包含网页所有内容

  3. <head></head>:文件的头信息,标签之间通常包含网页标题,编码等内容;这里的内容不会显示在网页内容中

  4. <body></body>:网页的主体标签,标签之间包含网页的正文内容,如:文字、音频、视频、图片,会显示在网页中

5. 注释符号

被注释的内容不会呈现在网页当中,但是通过网页的源代码是可以看到HTML的注释的,因此不要再注释当中记录重要信息。

6. 标签属性

描述一个人的属性,通常指的的是这个人的身高、体重、肤色等内容;而描述一个标签的属性,则代表了设置这个标签的颜色、宽高、粗细等内容。

6.1 属性格式

<div 属性名1='属性值1' 属性名2='属性值2' 属性名n='属性值n'></div>

6.2 注意事项

7. 属性练习

给body标签尝试添加一下属性试试。

<span style="background-color:#dadada"><span style="color:#1f0909"><span style="color:#555555"><!DOCTYPE html></span>
<span style="color:#117700"><</span><span style="color:#117700">html</span><span style="color:#117700">></span>
    <span style="color:#117700"><</span><span style="color:#117700">head</span><span style="color:#117700">></span>
        <span style="color:#117700"><</span><span style="color:#117700">meta</span> <span style="color:#0000cc">charset</span>=<span style="color:#aa1111">"utf-8"</span><span style="color:#117700">></span>
        <span style="color:#117700"><</span><span style="color:#117700">title</span><span style="color:#117700">></span>网页标题<span style="color:#117700"></</span><span style="color:#117700">title</span><span style="color:#117700">></span>
    <span style="color:#117700"></</span><span style="color:#117700">head</span><span style="color:#117700">></span>
    <span style="color:#117700"><</span><span style="color:#117700">body</span> <span style="color:#0000cc">bgcolor</span>=<span style="color:#aa1111">"#FFCC00"</span><span style="color:#117700">></span>
    <span style="color:#117700"></</span><span style="color:#117700">body</span><span style="color:#117700">></span>
<span style="color:#117700"></</span><span style="color:#117700">html</span><span style="color:#117700">></span></span></span>

7.1 属性名称

7.2 属性值

三、标签练习

1. 行内标签

特点:可以和其他元素保持再同一行,一般不能设置宽度和高度。

1.1 文本标签

  1. 文本标签:<font>文本内容</font>

    • 常用属性:

      • color:文本颜色

      • size:文本大小

      • face:文本字体

  2. 加粗标签:<b>文本内容</b><strong>文本内容</strong>

    • 常用属性:

  3. 倾斜标签:<i>文本内容</i><em>文本内容</em>

    • 常用属性:

  4. 删除线标签:<s>文本内容</s><del>文本内容</del>

    • 常用属性:

  5. 下划线标签:<u>文本内容</u>

    • 常用属性:

  6. 居中标签:<center>文本内容</center>

    • 常用属性:

  7. span标签:<span>文本内容</span>

    • 常用属性:

  8. label标签:<label>文本内容</label>

    • 常用属性:

1.2 超链接标签

网页中会常见一些可以点击的文字,点击这些文字可以跳转到其他的网页,这就是超链接的效果!

  1. 超链接标签:<a>文本内容</a>

    • 常用属性:

      • href:链接目标页面地址

        • 本地:./test/index.html../images/123.pngC:\wamp64\www\index.html

        • 网络:https://www.baidu.com

        • 空链接:#

      • target:目标页面的打开方式

        • _self:(默认) 当前页打开

        • _blank:新标签页打开

        • _top:顶部框架打开

        • _parent:父级框架打开

      • title:鼠标悬停文字提醒

        • 解释:鼠标移入具有该属性的超链接上时,会有小对话框弹出。

    • 案例演示:

      <span style="background-color:#dadada"><span style="color:#117700"><</span><span style="color:#117700">html</span><span style="color:#117700">></span>
          <span style="color:#117700"><</span><span style="color:#117700">head</span><span style="color:#117700">></span>
              <span style="color:#117700"><</span><span style="color:#117700">meta</span> <span style="color:#0000cc">charset</span>=<span style="color:#aa1111">"utf-8"</span><span style="color:#117700">/></span>
              <span style="color:#117700"><</span><span style="color:#117700">title</span><span style="color:#117700">></span>测试页面<span style="color:#117700"></</span><span style="color:#117700">title</span><span style="color:#117700">></span>
          <span style="color:#117700"></</span><span style="color:#117700">head</span><span style="color:#117700">></span>
          <span style="color:#117700"><</span><span style="color:#117700">body</span><span style="color:#117700">></span>
              <span style="color:#117700"><</span><span style="color:#117700">a</span> <span style="color:#0000cc">href</span>=<span style="color:#aa1111">"http://www.baidu.com"</span> <span style="color:#0000cc">target</span>=<span style="color:#aa1111">"_blank"</span> <span style="color:#0000cc">title</span>=<span style="color:#aa1111">"文本"</span><span style="color:#117700">></span>百度<span style="color:#117700"></</span><span style="color:#117700">a</span><span style="color:#117700">></span>
          <span style="color:#117700"></</span><span style="color:#117700">body</span><span style="color:#117700">></span>
      <span style="color:#117700"></</span><span style="color:#117700">html</span><span style="color:#117700">></span></span>

1.3 表单标签

  1. 表单标签

    • 书写格式:<form></form>

    • 常用属性:

      • action:提交地址

      • method:提交方式

        • get

        • post

  2. 单行文本框

    • 书写格式:<input type='text'/>

    • 常用属性:

      • type:文本框类型

      • size:文本框宽度

      • value:文本框默认值

      • readonly:文本框只读

      • disabled:文本框不可用

      • maxlength:文本框最大字符容纳字数

      • name:文本框名称

  3. 密码文本框

    • 书写格式:<input type='passwd'/>

    • 常用属性:

      • size:密码框宽度

      • name:密码框名称

      • value:密码框默认值

    • 单选按钮

    • 书写格式:<input type='radio'/>

    • 常用属性:

      • value:单选框提交值

      • checked:单选框默认选中

      • name:单选框名称

  4. 复选按钮

    • 书写格式:<input type='checkbox'/>

    • 常用属性:

      • value:复选框提交值

      • checked:是否默认选中

      • name:复选框的名字

  5. 多行文本框

    • 书写格式:<textarea></textarea>

    • 常用属性:

      • cols:可容纳列数(宽度)

      • rows:可容纳行数(高度)

      • name:多行文本框名称

  6. 下拉菜单

    • 书写格式:<select></select>

    • 配套使用:

      • 选项组:<optgroup></optgroup>

        • 常用属性:

          • label:下拉菜单组名

      • 下拉项:<option></option>

        • 常用属性:

          • value:下拉菜单项的默认值

          • selected:默认选中指定下拉项

    • 常用属性:

      • name:下拉菜单名称

  7. 上传文本域

    • 书写格式:<input type="file"/>

    • 常用属性:

      • name:上传文本域名称

      • multiple:多文件上传

  8. 隐藏域

    • 书写格式:<input type='hidden'/>

    • 常用属性:

      • name:隐藏域名称

      • value:隐藏域默认值

  9. 表单按钮

    • 按钮分类:

      • 提交按钮:<input type='submit'/>

        • 常用属性:value,按钮显示文本

      • 重置按钮:<input type='reset'/>

        • 常用属性:value,按钮显示文本

      • 普通按钮:<input type='button'/>

        • 常用属性:value,按钮显示文本

      • 图片提交按钮:<input type='image'/>

        • 常用属性:

          • src:图片路径

          • value:按钮显示文本

1.4 图片标签

  1. 书写格式:<img />

  2. 常用属性:

    • src:图片路径

    • width:图片宽度

    • height:图片高度

    • alt:加载失败时提示文本

    • title:鼠标悬停提示文本

2. 块级标签

特点:通常都是独立成行的,可以设置宽度和高度。

2.1 表格标签

  1. 书写格式:<table></table>

  2. 配套使用:

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

      • 常用属性:

        • align:对齐方式

    2. 表格一行:<tr></tr>

      • 常用属性:

        • align:对齐方式

        • bgcolor:背景颜色

    3. 表格一列:<td></td>

      • 常用属性:

        • align:对齐方式

        • width:单元格宽度

        • height:单元格高度

        • bgcolor:单元格背景色

        • colspan:合并列(跨列)

        • rowspan:合并行(跨行)

    4. 表格表头:<th></th>

      • 标签特点:

        • 文字加粗

        • 自动居中

        • 常做标题

  3. 常用属性:

    • width:表格宽度

    • height:表格高度

    • border:边框宽度

    • cellspacing:单元格与单元格的间距

    • callpadding:内容与单元格的间距

    • aligh:对齐方式

    • bgcolor:背景颜色

2.2 段落标签

  1. 段落标题:

    • 书写格式:<h1>标题内容</h1> ~ <h6></h6>

    • 标签特点:加粗,独立成行,有6个大小可选

    • 常用属性:

      • align:对齐方式

  2. 段落内容:

    • 书写格式:<p>段落内容</p>

    • 标签特点:独立成段,通常包含大段文字

    • 常用属性:

      • align:对齐方式

2.3 列表标签

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

    • 常用属性:type

      • disc:小黑圆圈

      • circle:空心圆

      • square:实心方块

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

    • 常用属性:type

      • 1:阿拉伯数字

      • a:小写字母

      • A:大写字母

      • i:小写罗马数字

      • I:大写罗马数字

  3. 列表项:<li></li>

    <span style="background-color:#dadada"><span style="color:#117700"><</span><span style="color:#117700">ul</span><span style="color:#117700">></span>
        <span style="color:#117700"><</span><span style="color:#117700">li</span><span style="color:#117700">></span>张三<span style="color:#117700"></</span><span style="color:#117700">li</span><span style="color:#117700">></span>
        <span style="color:#117700"><</span><span style="color:#117700">li</span><span style="color:#117700">></span>李四<span style="color:#117700"></</span><span style="color:#117700">li</span><span style="color:#117700">></span>
        <span style="color:#117700"><</span><span style="color:#117700">li</span><span style="color:#117700">></span>王五<span style="color:#117700"></</span><span style="color:#117700">li</span><span style="color:#117700">></span>
    <span style="color:#117700"></</span><span style="color:#117700">ul</span><span style="color:#117700">></span>
    ​
    <span style="color:#117700"><</span><span style="color:#117700">ol</span><span style="color:#117700">></span>
        <span style="color:#117700"><</span><span style="color:#117700">li</span><span style="color:#117700">></span>1000万<span style="color:#117700"></</span><span style="color:#117700">li</span><span style="color:#117700">></span>
        <span style="color:#117700"><</span><span style="color:#117700">li</span><span style="color:#117700">></span>500万<span style="color:#117700"></</span><span style="color:#117700">li</span><span style="color:#117700">></span>
        <span style="color:#117700"><</span><span style="color:#117700">li</span><span style="color:#117700">></span>200万<span style="color:#117700"></</span><span style="color:#117700">li</span><span style="color:#117700">></span>
    <span style="color:#117700"></</span><span style="color:#117700">ol</span><span style="color:#117700">></span></span>

2.4 自定义列表

  1. 书写格式:<dl></dl>

    <span style="background-color:#dadada"><span style="color:#117700"><</span><span style="color:#117700">dl</span><span style="color:#117700">></span>
        <span style="color:#117700"><</span><span style="color:#117700">dt</span><span style="color:#117700">></</span><span style="color:#117700">dt</span><span style="color:#117700">></span>
        <span style="color:#117700"><</span><span style="color:#117700">dd</span><span style="color:#117700">></</span><span style="color:#117700">dd</span><span style="color:#117700">></span>
    <span style="color:#117700"></</span><span style="color:#117700">dl</span><span style="color:#117700">></span></span>

2.5 其他标签

  1. 水平线标签:<hr/>

    • 常用属性:

      • size:线条高度

      • width:线条宽度

      • noshade:空心变实心

      • color:线条颜色

  2. 换行标签:<br/>

3. 盒子标签

  1. 书写格式:<div></div>

    • 常用属性:

      • id:盒子id名称

      • class:盒子类别名称

      • style:盒子css样式

        • 常用样式:

          • width:宽度

          • height:高度

          • border:边框样式

          • border-radius:圆角

          • background:背景色,背景图片

          • float:浮动

            • left:左浮动

            • right:右浮动

            • none:无浮动

4. 特殊标签

  1. 特点:一些特殊字符,在特定位置有特殊含义

  2. 结构:&标签名;

  3. 案例:

    • &nbsp;:空格

    • &lt;:小于号

    • &gt;:大于号

    • &copy;:版本号

    • &reg;:注册商标

    • &amp;:&符号

标签:常用,标签,html,HTML,超文本,格式,文本,属性
来源: https://blog.csdn.net/m0_59150380/article/details/120119941