web前端开发----HTML基础标签及其属性总结(一)

目录

什么是web前端?

HTML、CSS、JavaScript三者间的关系

什么是HTML?

HTML基础语法

标签及其属性     

什么是web前端?

前端开发是创建Web页面或app等前端界面呈现给用户的过程,通过HTML、CSS及JavaScript以及衍生出来的各种技术、框架、解决方案,来实现互联网产品的用户界面交互。

前端开发从网页制作演变而来,早期网站主要内容都是静态,以图片和文字为主,用户使用网站的行为也以浏览为主。随着互联网技术的发展和HTML5、CSS3的应用,现代网页更加美观,交互效果显著,功能更加强大。

HTML、CSS、JavaScript三者间的关系

  1. HTML是承载内容的基础框架。HTML就像一副骨架。承载的内容就是网页制作者放在页面上的想要用户浏览的信息。可以包括文本、图片、视频、音频等。
  2. CSS样式是对网页表现的装束。HTML+CSS就像是给骨架披上衣服后的洋娃娃。CSS实现例如标题的字体、颜色变化,或者是为标题加入背景图片、边框等功能。所有这些用来改变内容外观的东西称之为表现。
  3. JavaScript实现网页的动态性。HTML+CSS+JavaScript就像是一个拥有灵魂的人。JS实现例如鼠标按下和按钮提交事件,图片的轮换等动态功能。

 什么是HTML?

HTML指的是超文本标记语言(Hyper Txt Markup Language),HTML不是一种编程语言,而是一种标记语言(markuplanguage),是网页制作所必备的工具。“超文本”就是指页面内可以包含图片、链接,甚至音乐、程序等非文字元素。

超文本标记语言(或超文本标签语言)的结构包括“头”部分和“主体”部分,其中“头”部提供关于网页的信息,“主体”部分提供网页的具体内容。

HTML基础语法

标签:HTML标签是由尖括号包围的关键词,分为单标签和双标签

         单标签:

                  无属性:<标签名/>

                  有属性:<标签名  属性名="属性值"/>

         双标签:

                  无属性:<标签名>

                  有属性:<标签名  属性值="属性值">

整体结构:

                   表示当前是一个网页,称为跟标签,所有网页标签都包含在在其中,形如网页标签

                 头部信息,用于定义文档的头部信息,头部标签有,<script>,<style>等,可以设置网页标题等属性。</p> <p>        <body></body>         身体部分,显示网页的主要内容,如<h1>,<p>,<a>,<img>等标签。在这里面的标签会在网页中显示出来。</p> <p>示例:</p> <pre><code class="language-html"><!DOCTYPE html> <!-- html5标准网页声明--> <html lang="en"> <!--向搜索引擎表示该页面是html语言,并且语言为英文网站,其"lang"的意思就是“language”,语言的意思,而“en”即表示englis,"ch"为中文--> <!--头部区域--> <head> <meta charset="UTF-8"> <!--charset=”utf-8”是告知浏览器此页面属于"utf-8"字符编码格式--> <link ref = "stylesheet" href="引入的css的路径"/> <script src="引入的js的路径" type="text/javascript" charset="utf-8"></script> <title>标题

HTML标签及其属性

一、body标签

属性名 作用
bgcolor 设置背景颜色
text 设置字体颜色

使用示例:


    hello world
    

结果:

web前端开发----HTML基础标签及其属性总结(一)_第1张图片

 

二、标题标签   

...
依次从大到小 

不建议使用过多的h1标签,h1标签可以被搜索引擎获取到,如果有多个,可能会被搜索引擎加入黑名单

 三、水平线标签


 
属性名 取值 作用
width 百分比 或者px 设置宽度
align left,right,center(默认) 设置对其方式
size 数字 设置水平线粗细

四、段落标签

属性名 取值 作用
align left,right,center,justfy 设置段落内文本对齐方式
p元素会在其前后创建一些空白,浏览器会自动添加这些空间  

五、换行标签


标签只是简单地换行,适用于输入空行,分割段落适合用

标签

示例: 

​

    hello world
    
hello world

hello world

hello world

结果如下

web前端开发----HTML基础标签及其属性总结(一)_第2张图片

六、列表标签

列表标签分为无序列表和有序列表  

  • 无序列表:由
    • 标签组成
    属性名 取值 作用
    type

    disc:实心圆(默认)

    circle:空心圆

    square:方块

    列表标记
    • 有序列表:由
      1. 标签组成 
      属性名 取值 作用
      type

      1:数字序号

      a:小写字母

      A:大写字母

      i:小写罗马数字

      I:大写罗马数字

      列表标记

       示例: 

          
      • 水果
      • 蔬菜
      • 主食
      1. 水果
      2. 蔬菜
      3. 主食

      运行结果:

         web前端开发----HTML基础标签及其属性总结(一)_第3张图片

      七、div和span标签

      是一个块级元素,通常与CSS配合使用,用于布局。

      标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具,并且不使用任何格式与其关联。

      是一个块级元素。这意味着它的内容自动的开始一个新行。实际上,换行是
      固有的唯一格式表现。可以通过
      的class或id应有额外的样式。

      常用属性:

      属性名 取值 描述
      align left,right,center 规定div元素中的内容的对其方式,以后可以用样式取代他

      标签被用来组合文档中的行内元素,span没有固定的格式表现。当对它应用样式时,它才会产生视觉上的变化

       

       

       

       

       

       

       

      你可能感兴趣的:(html,html5)