前端_day1 html标签

最新推荐文章于 2024-03-27 17:31:53 发布

(成长中)扫地僧

最新推荐文章于 2024-03-27 17:31:53 发布

阅读量136

点赞数

分类专栏： python html

本文链接：https://blog.csdn.net/qq_18246731/article/details/97790756

版权

python 同时被 2 个专栏收录

36 篇文章 0 订阅

订阅专栏

html

2 篇文章 0 订阅

订阅专栏

一、 html5初始中语句含义

<!--声明是html5文件-->
<!DOCTYPE html>
<!--声明主要使用的语言是中文-->
<html lang="zh-CN">
<!--头标签-->
<head>
    <!--编码格式,meta中写给浏览器看的信息-->
    <meta charset="UTF-8">
    <!--网页标头-->
    <title>我的html入门</title>
</head>
<!--body中是网页中显示的内容-->
<body>

</body>
</html>

二、标签的含义

1、<h1>标题标签

标题从大到小，标签最小到6，没有7

<h1>this is one</h1>
<h2>this is two</h2>
<h3>this is three</h3>
<h4>this is four</h4>
<h5>this is five</h5>
<h6>this is six</h6>

2、<img>标签

img标签的属性

src后可以是本地的图片地址，也可以是网络图片地址
alt后边是：图片无法访问时出现的内容
title：是鼠标放到图片处显示的内容

<img src="图片的地址" alt="图片无法访问时出现的备注" title="鼠标放到图片处显示的内容">

3、<a>标签

a标签是跳转标签
href后是点击跳转的网址或id,网址必须写全加上http
target：_blank新的标签页打开,_self当前标签页打开
每个网页上的标签的id不能重复

<a href="http://www.baidu.com" id="baidu" target="_self">百度搜索</a>

4、列表

a、无序列表

<!--无序列表-->
<ul type="circle">
    <li>第一行</li>
    <li>第二行</li>
</ul>

type属性：

disc（实心圆点，默认值）
circle（空心圆圈）
square（实心方块）
none（无样式）

b、有序列表

<!--有序列表-->
<ol type="1" start="2">
    <li>第一行</li>
    <li>第二行</li>
</ol>

type属性：

1 数字列表，默认值
A 大写字母
a 小写字母
Ⅰ大写罗马
ⅰ小写罗马

stat属性：序号开始位置

c、标题列表

<!--标题的列表,内容首行缩进-->
<dl>
    <dt>标题1</dt>
    <dd>内容1</dd>
    <dt>标题2</dt>
    <dd>内容2</dd>
</dl>

5、表格标签

<table> 
    <!--表格的头-->
    <thead>
    <!--tr表示行-->
    <tr>
        <!--th表示一个格里的内容-->
        <th>姓名</th>
        <th>性别</th>
        <th>年龄</th>
    </tr>
    </thead>
    <!--表格的主体-->
    <tbody>
    <tr>
        <td>张猛</td>
        <td>男</td>
        <td>21</td>
    </tr>
    <tr>
        <td>张猛</td>
        <td>男</td>
        <td>21</td>
    </tr>
    </tbody>
</table>

border: 表格边框.
cellpadding: 内边距
cellspacing: 外边距.
width: 像素百分比.（最好通过css来设置长宽）
rowspan: 单元格竖跨多少行
colspan: 单元格横跨多少列（即合并单元格）

6、字体加粗、斜体、下划线、删除的标签

<b>加粗</b>
<i>斜体</i>
<u>下划线</u>
<s>删除</s>

7、段落标签<p>

<p>段落标签</p>

8、换行标签<br>

<br>

9、<div>标签

换行显示，它是一个块标签

    <!--块级标签-->
    <div>我是div</div>
    <div>我是div</div>

10、<span>标签

不换行显示，它一个行级标签

    <!--行级标签-->
    <span>我是span</span>
    <span>我是span</span>

三、转义字符

内容	对应代码
空格
>	>
<	<
&	&
¥	¥
版权	©
注册	®

四、块级标签和行内标签

1、行内标签
行内标签（内联标签）：包含div、 p 、a、span、hr；
特点：可以多个标签存在一行，不能直接设置行内标签的高度、宽度、行高以及顶和底边距，完全靠内容撑开宽高！

2、块级标签

块标签：包含p、div、ul、ol、li、dl、dt、dd、h1~h6、form；
特点：独占一行，对高度、宽度、行高以及顶和底边距都可设置的属性值生效；如果不给宽度，块级元素就默认为浏览器的宽度，即就是100%宽；

3、块标签可以套行标签，行标签不可以套块标签，P标签不要套块属性标签，可以套a，span，文本。

(成长中)扫地僧

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端_day1 html标签

一、 html5初始中语句含义<!DOCTYPE html><html lang="zh-CN"><head>  <meta char...
复制链接

扫一扫