7.16 html初学

最新推荐文章于 2024-08-13 15:48:44 发布

yangyue012345

最新推荐文章于 2024-08-13 15:48:44 发布

阅读量199

点赞数

文章标签： html5 vscode

本文链接：https://blog.csdn.net/qq_51967148/article/details/118811706

版权

HTML VScode 基本标签超链接网页制作

关键词由CSDN通过智能技术生成

学习目标：

一周左右的时间掌握HTML入门知识
学会自己制作简单网页

学习内容：

一、HTML基本框架和VScode 插件安装

VS Code 软件可以自动生成html的框架（！然后tab键，一定要是英文的tab键）
html基本框架：

<html>
<head> 页面的标题</head>
<body>页面的内容</body>
</html>

VS CODE软件的相关插件安装

最左边最后一个可以安装插件(方框的),可以直接搜索安装(install)插件,安装完一定要重启软件！！！

插件说明
插件名称	插件作用
Chinese	英译汉
open in browser	在浏览器中预览
Auto rename tag	标签前后相匹配重新命名

js css html不好用，不要安装！！

二、HTML基本标签

<!DOCTYPE html>文档类型声明标签告诉浏览器这个页面采用html5来显示
<html lang="en">语言类标签 lang ="en"(英文网页)/"zh-CN"(中文网页) 英文网页可以显示中文，中文网站也可以显示英文
<meta charset="UTF-8"/> 字符集，不写会乱码
标题标签 <h1>一级标题</h1>……<h6>
段落标签 <p> </p>
换行标签(单) <br />强制换行break
<strong>加粗</strong>
<em>倾斜 </em>
<del>删除线</em>
<ins>下划线</ins>
<div>独占一行的的盒子</div> <span>一行多个span盒子</span>

三、插入图片相关标签

图片必须和.html网页放在同一个目录下才可以
<img src="img.jpg"(名字或者路径)>
<img src="图片的名字或路径" alt="图片显示不出来时的替换文本"/>
<img src="图片的名字或路径" alt="图片显示不出来时的替换文本" title="鼠标放到图片上的提示文本">
width height border相框

四、超链接（重点）

外部链接 <a href="跳转目标的地址" target="目标窗口的弹出方式(_self为默认值"_blank"为新窗口打开)"> 文本或图像 </a>
内部链接 <a href="链接名称" target="目标窗口的弹出方式(_self为默认值"_blank"为新窗口打开)"> 文本或图像 </a>
空链接 <a href="#"> 文本或图像 </a>
下载链接 <a href="img.zip">下载文件</a>
网页元素链接 <a href="跳转网址"><img src="img.jpg"/></a>
锚点链接可以跳转网页中的某一位置<a href="#exp">个人经历</a> <h3 id="exp">个人经历</h3>

五、注释和特殊字符表示

注释  快捷键： crtl +/
特殊字符空格( ) 小于< (<) 大于> (>)

学习产出：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DYJ</title>
</head>
<body>
    <h2>邓狗</h2>
    <p><a href="#basic">基本信息</a></p>
   <p> <a href="#exp">教育经历及工作经历</a></p>
    <p><a href="#chengguo">科研成果</a></p>
   <p> <a href="#other">其他</a></p>
    <h3 id="basic">基本信息</h3>
    姓名&nbsp;邓雨佳&nbsp;&nbsp;性别&nbsp;女<br>
    职称&nbsp;讲师&nbsp;&nbsp;&nbsp;民族&nbsp;汉族<br>
    政治面貌&nbsp;中共党员&nbsp;研究方向&nbsp;风景园林规划设计<br>
    电子邮箱&nbsp;dyjcnd@qq.com<br>
    <img src="dyj.png" title="啥也不会012345">
    <h3 id="exp">教育经历及工作经历</h3>
    <p>2004.09-2008.07，四川农业大学，园林规划专业本科学习；
2008.09-2011.06，四川农业大学，园林植物与观赏园艺专业硕士研究生学习；
2011.07-2014.07,四川农业大学，科研助理；
2014.07-至今，四川农业大学，风景园林类本科实验教学示范中心，实验师</p>
    
<h3 id="chengguo">科研成果</h3>
<h4>一、代表性论文、专利、专著及教材</h4>
<p>1、专著与教材<br>
    （1）川西林盘景观资源保护与发展模式研究（专著），中国林业出版社，2011，北京，参编<br>
    （2）四川地震灾后新农村恢复重建关键技术研究与示范（专著），中国林业出版社，2014，北京，247页，参编<br>
    （3）竹类主题公园规划设计理论与实践（专著），科学出版社，2014，成都，313页，参编<br>
    （4）观赏竹与景观（专著），中国林业出版社，2016，北京，166页，参编
    </p>
<h4>二、科研教学获奖及个人荣誉</h4>
    <p>1、科研获奖（含规划设计类获奖）<br>
    （1）绵竹市地震灾后新农村建设技术集成与综合示范，中国风景园林学会科技进步奖二等奖，2014<br>
    （2）雨雪冰冻灾害后四川主要经济竹林恢复重建关键技术研究与示范，四川省科技进步二等奖，2015<br>
    （3）四川珍稀观赏竹培育关键技术研究及示范，成都市科技进步二等奖，2017<br>
    （4）西南主要丛生竹定向培育关键技术研究与产业链示范，梁希林业科学技术二等奖,2017</p>
<h3 id="other">其他</h3> 自己<a href="http://www.baidu.com">百度</a>去吧
</body>
</html>

主要是跟着B站的PINK老师学的哈哈哈哈哈

https://www.bilibili.com/video/BV14J4114768?p=32&spm_id_from=pageDriver

yangyue012345

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
7.16 html初学

VS Code 软件可以自动生成html的框架（！然后tab键，一定要是英文的tab键）html基本框架<html> <head> 页面的标题</head> <body>页面的内容</body></html>最左边最后一个可以安装插件(方框的)，然后可以搜索安装(install)插件,安装完一定要重启软件！！！Chinese中文插件在浏览器中预览（open in browser）插件 ...
复制链接

扫一扫