HTML快速掌握

用户4942727660547
95 阅读4分钟

#基本概念

网页和网站

网站有N个网页组成

网页中包含：文字，图片，音频，链接等

网页的内容由HTML实现

网页的后缀通常是.html

浏览器和渲染引擎

常见的浏览器：谷歌，火狐，IE,Safari,欧朋

不同的浏览器有不同的内核

网页三层结构

结构层：使用HTML技术实现，给网页提供内容

样式层：给页提供样式（布局，美化）

交互层：使用JS实现，前端程序员最需要掌握的技术

开发工具和快捷键

开发工具，推荐使用VS Code工具，好处：小巧，插件多

快捷键，shift+alt+向下箭头=》复制上一行

！+tab生成基本骨架

标签，属性，元素

标签：标签都是使用<>包起来，分单标签与双标签，双标签有开始标签与结束标签

标签关系：兄弟关系，父子关系

属性：写在开始标签中，以xxx='xxx'的形式出现，一个标签中可以有N个属性
元素：标签+属性+标签之间的内容

#HTMLH基本骨架

文档生明

HTML5的文档声明

告诉浏览器，以什么样的标准来解析我们的代码 html元素 是一个元素的根标签，只有一个 lang属性：指定网页的语言 head元素 网页的头部 title属性：指定网页的标题 meta属性：不指定可能会出现乱码 body元素 网页的主要内容都是写在这里的

#常见的标签

标题标签

图片标签

注释标签

段落标签

超链接标签

列表标签

表格标签

表单类标签

##标题标签

在HTML中，有六级标题标签 h1-h6;h1-h6依次减小字体， h1显示效果最大，h6显示效果最小

<body>
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>
</body>

image.png

##图片标签

<img src="./冬.webp" alt="这是一张图片">

src写图片的路径 alt是图片没出来的提示文字

./表示在当前资源所在目录的位置，把图片和html放在同一级目录下

../表示返回上一级目录，../../表示返回上上一级的目录 图片的格式有很多

JPEG

GIF

PNG

##注释标签

注释标签不能嵌套

快捷键用ctrl+/就可以生成注释

##段落标签

  <p>我是p标签，在这直接输入文字</p>

p标签没有缩进

在p标签输入多个空格都会默认一个空格

在p标签想要换行用br标签换行

##超链接标签

超链接可以让我们从一个页面跳转到另一个页面，使用a标签创建一个超链接 href：表示要跳转的目标地址

 <a href="./春.html">春意绵绵</a>

##列表标签

在HTML中有三种列表

无序列表

   使用ul+li创建无序列表，ul创建出来一个无序列表，li创建出一个一个列表项，默认无序列表前面是小黑点

有序列表

    使用ol+li创建有序列表，ol创建出来一个有序列表，li创建出一个一个列表项，默认无序列表前面是1，2，3

定义列表
    dl创建定义列表
    dt被定义的内容
    dd对定义内容的描述

<body>
    <h1>定义列表</h1>
    <dl>
        <dt>水果</dt>
        <dd>苹果</dd>
        <dd>香蕉</dd>
        <dd>火龙果</dd>
    </dl>
</body>

image.png

##表格标签

table标签用来创建一个表格

tr表示一行

th表示标头中的内容

caption表示表格标题

rowspan：纵向合并单元格

colspan：横向合并单元格

border设置边框

cellspacing="0" cellspacing="0"边框合并

   <table border="1" cellspacing="0" cellspacing="0" class="formcss ">
        <tr>
            <td colspan="4"><span>header</span></td>
        </tr>
        <tr>
            <td colspan="4"><span>nav</span></td>
        </tr>
        <tr>
            <td colspan="3"><span >第一篇文章</span></td>
            <td rowspan="2">侧边栏</td>
        </tr>
        <tr>
            <td colspan="3"><span >第二篇文章</span></td>
        </tr>
        <tr>
            <td colspan="4"><span>footer</span></td>
        </tr>
    </table>

image.png

##表单标签

表单的作用：收集信息给服务器

from标签创建一个表单，且在标签中必须指定一个action属性，该属性指向一个服务器的地址

mthod属性用于设置表单数据的提交方式，取值有get，post

name属性用于指定表单的名称，将用户填写的内容提交服务器

 <h1>表单控件</h1>
 文本框<input type="text">
 密码框<input type="password" >
 单选按钮<input type="radio" >
 多选框<input type="checkbox" >
 普通按钮<input type="button" value="按钮">
 提交按钮<input type="submit" value="提交">
 重置按钮<input type="reset" value="重置">
 <h1>select下拉列表</h1>
     <select>
        <option value="001">北京</option>
        <option value="002">上海</option>
        <option value="003">天津</option>
    </select>
 <textarea name="info" id="" cols="30" rows="10">文本域</textarea>

image.png

avatar
文章
阅读
粉丝