前端html5基础知识(1)

今天学前端了吗？

已于 2022-02-05 22:31:08 修改

阅读量749

点赞数

文章标签：前端 html5 html

于 2022-02-03 16:11:16 首次发布

本文链接：https://blog.csdn.net/qq_50883182/article/details/122776313

版权

文章目录

前言
一、HTML是什么？
二、HTML基本结构
三、基本标签
四、标签
块元素，行内元素
总结

前言

这篇主要讲标签。

一、HTML是什么？

HTML是超文本标记语言（Hyper Text Markup Language),HTML5优势：跨平台，浏览器都支持

二、HTML基本结构

<html>
<head>
      <!--网页头部 -->
      <title>网页标签</title>
</head>
<body>
      <!-- 主体 -->
</body>
</html>

三、基本标签

标签：开放标签，闭合标签。
开放标签：成对出现的标签如：< body>< /body>
闭合标签：单个出现，自闭合 , 如：< hr/>

（1）<head></head>标签：代表网页头部
（2）<body></body>标签：代表网页主体
（3）<title></title>标签：代表网页标题
（4）<meta>标签：描述性标签，用来描述网页信息 ，一般用来做SEO
      如：<meta charset="UTF-8">
         <meta name="严浩翔" content="想给翔哥一个惊喜"/>
（5）<h1></h1>标签：标题（一级，二级...)标签
（6）<p></p>标签：段落标签
（7）<br/>标签：换行标签 
（8）<hr/>标签：水平线标签
（9）字体样式标签：
    <strong></strong>:粗体标签
    <em></em>:斜体标签
（10)特殊符号(随用随调，格式为：&  ;)：如 
                空格 &nbsp;
                大于 &gt;
                小于 &lt;
                ©   &copy;

四、标签

1. 图像标签img

常见图像格式：jpg,gif,png,bmp

<img src="path" alt="text" title="text" width="x" height="y"/>
  
  
  <!--path:图像地址(推荐相对路径），alt:图片名字（当路径出错，页面显示图片名字，必填）  title:鼠标悬停文字，width:图像宽度，height:图像高度-->

2.超链接标签a

（1）页面间链接

从一个页面链接到另一个页面：文本超链接，图像超链接

<a href="path" target="目标窗口位置">链接文本或图像</a>


<!--path:链接地址(必填）,target:链接在哪个窗口打开，常用值_self（默认）,_blank(在新标签打开,不设置会在当前页面打开）-->
如：
（1）文本跳转-超链接：
<a href="https://www.baidu.com">点我跳转到百度</a>
（2）图像点击-超链接：
<a href="https//www.baidu.com">
    <img src="path" alt="text" title="text" width="x" height="y">
</a>

（2）锚链接(同一个页面内的跳转\点击跳转到另一个页面的某个位置）

1.需要一个锚标记
2.跳转到标记

同一页面：

<a name="top">顶部</a>
........n行代码.......
<!--末尾-->
<a href="#top">回到顶部</a>
<!--点击 回到顶部 会跳转到 顶部-->

不同页面:
1.  在1.html写入：
<a name="down">down</a>
2。 在2.html写入：
<a href="1.html#down">跳转1.html</a>

（3）功能性链接

1.邮件链接：mailto

<a href="mailto:1111111111@qq.com">点击联系我</a>
<!--即可发送邮件给作者-->

2.QQ链接：
  点我咨询  实现：
QQ推广登录，点击推广工具，点击标签生成的a标签代码，运行后功能是：点击图像标签，会自动跳转到QQ咨询

3.列表标签

列表是信息资源的一种展示形式，它以列表的形式使信息结构化，条理化，以便浏览者能更快捷地获得相应的信息。
列表分为：无序列表（导航，侧边栏…），有序列表(试卷，问答…)，自定义列表(公司首页底部）。

****************************************************
一。有序：
<ol>
    <li>c</li>
    <li>java</li>
</ol>

**效果展示：**
1.c
2.java
****************************************************
二。无序：
<ul>
    <li>c</li>
    <li>java</li>
</ul>

**效果展示：**
 - 1
 - 2
 - 3
****************************************************
三。自定义：
<dl>
    <dt>编程语言</dt>
    
    <dd>java</dd>
    <dd>c</dd>
    <dt>目的</dt>
    
    <dd>考研</dd>
    <dd>北漂</dd>
</dl>

**效果展示：**
编程语言
       java
       c
目的
       考研
       北漂

4.表格标签

行：tr
列：td
基本格式：

<table>
<!--如果想增加线框的粗细，更改为：<table border="1px"> -->
    <tr>
        <td>1-1</td>
        <td>1-2</td>
        <td>1-3</td>
   </tr>
   <tr>
        <td>2-1</td>
        <td>2-2</td>
        <td>2-3</td>
   </tr>
</table>

把一行的n列合并：


<td colspan="n">1-1</td>

把一列的n行合并：

<td rowspan="n">1-1</td>

5.媒体元素标签

1.视频标签

<video src="path" controls autoplay></video>
<!--path:视频的位置，controls:播放控制条，autoplay:自动播放

2.音频标签

<audio src="path" controls autoplay></audio>

块元素，行内元素

1.块元素：
无论内容为多少，该元素独占一行，如：p,h1-h6…
2.行内元素：
都是行内元素的在页面上显示在一行，如：a,strong,em

总结

挺好理解的，下篇打算继续写：
html5–(2)

今天学前端了吗？

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
前端html5基础知识(1)

文章目录前言一、HTML是什么？二、HTML基本结构三、基本标签四、标签总结前言一、HTML是什么？HTML是超文本标记语言（Hyper Text Markup Language),HTML5优势：跨平台，浏览器都支持二、HTML基本结构<html><head>  <title>网页标签</title></head><body> <!-- 主体
复制链接

扫一扫