web前端基础

HTML

html的基本组成?

<!--more-->

html由四个标签组成:

  • html标签
  • head标签
  • title标签
  • body标签

HTML标签的分类?

HTML标签又分为全封闭标签和半封闭标签:

  • 全封闭标签:<h1></h1>
  • 半封闭标签:<img src=xxx>

HTML基础标签?

标签

描述

<b></b>

加粗

<i></i>

斜体

<u></u>

下划线

<s></s>

删除线

<p></p>

段落

<h1></h1>

一级标题

<hr>

横线

<br>

换行

HTML 特殊字符?

符号

描述

 

空格

&gt;

大于号

&lt;

小于号

&amp;

&

&yen;

&copy;

版权标识

&reg;

注册

div和span标签?

div标签:用来定义一个块级标签又称为行外标签,块级标签独占一行

span标签:用来定义一个内联标签又称行内标签,行内标签不独占一行

块级标签和内联标签分类:

块级标签

内联标签

p、h1~h6、hr、div

b、i、u、s、span

注意:块级标签可以包含内联标签,但是内联标签不能包含块级标签

图片img 标签?

img标签用来加载图片资源。

img标签属性:

标签属性

描述

alt

当图片加载失败时,显示的文字

title

当鼠标悬浮再图片时显示的文字

代码示例:

<img src="syr.jpg" alt="我是赛亚人" title="我是赛亚人">

超链接a标签?

超链接标签属性:

标签属性

描述

target

点击超链接的动作

href

要跳转的网址

代码示例:跳转到https://www.acai.cloud地址时用浏览器空白标签页打开

<a target="_blank" href="https://www.acai.cloud">acai.cloud</a>

设置a标签点击不刷新页面:

<a href="#">acai.cloud</a>

去除a标签下划线:

<style>
    a{
        text-decoration: none;
    }
</style>

设置a标签锚点功能:点击回到顶部,页面跳转到顶部位置

<a name="#top">顶部位置</a><br>
……
<a href="##top">回到顶部</a>

ul列表标签?

HTML列表分为两种:无序列表标签ul、列表标签li、有序列表标签ol

ul列表标签type属性:

标签type属性

描述

disc

实心圆

circle

空心圆

square

实心方块

none

无样式

代码示例:

<ul type="disc">
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
</ul>

有序列表标签ol:

ol列表标签属性:

标签属性

描述

start

起始值,如果没有该属性默认为1

type

显示序号时数字还是字母

代码示例:

<ol start="a" type="a">
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
</ol>

table表格标签?

table表格标签组成:

标签

描述

<thead></thead>

标题部分

<tbody></tbody>

内容部分

<tr></tr>

<th></th>

单元格

<td></td>

单元格

table表格属性:

属性

描述

border

表格边框

cellpadding

内边距

cellspacing

外边距

rowspan

单元格竖跨多少行

colspan

单元格横跨多少行,即合并单元格

代码示例:

<table border="1" cellpadding="10" cellspacing="2">
    <thead>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>阿才</td>
            <td>27</td>
        </tr>
    </tbody>
</table>

input输入框标签?

input标签type属性:

属性

描述

text

文本输入

password

密码输入

checkbox

多选框

date

日期选择框

datetime-local

日期事件选择框

radio

单选框,需要配合name属性使用

submit

提交按钮

reset

重置按钮

button

普通按钮

hidden

隐藏输入框

file

文件选择框

代码示例:

#输入框:
<div>
    用户: <input type="text">
</div>
<div>
    密码: <input type="password">
</div>

#单选框:
<div>
    性别: <input type="radio" name="sex">男
          <input type="radio" name="sex">女
</div>

select下拉框标签?

代码示例:

<select>
    <option>男</option>
    <option>女</option>
</select>

form表单标签?

代码示例:

<form action="http://127.0.0.1:8003">
    user: <input type="text" name="user">
    pass: <input type="password" name="pass">
    <input type="submit" value="login">
    <input type="reset">
</form>

CSS

JS

原文链接:https://www.acai.cloud/2020/10/22/WEB%E5%89%8D%E7%AB%AF%E5%9F%BA%E7%A1%80/

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 【JavaWeb】83:js不能算是一门编程语言?

    因为才刚开始学js,所以很多话不敢说的太绝对,就加上了“基本,大概,可能”这样的形容词。

    刘小爱
  • Web前端学习 第2章 网页重构2 常用的html标签

    上一节我们已经了解了html和css的基本概念,本节通过上一节的一个例子来说说HTML的语法.

    学习猿地
  • 数据应用场景之标签管理体系

    标签,最初用来对实物进行分类和标记,例如标明物品的品名、重量、体积、用途等简要信息。后来逐渐流行到数据行业,用来标记数据,对数据快速分类获取和分析。

    知了一笑
  • 终于有人把标签设计讲明白了

    导读:标签是根据业务场景的需求,通过对目标对象(含静态、动态特性)运用抽象、归纳、推理等算法得到的高度精练的特征标识,用于差异化管理与决策。

    华章科技
  • 001.html常用的基础知识点

    主要包括结构(Structure)、表现(Presentation)和行为(Behavior)三个方面。

    qubianzhong
  • 【CSS选择符】后代选择符

    在学习后代选择符之前,首先要了解一下组成一个网页的HTML家谱,每个HTML标签标示其中一个家庭成员。网页中的第一个HTML标签(标签),相当于所有其他标签的始...

    企鹅号小编
  • HTML中的容器标签

    什么是容器标签?在HTML开发中我们常常会使用一类标签作为容器放置一些内容,我们把这类标签称之为容器标签,可以作为容器标签的包括列表标签、表格标签、框架标签、布...

    一墨编程学习
  • JavaWeb(十三)简单标签

    用户定义的一种自定义的jsp标记 。当一个含有自定义标签的jsp页面被jsp引擎编译成servlet时,tag标签被转化成了对一个称为 标签处理类 的对象的操作...

    leeqico
  • 用户画像标签平台技术

    1.灵活可扩展的标签创建规则或者人群分群规则: 我们需要有非常灵活可扩展的标签的规则定义和分组分群。

    平常心
  • HTML5标签

    HTML5新增了27个标签,废除了16个标签,依据现有的标准规范,按照优先等级将其定义为结构性标签、级块性标签、行内语义性标签、交互性标签4大类。下面一起来看一...

    小白程序猿

扫码关注云+社区

领取腾讯云代金券