天天看点

初学者谈初学者学html

本文说明

  • 你如果点开了这个文章,说明你对html这种东西有想要了解的渴望。在保证你自己是初学者的情况下,你不妨看看我这个初学者在系统学习了html一段时间后的一些心得体会。可能会让你少走一些弯路。
  • 本文主要系统地介绍html的层级架构,以及个人觉得有必要提及的点。
  • 本人学习html是基于w3cschool,后续提到的简单的以及没必要叙述的点大家可以自行去网站浏览。

html

  • 你应该先简单的知道什么是html:

    HTML 指的是超文本标记语言(英语:HyperText Markup Language),是用来描述网页的一种语言。

    HTML 不是一种编程语言,而是一种标记语言,它有一套标记标签 。

    HTML 文档包含了 HTML 标签及文本内容,HTML文档也叫做 Web 页面。

    用我自己的话说就是写网页的语言。html不同于大多数人所熟悉的c,c++,python等高级编程语言,只需要放置对应的标签来构造自己想要的元素来构造自己想要的页面,而不需要去自己想与创造。

html的网页结构

  • 简单的说就是标签对的嵌套
<html>
<head>
<title>页面标题</title>
</head>
<body>
  <h1>这是一个标题。</h1>
  <p>这是一个段落。</p>
</body>
</html>
           

解释一下就是:

< html> 与 < /html> 之间的文本是描述网页。

< head> 与 < /head> 之间的文本是文档的元数据。

< title> 与 </ title> 之间的文本是文档的标题。

< body> 与 < /body> 之间的文本是可见的页面内容,是文章的主体部分。

< h1> 与 < /h1> 之间的文本被显示为一个大标题。

< p> 与 < /p> 之间的文本被显示为一个段落。

如果稍微了解一点html的话,应该可以懂我什么意思。不过你如果没有懂也问题不大,很简单的东西,往下看就是了。

标签

  • 标签是html的半壁江山,数量很多,我肯定不能一一列举什么标签有什么功能,大家可以去w3cschool上去了解每个标签各自有什么作用,能产生什么样的效果。
  • 在这里我仅仅阐述我觉得在html初学者这里有用的一些:

    < br/ >:换行

    < hr/ >:插入水平线

    < !-- – >:”注释

    < p > < p >:段落

    < b >:定义粗体文本

    < em >: 定义着重文字

    < i > :定义斜体字

    < small >:定义小号字

    < strong >:定义重要的文本

    < sub >:定义下标字

    < sup >:定义上标字

    < ins > :定义插入字

    < del > :定义删除字

    < a >:超链接

    < img >:插入图片

    < table >< /table>:表格

    < form >< /form>:表单

    当然,像表格表单这种大类里面还会有很多细节,建议去自行查找。

属性

  • 很多标签是会有属性的,属性是用来规定一些详细的参数(差不多吧我不知道怎么概括了。。)
  • 列举一个属性让大家知道是什么就完事了,具体的每个标签有什么属性还是需要大家去w3cschool上参考.

    在 超链接< a > 标签中使用 target 属性,你可以规定在何处打开链接文档。

<a href="https://www.w3cschool.cn" target="_blank" rel="external nofollow"  target="_blank"> 访问w3cschool </a>
           

这个target属性就是来描述超链接打开的网页是通过什么样的方式来弹出。

_blank:在新窗口中打开被链接文档。

_self:默认。在相同的框架中打开被链接文档。

_parent:在父框架集中打开被链接文档。

_top:在整个窗口中打开被链接文档。

_framename:在指定的框架中打开被链接文档

样式表

  • 很多初学者都在疑惑为什么我只按标签和属性搞出来的页面low的要命。而网络上的那些页面都很精美。这就关系到网页样式的问题。

    样式就是规定网页长什么样子,样式存储在样式表中。而如果读者有稍微了解,现在的网页都是html+css+javascript三个部分共同完成的,其中css就是负责样式这部分的。

    但是一般人在学html的时候并不会先接触css,而且写一些小型的简单的网页也可以采用更简洁的方式来完成。

  • 我这里想提的是三种不同的样式方式。在我之前学校小项目做web的时候,曾经四处找人家现成的网页去改,不理解样式的原理,所以当时出现了很多玄学问题,乱七八糟的很苦恼。在这里给读者介绍的同时也是自己在给自己梳理

内联样式表:当特殊的样式需要应用到个别元素时,就可以使用内联样式。 使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。例如:

<h1 style="font-family:arial;">w3cschool</h1>
<p style="font-family:arial;color:red;font-size:20px;">随时随地学编程</p>
           

内部样式表:当单个文件需要特别样式时,就可以使用内部样式表。你可以在< head > 部分通过 < style >标签定义内部样式表。例如:

<head>
<style type="text/css">
 h1 {color:red;}
 p {color:blue;}
</style>
</head>
           

外部样式表:当样式需要被应用到很多页面的时候,外部样式表将是理想的选择。使用外部样式表,你就可以通过更改一个文件来改变整个站点的外观。 这个方式也就是css的方式,通过调用外部写好了样式的css文件来改变web网页的样式,做到了样式与网页元素分离,能更好的管理。

<head>
<link rel="stylesheet" type="text/css" href="/statics/demosource/styles.css" target="_blank" rel="external nofollow" >
</head>
           

内部样式和外部样式没有优先级关系,页面后加载的会生效;内联样式的优先级最高

表格和表单

  • 我为什么把这两个东西单拉出来说,因为这两个东西的使用率很高,而且细节也比较多。现在网络上搜索的html教程里面都会把这两个部分单独划分一个块。而我这篇文章没有想讲这两部分东西,读者如果想系统学习还请去自行搜索。

我自己这几天学到的一些细节

大多数 HTML 元素被定义为块级元素或内联元素。

HTML < span >元素是内联元素,可用作文本的容器。< span > 元素也没有特定的含义。当与 CSS 一同使用时,< span > 元素可用于为部分文本设置样式属性。

<p>我的哥哥有 <span style="color:0000FF;font-weight:bold">蓝色</span> 的球鞋,我的姐姐有 <span style="color:FF0000;font-weight:bold">红色</span> 的球鞋。</p>

初学者谈初学者学html

我懒得总结了,直接把我学习过程中随手截的图放出来了,感觉还是挺有用的

初学者谈初学者学html
  • 初学者谈初学者学html
  • 初学者谈初学者学html
    初学者谈初学者学html
    初学者谈初学者学html
    初学者谈初学者学html
    初学者谈初学者学html
    初学者谈初学者学html
    初学者谈初学者学html
  • 初学者谈初学者学html
    初学者谈初学者学html
    初学者谈初学者学html
    初学者谈初学者学html
    初学者谈初学者学html
初学者谈初学者学html

web的图形与动画绘制

想收尾突然又想到这个东西。我们会见到好多网页上有各种会动的装饰用的图形动画,是可以通过SVG与canvas来绘制与渲染的,我这里的说明也只是说明这个方式,也不会进行介绍,因为我自己也不会。。

小结

html其实是一个很简单的东西。感觉是计算机类里面对初学者来说最友好的一个选择,读者们如果想学习,也是件比较快的事情。我作为一个入门小白,写的所思所感,也是为自己以后的学习留痕迹与做铺垫。共勉