前端学习——html5基础知识（1）

vaa1

已于 2023-02-27 17:32:22 修改

阅读量81

点赞数

分类专栏：前端学习文章标签：前端 html5 学习

于 2023-02-27 17:30:05 首次发布

本文链接：https://blog.csdn.net/weixin_43892358/article/details/129245563

版权

前端学习专栏收录该内容

2 篇文章 0 订阅

订阅专栏

开始学习前端知识，跟着b站李立超老师进行学习的，在这里记下笔记，希望能够帮到一样学习前端的朋友以及自己复盘使用。

具体内容：

1.使用vscode进行编写代码，安装很简单，在官网下载就好啦

2.使用时的快捷键：

注释快捷键ctrl+/ ，选中代码ctrl+/
结构快捷键！

3.常见的标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>html语法</title>
</head>
<body>
<p>元素（标签）  属性：属性名=属性值  多个属性之前用空格分隔  属性名与属性值相同可省略值</p>
<p id="a1"><h1>常见标签</h1></p>
<h1>标题标签</h1>
<p>段落</p>
<br><!--换行-->
<hr><!--水平线-->
<pre>预格式（保留文本自身格式）实际开发中，与code标签结合用</pre>

<!--
    ol 有序列表   li 表示列表项
    ul 无序列表   li 表示列表项
    可以互相嵌套，实际开发中这两种没有区别，可以使用css改样式
    dl 定义列表   dt定义被描述内容  dd对内容进行描述
-->

<ol>
    <li>芹菜</li>
    <li>大闸蟹</li>
</ol>

<ul>
    <li>芹菜</li>
    <li>大闸蟹</li>
</ul>

<dl>
    <dt>前端</dt>
    <dd>学习</dd>
</dl>


<!--图片标签  
    src 路径  
    alt对图片的描述（帮助搜索引擎识别图片）
    width 宽度
    height 高度（只改一个，和width会同比例缩放）-->
<img src="11.jpg" alt="头像" width="200">



<!--超链接
  <a></a>
  href属性 路径
  target：指定打开位置   _self  _blank 
          _parent 内联框架的超链接可以新建窗口打开 
          _内联框架名（name设置）可以转换到这个内联框架打开 
  可以在页面内部跳转  href="#"回到顶部  href="#id名"回到页面指定位置
-->
<br>
<a href="http://baidu.com">超链接</a>
<a href="./11.jpg">内部图片</a>
<a href="#">回到顶部</a>
<a href="#a1">常见标签</a>

4.表示特殊符号的实体

<!--可以通过实体在网页中表示一些特殊符号
语法：&名字；
例如：a&lt;b>c  显示a<b>c
常用：&lt;小于
      &gt;大于
      &nbsp;空格
      &copy;版权符号
-->

5.语义标签（不常用）

<!--
    语义标签(新)区分不同部分，方便搜索引擎识别内容
    main   最好只有一个
    header 可以多个
    footer 可以多个

    article 文章或独立内容
    aside 侧边栏，和主体独立的内容
    nav 导航
    section 独立的区块，其他不合适时可以用

    实际开发中，主要用div
-->

6.路径（绝对路径和相对路径）

<!--路径  绝对路径  相对路径
    ./ ../  
    ./表示当前目录（可省略） 
    ../表示当前目录上一级
    ../表示上两级

    ctrl+刷新可以强制清缓存   缓存问题时可以使用
-->

7.内联框架

<!--内联框架
  iframe  引入另一个网页
-->
<iframe src="http://www.baidu.com"></iframe>
<br>
<iframe src="./11.jpg"></iframe>

<!--块元素和行内元素（早期分法，不太准确）
块元素：独占一行 main nav section   可以进行布局   常用块元素 div
行内元素：只占自身大小，自左到右排列<a></a>  一般用来放置文字，方便设置样式  最常用行内元素：span

嵌套规则：
块元素：可以放块或者行内元素
行内元素：尽量不要放置块元素
<a></a>（行内元素）：除本身外都可以放置
<p></p>（块元素）：不能放置块元素

-->
</body>
</html>