Web前端开发学习----第一部分

つ微凉徒眸挚半

已于 2022-12-28 13:58:20 修改

阅读量655

点赞数

文章标签：前端学习

于 2022-10-15 18:13:07 首次发布

本文链接：https://blog.csdn.net/weixin_73696461/article/details/127337943

版权

一、第一部分

主要学习关于html和css，和下载相关的软件，并且要求熟练使用。

1.1内容一：

VSCode编译器基本使用：

ctrl+s:保存
ctrl+a:全选
ctrl+x：剪切
ctrl+c：复制
ctrl+v：粘贴
ctrl+z：撤销
ctrl+y：前进
shift+end：从头选中一行
shift+home：从尾部选中一行
shift+alt+向下：快速复制一行
alt+向上或向下：快速移动一行
tab:向后缩进
tab+shift:向前缩进
ctrl+alt+方向键(上下):添加光标
ctrl+shift+l:所有相同单词后添加光标

1.2内容二：

HTML:结构
CSS:样式
JavaScript:行为（互动）

`<style>
       div{color:red;font-style:italic;}
       </style>
       <div>`HTML+CSS系列教程</div>

以上为文字的颜色和样式的改变（红色and斜体）

二、第二部分

主要内容：HTML基础结构和属性

1.1 内容一：HTML:超文本标记语言

超文本：文本内容+非文本内容（图片、视频、音频等）
标记：<单词>（也叫标签）：

          <header>
+         <footer>`

语言：编程语言
标记的写法：
单标签 <header>
双标签 <header></header>
创建标签的快捷键：单词+tab键-> <单词>

1.2 内容二：HTML初始代码

<!DOCTYPE html><!--文档声明:为一个html文件-->
<html lang="en"><!--html文件最外层标签:包裹所有html标签代码 lang="en"表示英文网站 lang="zh-CN"表示一个中文网站-->
<head>
    <meta charset="UTF-8"><!--元信息:是编写网站中的一些赋值信息 charset="UTF-8"国际编码,让网站不出错.-->
    <title>我是一个网页标题</title><!--设置网页的标题-->
    </head>
    <body>
    hello world<!--显示网页内容-->
    </body>
    </html>

快捷添加和删除注释:
1.ctrl +/
2.shift +alt +a

! + tab键:快速创建初始代码

1.3 内容三 : HTML语义化

好处:
1.在没有CSS的情况下，页面也能呈现出很好的内容结构。
2.有利于SEO，让搜索引擎爬虫更好的理解网页。
3.方便其他设备解析（如屏幕阅读器、盲人阅读器等）。
4.便于团队开发与维护。

A. 标题与段落

标题->双标签:<h1></h1>......<h6></h6>
在一个网页中,h1标题最重要,并且一个.html文件中只能出现一次h1标签.
段落->双标签:<p></p>
文本修饰标签：
1.强调 -> 双标签：<strong></strong>、<em></em>
区别：
1.写法和展示效果是有区别的一个加粗，一个斜体。
2.strong强调性更强,em强调性稍弱。
2.上、下标：<sup><sup/>、<sub></sub>
3.删除和插入文本：<del></del>、<ins></ins>

实际操作：

<!DOCTYPE html>
<html lang "en">
    <head>
        <meta charset="UTF=8">
    <title>我是一个网页标题</title>

    </head>
    <body>
     <h1><strong>南京邮电大学通达学院</strong></h1>
     <p><em>南京邮电大学通达学院(Tongda College of Nanjing University of Posts and Telecommunications)</em>位于江苏省扬州市，学院始建于1999年，是经中华人民共和国教育部批准、由南京邮电大学创办的全日制普通本科高等学校（独立学院）。 [1] 
        截止2022年9月，学院占地893亩，现有在校生10428人。</p>
     <h2>创办时间</h2>
     <p><del>2000</del> <ins>1999年</ins></p>
     <h2>主管部门</h2>
     <p>江苏省教育厅</p>
    </body>
</html>

1.4 内容四：路径

相对路径： ./ (当前级别文件)、…/（上一级别文件）
绝对路径

1.5 内容五：图片标签

img - >单标签
src :引入图片的地址
alt :当图片出现问题的时候，可以显示提示文字
title :提示信息
width、height :图片大小

<img src="" alt="" title="图片提示信息" width="" height="" >

1.6 内容六：跳转链接

a -> 双标签 <a></a>
href属性：链接的地址
target属性:可以改变链接打开方式,默认情况下:在当前页打开_self 新窗口打开_blank
base- > 单标签:改变链接的默认行为.

<head>
<base target="_blank">
</head>

<body>
1.<a href="" >文字</a>

2.<a>
<img src="图片地址" alt=".....">
</a>
3.<a href="" target="">文字</a>
</body>

1.7 跳转锚点

法一：#号 + id属性
法二：#号 + name属性（注意name属性加给的是a标签）
实机演示:
法一演示：

<!DOCTYPE>
<html lang="en">
    <head>
    
        <meta charset="UTF-8">
      
            <title>我是一个网页标题</title>

        
        </head>
    <body>
        <a href="#a">我是一个标题</a>
       <a href="#b">我是第二个标题 </a>
       <a href="#c"> 我是第三个标题</a>
       <h2 id="a">我是一个标题</h2>
       <p>我是一个标题</p>
      <p>我是一个标题</p>
      <p>我是一个标题</p>
      <p>我是一个标题</p>
      <p>我是一个标题</p>
      <p>我是一个标题</p>
      <p>我是一个标题</p>
      <p>我是一个标题</p>
      <p>我是一个标题</p>
      <p>我是一个标题</p>
      <p>我是一个标题</p>
      <p>我是一个标题</p>
      <p>我是一个标题</p>
      <p>我是一个标题</p>
      <p>我是一个标题</p>
      <p>我是一个标题</p>
      <p>我是一个标题</p>
      <p>我是一个标题</p>
      <p>我是一个标题</p>
      <h2 id="b">我是第二个标题</h2>
      <p>我是一个标题</p>
      <p>我是一个标题</p>
      <p>我是一个标题</p>
      <p>我是一个标题</p>
      <p>我是一个标题</p>
      <p>我是一个标题</p>
      <p>我是一个标题</p>
      <p>我是一个标题</p>
      <p>我是一个标题</p>
      <p>我是一个标题</p>
      <p>我是一个标题</p>
      <p>我是一个标题</p>
      <p>我是一个标题</p>
      <p>我是一个标题</p>
      <p>我是一个标题</p>
      <p>我是一个标题</p>
      <p>我是一个标题</p>
      <p>我是一个标题</p>
      <h2 id="c">我是第三个标题</h2>
      
      
      
      
      
      
      
      
      
       
     </body>
</html>

法二演示：

<body>
a href="#a">第一项</a>
      <a href="#b">第二项</a>
      <a name="a"></a>
        <h2>第一项</h2>
      <p>我是一个标题</p>
        <p>我是一个标题</p>
        <p>我是一个标题</p>
        <p>我是一个标题</p>
        <p>我是一个标题</p>
        <p>我是一个标题</p>
        <p>我是一个标题</p>
        <p>我是一个标题</p>
        <p>我是一个标题</p>
        <p>我是一个标题</p>
        <p>我是一个标题</p>
        <p>我是一个标题</p>
        <p>我是一个标题</p>
        <p>我是一个标题</p>
        <p>我是一个标题</p>
        <p>我是一个标题</p>
        <p>我是一个标题</p>
        <p>我是一个标题</p>
        <p>我是一个标题</p>
        <p>我是一个标题</p>
        <p>我是一个标题</p>
        <p>我是一个标题</p>
        <p>我是一个标题</p>
        <p>我是一个标题</p>
        <p>我是一个标题</p>
        <p>我是一个标题</p>
        <p>我是一个标题</p>
        <p>我是一个标题</p>
        <p>我是一个标题</p>
        <p>我是一个标题</p>
        <p>我是一个标题</p>
        <p>我是一个标题</p>
        <p>我是一个标题</p>
        <p>我是一个标题</p>
        <p>我是一个标题</p>
        <p>我是一个标题</p>
        <p>我是一个标题</p>
        <p>我是一个标题</p>
        <p>我是一个标题</p>
        <a name="b"></a>
        <h2>第二项</h2>
        <p>我是一个标题</p>
        <p>我是一个标题</p>
        <p>我是一个标题</p>
        <p>我是一个标题</p>
        <p>我是一个标题</p>
        <p>我是一个标题</p>
        <p>我是一个标题</p>
        <p>我是一个标题</p>
        <p>我是一个标题</p>
        <p>我是一个标题</p>
        <p>我是一个标题</p>
        <p>我是一个标题</p>
        <p>我是一个标题</p>
        <p>我是一个标题</p>
        <p>我是一个标题</p>
        <p>我是一个标题</p>
        <p>我是一个标题</p>
        <p>我是一个标题</p>
        <p>我是一个标题</p>
        <p>我是一个标题</p>
        <p>我是一个标题</p>
        <p>我是一个标题</p>
        <p>我是一个标题</p>
        <p>我是一个标题</p>
        <p>我是一个标题</p>
        <p>我是一个标题</p>
        <p>我是一个标题</p>
        <p>我是一个标题</p>
        <p>我是一个标题</p>
        <p>我是一个标题</p>
        <p>我是一个标题</p>
        <p>我是一个标题</p>
        <p>我是一个标题</p>
        <p>我是一个标题</p>
        <p>我是一个标题</p>
        <p>我是一个标题</p>
        <p>我是一个标题</p>
      
      
      
       
  
</body>

1.8 特殊字符

& + 字符
解决冲突左右尖括号、添加多个空格的实现

实机演示:

<body>
    <p>
        &lt; 123 &gt;&reg;&copy;

    </p>
    
</body>

1.9 列表标签

无序-> ul li 符合嵌套的规范。
有序-> ol li 一般用的少，无序可以实现
(type 可以更改属性，有序列表以后可以通过CSS修饰获得)

无序：
正确:

<body>
<ul type="circle">
    <li>第一项</li>
</ul>
</body>

错误:

<body>
<ul>
  <p>
    <li>第一项</li>
  </p>
</ul>

</body>
<!--<ul>和<il>之间不能有其他的标签,但是<il></il>之间可以.-->

有序：
演示：

<body>
<ol type="1">
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
<ol>
</body>

2.0 定义列表

<dl>(define list)定义列表
<dt>(define list title)定义专业术语或名词
<dd>(define list define)对名词的解释
实机演示：

<body>
<dl>
	<dt>一<dt>
	<dd>1</dd>
	<dt>二<dt>
	<dd>2</dd>
	<dt>三<dt>
	<dd>3</dd>
</dl>
</body>

hr标签：

<hr color="red" width="500px" align="right" noshade>//noshade消除阴影

在这里插入图片描述