走进前端——HTML

Posted 2022-01-29 迷途の羊

前言

作者:迷途の羊 
在这里分享学习自己的经历,希望可以帮助到初学前端的旁友
成为一个更好的前端开发者
大学在读前端菜鸡  若文中有误，感谢指正

DAY2 熟悉HTML

html常用标签

• a超链接标签
  超链接标签是用来在当前页面或是在不同页面进行跳转的标签，使用方法也非常的简单，下面进行展示：

<!--a标签的两种用法-->
	<a href="./tips.html">我将跳转到href中的链接页面</a>
    <a href="#div1">我将跳转到当前页面id为div1的位置</a>
    <a href="#div2">我将跳转到当前页面id为div2的位置</a>
    <a href="#div3">我将跳转到当前页面id为div3的位置</a>
    <a href="#div4">我将跳转到当前页面id为div4的位置</a>

    <div id="div1">1</div>
    <div id="div2">2</div>
    <div id="div3">3</div>
    <div id="div4">4</div>

可见，当我们在a标签中在href属性里写入一个链接时，我们点击a标签对应的文字即可跳转到相应的html页面；当我们在href中写入锚点格式(#id.name)时，我们点击该标签后即可跳转到该标签内id.name对应的当前页面的id.name的位置。(补充说明,div是一个块级元素，是一个非语义化标签)
a标签应用的场景无处不在，譬如我们页面中的导航栏点击跳转就是使用的a标签包裹的，一些精美的button按钮也是通过a标签+其他标签来实现的。

    <!--a标签的常用情况-->
    <ul>
        <!--导航栏简易演示版-->
        <li><a href="javascript:;">导航栏内容1</a></li>
        <li><a href="javascript:;">导航栏内容2</a></li>
        <li><a href="javascript:;">导航栏内容3</a></li>
    </ul>

    <!--按钮简易版-->
    <a  href="javascript:;"><div id="botton" style="border: 1px solid #ccc;width: 100px;height: 30px;line-height: 30px;border-radius: 15px; ">我是一个按钮</div></a>

这里展示了a标签常用的两种方式，此外，此处a标签内的href="javascript:;"为协议限定符。

• em 和 strong强调标签
  em和strong标签使用的方法很简单，只用在标签内套入需要的文字即可，此外，他们都是语义化标签！

 <p>我是一段<em>普普通通</em>的<strong>段落文字</strong></p>

从上面的展示可以看出，em用于对字体加入倾斜的效果，strong用于对字体加粗显示。

• label焦点标签
  label标签是用于给用户更好的体验，用于获取焦点，其格式如下

<label>其他代码块</label>

当我们点击label包裹住的任意位置时，我们就相当于点击了整个代码块，可以给用户更好的体验，现在我们可以想一想，什么时候可以用到这个标签呢？
这里举出一种示例：

   <input type="checkbox">我是一个复选框1
    <br/>
   <label><input type="checkbox">我是一个复选框2</label>

这样写的好处究竟是什么呢？
——第一个复选框只有点击input显示的那个框才可以改变其checked的状态，第二个复选框点击文字也可以改变其checked的状态(旁友们可以实操一下)。

• pre预格式标签
  当我们需要写一些格式比较清晰的内容块时，同时这段内容的格式难以调整，我们便可以使用pre预格式标签，在这个标签内部的所有内容都会保留其代码书写时的格式，不会被调整。

    <pre>
        这是标题
            这是第一行
                这是第一行的子内容
            这是第二行
            这是第三行
        这是结尾
    </pre>

使用pre所产生的格式：

未使用pre产生的格式：

        这是标题
            这是第一行
                这是第一行的子内容
            这是第二行
            这是第三行
        这是结尾

两者所显示的内容天差地别，pre格式在展示代码时有奇效~~

html常用知识

• HTML块级元素及行内元素
  html中分为几种类型的元素：块级元素、行内元素以及行内块级元素。
  块级元素：块级元素一个元素独占一行，可以对该元素设置宽高，块级元素可以设置margin和padding,块级元素内部可以放块级元素和行级元素，常见的块级元素有下面几种：

div , ul , li , dl , dt , dd , p , h1-h6 , tabel , form...

行内元素：行内元素只占据内容大小的宽高，一个元素不独占一行，不可以对行内元素设置宽高，其margin和padding属性仅水平方向可以使用，垂直方向无效，不能容纳块级元素，常见的行内元素有下面几种：

a , span , b , select , lable , em , button 

行内块级元素：行内块级元素具有行内元素的特性，也具有块级元素的特性，其一个元素不独占一行，只占据自身内容的宽高大小，在此同时，也可以为自己设置宽高等，其margin和padding属性也生效。

img , input , textarea

• HTML语义化
  在HTML中，部分元素被设为语义化元素，在此先列出部分HTML语义化元素：

h1~h6 , p , header , main , ul , ol , li , a , strong , em , small
footer , nav , article , section , aside , abbr

我们平时最常使用的div，span这些居然都是非语义化元素！那为什么我们要对语义化和非语义化作出区分呢？
语义化是有很大的好处的：
1、在CSS无法加载时纯HTML页面也能展现出很好的结构。
2、便于前端开发人员对页面进行开发和维护。
3、便于搜索引擎SEO(爬虫)。
4、便于用户阅读，提升用户体验。
5、便于一些设备解析(屏幕阅读器、盲人阅读器等)，可以通过语义化标签来识别内容重点。
因此，在我们开发一个页面时，我们要尽可能使用语义化标签来书写，避免大量使用div，span等此类无语义化标签，当然也要视情况而定。

• 浏览器是如何渲染HTML的
  我们平时日常生活中每浏览一个页面时都会发现URL发生了变化，浏览器呢就是通过解析URL来展示整个HTML页面的。
  1、在输入URL后浏览器会查找浏览器缓存，如果缓存中有该地址，则展示对应的页面，若无该地址，则进行下一步操作。
  2、浏览器向DNS服务器发送域名解析请求，请求解析出该URL中对应的域名地址和IP地址。
  3、根据解析出的IP地址和默认的端口号80(HTTP)建立TCP连接。
  4、浏览器发起请求来读取文件。
  5、服务器对浏览器的请求做出相应，给浏览器返回对应的HTML文件。
  6、通过四次挥手释放TCP连接。
  7、浏览器解析HTML并进行渲染(首先构造DOM树，其次构造CSS规则树，然后构建render树，最后进行布局和绘制)。
  8、执行JavaScript代码。

下期内容

CSS初步

**章末语**
前端容易入门，但是需要持续不断的学习，更新自己的知识
千里之行，始于足下
喜欢文章的话可以动动小手点个赞和关注呀~~
长期更新......