走进前端——HTML(2)

前言

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

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从上面的展示可以看出,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产生的格式:


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

未使用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初步

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

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
THE END
分享
二维码
< <上一篇
下一篇>>