第一节：网页基本标签

最新推荐文章于 2021-06-15 12:57:31 发布

夏至1_

最新推荐文章于 2021-06-15 12:57:31 发布

阅读量303

点赞数

分类专栏： HTML学习

本文链接：https://blog.csdn.net/sinat_37802274/article/details/78055423

版权

HTML学习专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1.标题标签h
用法：

<h1>....</h1>~<h6>...</h6>  

<h1> 定义最大的标题。
<h6> 定义最小的标题

2.段落标签p
用法：

<p>...</p>   
<p> 标签定义段落。

p 元素会自动在其前后创建一些空白。浏览器会自动添加这些空间，您也可以在样式表中规定

3.换行标签br
用法：

...<br/>

<br> 标签只是简单地开始新的一行，而当浏览器遇到 <p> 标签时，通常会在相邻的段落之间插入一些垂直的间距。

4.无序列表ul
用法：

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

输出：
· Coffee
· Tea
· Milk

5.有序列表ol
用法：

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

输出:
1.Coffee
2.Tea
3.Milk
注意区分与无序列表的区别

6.定义列表标签dl（dt，dd）
用法：

<h1>定义列表标签</h1>
<dl>
   <dt>dt是标题</dt>
   <dd>dd是内容</dd>
</dl>

7.图像标签img
用法：

<img src="lufei.jpg"  alt="路飞" />

src引入的是图像的路径，alt表示的是当图片无法加载的时候在图片处显示出的文字。

8.超链接标签a
用法：

<a href="http://www.baidu.com">百度</a>

效果如下:

href引入的是链接，”百度“表示链接显示的文字

百度

9.区块标签div
用法：

<div style="color:#CC66FF">
  <h3>This is a header</h3>
  <p>This is a paragraph.</p>
</div>

效果如下：div内style引用是color属性为紫色，所以代码中的两句话显示出应为紫色。此处由于直接利用博客文档编译所以可能字体颜色并不会显示出来。

This is a header

This is a paragraph.

10.组合标签span
用法：

<p><span>some text.</span>some other text.</p>

效果如下：（标签被用来组合文档中的行内元素，span 没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化）

some text.some other text.

11.风格标签style
用法：

<html>
<head>
<style type="text/css">
h1 {color:red}
p {color:blue}
</style>
</head>

<body>
<h1>Header 1</h1>
<p>A paragraph.</p>
</body>
</html>

效果如下：
这里写图片描述

12.style标签扩展（id选择器，class选择器，body,margin属性）

（1）id选择器：ID 选择器允许以一种独立于文档元素的方式来指定样式（与类选择器不同，在一个 HTML 文档中，ID 选择器会使用一次，而且仅一次。）
用法:

<head>
<style>
    #t1{
        color:#ff6666;
        font-size=28px;
    }
</style>
</head>
<h1 id="t1">演示标题</h1>

效果：则h1内的“演示标题”被给予t1中所赋予的属性
（2）class选择器（类选择器）：
用法：

<head>
<style>
    #t1{            <!--id选择器，使用#作为表标识-->
        color:#FF6666;
        font-size:28px
    }
    .c1{            <!--类选择器-->
        color:#FF00FF
    }
</style>
</head>
<body>
<table width="500" border="1">
    <tr>
        <td class="c1">1</td>
        <td id="t1">1</td>
        <td>1</td>
    </tr>
</table>
</body>

效果如下：
这里写图片描述
（3）body：sytle中定义body的属性将会应用到body里面

（4）margin属性：设置某元素的外边距（一般四个属性）

夏至1_

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
第一节：网页基本标签

1.标题标签h 用法： <h1>....</h1>~<h6>...</h6> <h1> 定义最大的标题。<h6> 定义最小的标题2.段落标签p 用法：<p>...</p> <p> 标签定义段落。p 元素会自动在其前后创建一些空白。浏览器会自动添加这些空间，您也可以在样式表中规定3.换行标签br 用法：...<br/><br> 标签只是简单地开始新的一行，而当浏览器遇到 <p> 标签时
复制链接

扫一扫