HTML他是啥

HTML他是啥

环境

• 安装vscode及插件
• 安装Chrome及插件

怎么交作业

• 在php中文网开通微博，先创建栏目 ，使用 Markdown写作业

开始认识HTML

标签与段落

页面上看到的内容叫元素
标签属性写在起始标签上
页面上的元素都是由标签和标签属性共同描述

<!-- html 中的所有内容，如果想添加到html文档中，就必须要使用一个标签 -->
<script>
    const SITE = 'php中文网';
</script>
<!-- <?php
        echo 'hello world';
    ?> -->
<!-- 标题标签：除了设置文档标题之外，是用来划分页面结构的
h1 尽量只用一个 -->
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<!-- 已下几乎不用 -->
<!-- <h4>标题1</h4>
<h5>标题1</h5>
<h6>标题1</h6> -->
<p>这是一个p标签</p>
<!-- 链接标签
    a 标签是互联网的灵魂，实现了全球资源之间的共享 -->
    <a href="https://www.php.cn/" target="_self">php中文网 当前页打开</a>
    <a href="https://www.php.cn/" target="_blank">php中文网 跳转新的空白页</a>

target=“_self” 在当前页面打开
target=”_blank” 新页面打开

<!-- 在指定窗口打开 target="iframe内联框架的name值" 此时a标签的target值需要跟iframe里的name值保持一致 -->
<a href="https://www.baidu.com/" target="baidu">打开百度</a>
<iframe srcdoc="点击上面的按钮打开百度" name="baidu" frameborder="0" width="600" height="500"></iframe>

锚点

<a href="#footer">跳转到底部</a>
<!-- 创建锚点 -->
<div id="footer" style="margin-top: 1000px;">This is footer</div>

div：通用元素标签，内部可以放任意元素类型

如何返回当前页面顶部？
直接将a标签的href值设置为#即可（默认# 回到顶部），如：

<a href="#">回到顶部</a>

备注：
vue.js、react等单页面应用，路由就是使用锚点实现的

图片

<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="百度一下" width="200">

备注：
设置图片的大小时，可以只设置宽度或者高度，另外一个属性就会等比缩放，不要同时设置。
在实际的开发过程中，一般都在CSS中设置图片的样式，图片很少单独使用，基本都是用在链接中。