前端与HTML|青训营笔记

用户1141587274469
478 阅读3分钟

前端与HTML|青训营笔记

这是我参与「第五届青训营 」伴学笔记创作活动的第 一 天。

本堂课重点内容：

  1. 简单介绍了前端的相关知识。
  2. 介绍了HTML的标签。
  3. HTML5新增的一些语义化标签等。

具体内容：

前端相关知识：

1.什么是前端： 前端即网站前台部分，运行在PC端，移动端等浏览器上展现给用户浏览的网页。

2.Web技术栈：

image.png

3.前端应该关注哪些方面

image.png

4.前端的开发环境

image.png

HTML相关标签

常用的HTML标签:p标签、h1~h6标签、div标签、ol/ul>li标签、input标签、img等。

  • HTML标准骨架
 <!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, initialscale=1.0">
        <title>Document</title>
    </head>
    <body>
    </body>
</html>

<!DOCTYPE html> ：向浏览器声明当前的⽂档类型是 html <html></html> ：是⽹⻚当中最⼤的标签，我们称之为根标签 <head></head> ：为⽹⻚的头部，它⾥⾯的内容主要⽤来定义⽹ ⻚标签及给浏览器查看的⼀些信息

<meta charset="UTF-8"> ： 定义⽹⻚的编码为UTF- 8

<title></title> ：为⽹⻚标题标签，它⾥的内容会显示在浏览器的标签⻚上

<body></body> ：为⽹⻚主体标签，它⾥⾯的内容都会显示在浏览器的⽩⾊窗⼝区域

  • <h1>~<h6>:HTML的标题标签，效果依次减少。
<h1>⼀号标题</h1> 
<h2>⼆号标题</h2> 
<h3>三号标题</h3> 
<h4>四号标题</h4> 
<h5>五号标题</h5>
<h6>六号标题</h6>
  • <p></p>:HTML的段落标签
  • <img src="" alt="" width="" height="" title="">： HTML的图片标签
  1. src:表示资源,图⽚加载的名字.
  2. width(宽),height(⾼):设置图⽚的⼤⼩。
  3. title:⿏标悬停在图⽚上的提示⽂字
  4. alt:图片没有被正常加载时显示
  • <a href=" "></a>:HTML超链接标签 其中href为：跳转的网址； <a href="https://www.baidu.com" target="_blank">点击我可以打开百度,并且打开新 的窗⼝</a> target=”_blank"：在其它窗口打开新连接。
<input placeholder="请输入用户名">
<input type="range">
<input type="number" min="1" max="10">
<input type="date" min="2018-02-10">
<textarea>Hey</textarea>

<input>:HTML的输入标签type类型不同，对应的input类型也不同。 <textarea></textarea>HTML的文本框标签

<div></div>div标签相当于一个容器，里面可以放各式各样的标签和内容。

<div style="background-color: wheat;"> 
<h1>Hello World</h1>
<h2>Hello World</h2>
<h3>Hello World</h3>
<h4>Hello World</h4> 
<h5>Hello World</h5>
<h6>Hello World</h6> </div>

页面的内容划分

image.png

HTML一些语义化标签

加粗标签 <b></b>和<strong></strong> 区别：b标签为简单加粗；strong为加粗效果+特别强调效果；

倾斜 <i></i> 为倾斜标签； <em></em>也可实现倾斜；
区别：em标签的语义更强一些。i为倾斜了，em为又倾斜了。

删除 <del></del> 删除效果

有序列表和无序列表

无序列表用<ul></ul>标签表示
注意： （1）ul标签可以嵌套若干个li标签； （2）每一个li标签代表着每一条数据； （3）每个li标签之间没有顺序；
如：

<ul>
    <li>python</li>
    <li>java</li>
    <li>go</li>
</ul>

有序列表用<ol></ol>表示
注意： （1）有序； （2）且是ol开始的；

语义化是什么
  • HTML中的元素，属性以及属性值都拥有某种含义。
  • 开发者应该语义来编写HTML
语义化的好处
  • 代码可读性
  • 可维护性
  • 搜索引擎优化
  • 提升无障碍性
如何做到语义化

  • 了解每个标签和属性的含义

  • 思考什么标签最适合描述这个内容

  • 不使用可视化工具生成代码

avatar
文章
阅读
粉丝