html学习记录(1)

cjmdyl

已于 2022-04-14 19:13:59 修改

阅读量190

点赞数 6

文章标签：学习 html

于 2022-03-12 10:57:41 首次发布

本文链接：https://blog.csdn.net/cjmdyl/article/details/123439065

版权

本文详细介绍了HTML的基本结构，包括DOCTYPE、HTML、HEAD和BODY标签，以及标题、元信息、段落、图像、超链接、锚点、邮件链接、块级和内联元素、列表、表格和媒体元素的使用方法。通过实例展示了如何创建和操作这些元素，帮助初学者理解HTML网页的基本构成和元素功能。

摘要由CSDN通过智能技术生成

1.基本框架和基本标签

前言:由于学校不开学在家摆太久了()所以开始学习

<!DOCTYPE html><!--基本框架-->
    <html><!--总标签-->
    <head><!--网页头部-->
        <title>cjmdyl</title><!--网页标题-->
    </head>
    <body><!--网页主体-->
    <!-- meta 标签用来描述信息-->
    <meta name="keywords" content="html"><!-- 关键词-->
    <meta name="description" content="cjmdyl"><!-- 关键词-->
    <h1>helloworld</h1>
    <h2>helloworld</h2>
    <strong>cjmdyl</strong><!--粗体标签 -->
    <br><!-- 换行标签-->
    <em>a</em><!-- 斜体标签-->
    &copy<!--版权符号 -->
    &gt<!--大于号 -->
    &lt<!--小于号-->
    <p1>cjmdyl</p1><!--段落-->
    <hr><!--分割线 -->
    </body>
    </html>

在这里插入图片描述

2 图像标签

<img src="../resources/image/2.jpg" alt="acm" title="悬停文字" width="600" height="600">
     <!--src 代表图片地址 alt 是没加载出图片会显示出的东西 title代表鼠标悬停时显示的文字width设置宽 height设置高-->

在这里插入图片描述

3.超链接标签

<a href="博客1.html" target="_blank">点我跳转</a>
<!-- href代表链接路径表示要跳转到哪个页面,target代表在哪个窗口打开-->
<br>
<a href="博客1.html" target="_self">
    <img src="../resources/image/2.jpg" alt="acm" title="悬停文字" width="600" heigtht="600">
</a>
<!--点击图片跳转,"_blank"表示在新的窗口打开“_self表示在本窗口打开”-->

4.锚链接

<a name="top"></a><!--标记名字用name-->
<a href="#top">回到顶部</a><!-- 用href="#"加标记名回到标记出-->
<!--也可以实现页面间的跳转-->
<a href="博客1.html#top">回到顶部</a><!-- 用href="#"加标记名回到标记出-->

5.邮件链接

<!--邮件链接 mailto: 后加邮箱-->
<a href="mailto:123345678@qq.com">点击联系我</a>
   <!--qq是乱写的-->

6.块元素和行内元素

块元素：

独占一行的元素如（p,h1-h6)

行内元素:

可以排在一行内的元素(strong,em)

7.列表

1.有序列表:

用ol表示有序号,li为内容

<ol>
    <li>java</li>
    <li>python</li>
    <li>运输</li>
    <li>前端</li>
    <li>c</li>
</ol>

效果如图:

2.无序列表:

用ul表示，文字前面为点

   <p>
    <ul>
    	<li>java</li>
    	<li>python</li>
    	<li>运输</li>
    	<li>前端</li>
   		<li>c</li>
    </ul>
   </p>

在这里插入图片描述

3.自定义列表:

用dl表示自定义列表,dt为列表名称可以让这段内容更有层次，dd为列表内容

<dl>
    <dt>学科</dt>
    <dd>java</dd>
    <dd>python</dd>
    <dd>运输</dd>
    <dd>前端</dd>
    <dd>c</dd>
</dl>

效果如图

在这里插入图片描述

8.表格标签

1.table 为表格标签,在表格中加border会有边框可以设置边框宽度,tr为行,td为列

<table border="1px">
    <tr>
        <td>1-1</td>
        <td>1-2</td>
        <td>1-3</td>
        <td>1-4</td>
        <td>1-5</td>
    </tr>
    <tr>
        <td>2-1</td>
        <td>2-2</td>
        <td>2-3</td>
        <td>2-4</td>
        <td>2-5</td>
    </tr>

2.跨行标签:

用rowspan代表合并行,用colspan表示合并列

<table border="1px">
    <tr>
        <td rowspan="4">1-1</td>
        <td>1-2</td>
        <td>1-3</td>
        <td>1-4</td>
        <td>1-5</td>
    </tr>
    <tr>
        <td colspan="2">2-1</td>
        <td>2-2</td>
        <td>2-3</td>
        <td>2-4</td>
        <td>2-5</td>
    </tr>
</table>

效果如图:

在这里插入图片描述

9.媒体元素

1.视频:

用video表示视频,src代表视频地址，controls为播放按键加autoplay可以自动播放
如果加了auto不能自动播放，原因可能是chrome 66以上的版本为了避免多媒体标签产生随机噪音，规定了不为静音的标签不能自动播放，
需手动触发开始播放，或标签定义为静音(在src前加一个muted)才可以

<video  muted src="../resources/video/a.mp4" controls autoplay>
</video>

2.音频:

<audio src="../resources/audio/a.mp3" controls autoplay>
</audio>

html学习记录(1)

1.基本框架和基本标签

2 图像标签

3.超链接标签

4.锚链接

5.邮件链接

6.块元素和行内元素

块元素：

行内元素:

7.列表

1.有序列表:

用ol表示有序号,li为内容

效果如图:

2.无序列表:

用ul表示，文字前面为点

3.自定义列表:

用dl表示自定义列表,dt为列表名称可以让这段内容更有层次，dd为列表内容

效果如图

8.表格标签

1.table 为表格标签,在表格中加border会有边框可以设置边框宽度,tr为行,td为列

2.跨行标签:

用rowspan代表合并行,用colspan表示合并列

效果如图:

9.媒体元素

1.视频:

2.音频:

10.页面结构分析

1.header表示头部

2.section表示网页主体

2.footer表示网页脚部