宇宙☆空间站
宇宙☆空间站

Web前端学习笔记——HTML

web前端开发基础

第一章——HTML

传送门：第二章：CSS | 第三章：html5和CSS3 | 第四章：Javascript（part 1） | 第四章：Javascript（part 2）

目录

  • web前端开发基础
    • 第一章——HTML
  • 概述
  • 一、html标题标签
  • 二、html段落标签、换行标签与字符实体
    • 1.html段落标签
    • 2.html换行标签
    • 3.html字符实体
  • 三、html块标签、含样式的标签
    • 1.html块标签
    • 2.含样式和语义的标签
  • 四、html图像标签、绝对路径和相对路径
    • 1.html图像标签
    • 2.绝对路径和相对路径
  • 五、html链接标签
  • 六、html列表
    • 1.有序列表
    • 2.无序列表
    • 3.带题目的列表
  • 七、html表单

概述

HTML（ HyperText Mark-up Language） ，超文本标记语言，超文本指超链接，标记指标签，这种语言由一个个的标签组成，用这种语言制作的文件保存的是一个文本文件，文件的扩展名为html或者htm，一个html文件就是一个网页，html文件用编辑器打开显示的是文本，可以用文本的方式编辑它，如果用浏览器打开，浏览器会按照标签描述内容将文件渲染成网页，显示的网页可以从一个网页链接跳转到另外一个网页。



<html lang="en">
    <head>            
        <meta charset="UTF-8">
        <title>网页标题title>
    head>
    <body>
          网页显示内容
    body>
html>

一、html标题标签

通过

、

、

、

、
,标签可以在网页上定义6种级别的标题。

<h1>这是一级标题h1>
<h2>这是二级标题h2>
<h3>这是三级标题h3>

二、html段落标签、换行标签与字符实体

1.html段落标签

标签定义一个文本段落，一个段落含有默认的上下间距，段落之间会用这种默认间距隔开：

<body>
    <p>害！搞什么web前端开发，会Java的去搞后端吧！专业劝退（狗头）定义一个文本段落，一个段落含有默认的上下间距，段落之间会用这种默认间距隔开
    p>

    <p>害！搞什么web前端开发，会Java的去搞后端吧！专业劝退（狗头）定义一个文本段落，一个段落含有默认的上下间距，段落之间会用这种默认间距隔开p>
body>

2.html换行标签

段落中插入
强制换行

 <p>害！搞什么web前端开发，会Java的去搞后端吧！专业劝退（狗头）<br/>定义一个文本段落，一个段落含有默认的上下间距，段落之间会用这种默认间距隔开
 p>

3.html字符实体

显示多个空格的字符实体：

 

“<”和“>”的字符实体

< 和 >

三、html块标签、含样式的标签

1.html块标签

1、<div> 标签 块元素，表示一块内容，没有具体的语义。
2、<span> 标签 行内元素，表示一行中的一小段内容，没有具体的语义

2.含样式和语义的标签

<em> 标签 行内元素，表示语气中的强调词，斜体
<i> 标签 行内元素，表示专业词汇，斜体
<b> 标签 行内元素，表示文档中的关键字或者产品名，加粗
<strong> 标签 行内元素，表示非常重要的内容，加粗
<u>标签 行内元素，下划线
<s>标签 行内元素，删除线

四、html图像标签、绝对路径和相对路径

1.html图像标签

标签可以在网页上插入一张图片，它是独立使用的标签，它的常用属性有：

src属性：定义图片的引用地址
alt属性：定义图片加载失败时显示的文字

<img src="图片路径" alt="这是一张图片" />

2.绝对路径和相对路径

“ ./ ” 表示当前文件所在目录下
“ …/ ” 表示当前文件所在目录的上一级目录

五、html链接标签

标签定义一个链接地址：
href属性—— 定义跳转的地址
title属性——定义鼠标悬停时弹出的提示文字框
target属性—— 定义链接窗口打开的位置
target="_self" 缺省值，新页面替换原来的页面，在原来位 置打开
target="_blank" 新页面会在新开的一个浏览器窗口打开

<a href="#">a> 
<a href="http://www.baidu.com/" title="百度">百度a>
<a href="http://www.baidu.com/" target="_blank">一个新页面a>

六、html列表

1.有序列表

    、
  1. 配合使用

    <ol>
    <li>第一行li>
    <li>第二行li>
    <li>第三行li>
ol>

    2.无序列表

      、
    • 配合使用

      <ul>
    <li><a href="#">第一个a>li>
    <li><a href="#">第二个a>li>
    <li><a href="#">第三个a>li>
ul>

      3.带题目的列表

      标签表示列表的整体
      标签定义术语的题目
      标签是术语的解释

      <dl>
    <dt>题目一dt>
    <dd>111111dd>

    <dt>题目二dt>
    <dd>22222222222dd>

    <dt>题目三dt>
    <dd>33333333333333333dd>
dl>

      七、html表单

      1、

      标签：定义整体的表单区域
      action属性—— 定义表单数据提交地址
      method属性—— 定义表单提交的方式，一般有“get”方式和“post”方式

      2、

      3、标签 定义通用的表单元素

      type属性 作用
      type=“text” 定义单行文本输入框
      type=“password” 定义密码输入框
      type=“radio” 定义单选框
      type=“checkbox” 定义复选框
      type=“file” 定义上传文件
      type=“submit” 定义提交按钮
      type=“reset” 定义重置按钮
      type=“button” 定义一个普通按钮
      type=“image” 定义图片作为提交按钮，用src属性定义图片地址
      type=“hidden” 定义一个隐藏的表单域，用来存储值

      value属性—— 定义表单元素的值

      name属性——定义表单元素的名称，此名称是提交数据时的键名

      4、