前端学习日记(2) —— HTML5 基础

复习下Web开发学习基础:

前端部分:

  HTML标签:Web页面的结构,包含了页面的主要内容部分,

  CSS:页面样式

  JS:实现交互行为

后台部分:

前端提交请求到后台通过C#/PHP/JAVA/.net等等处理数据,实现与数据库数据交互

数据库:

Sql sever等存放数据表,存放数据信息

HTML工具

  关于文本编辑器的工具,不同人有不同见解,(当然应该很少有人用TXT文本文档编辑)主流的编辑器我都用过,Sublime Text、Atom、Eclipse、Notepad++、Dreamware、Webstorm、Visual Studio、VSCode、IDEA等,推荐两个Sublime Text(插件让你飞~),VSCode(比较新,但发展很快)两个轻量级的,当然功能需求较多的Visual Studio,Jetbrain家鼻祖级的应该都不错,至少流畅度和使用体验不错,其他的不是太卡就是功能太复杂,写写代码的话基本用不到。

 

HTML基础知识

  HTML是最基础的部分(至少要有内容才能进行处理)

  言归正传,先学习下HTML基础知识,包括文档结构,常用标签语法语义等。

一.      HTML5 文档结构

基本元素

<!--注释-->                                            //注释内容不会显示在页面中
<!DOCTYPE html>                                       //声明文档类型是HTML
<html lang="zh-cn">                                   // HTML根元素,有且只有一个,表示HTML 文档开始
<head>                                                //包含文档元数据开始
<meta charset="utf-8">                                //声明字符编码
<title>基本结构</title>                   //设置文档标题
</head>                                               //包含文档元数据结束
<body>                                                //表示HTML文档主体内容
<a href="http://www.baidu.com">百度</a>          //一个超链接元素(标签)
</body>                                               //表示HTML主体内容结束
</html>                                               //表示HTML 文档结束

  1.<!Doctype>                  DTD(Document Type Definition 文档类型定义)声明文档类型,定义HTML和XHTML文档模式,包括语义规范和约束

  2.<html></html>          根元素,有且只有一个,表示文档开始和结尾

  3.<head></head>          包含元数据内容。<link>、<meta>、<noscript>、<script>、<style>、<title>等

  4.<meta>                        单标签,提供关于文档的信息

  5.<body>                         用来包含文档内容的元素,也就是浏览器可见区域部分。所有的可见内容,都应该在这个元素内部进行添加。

HTML标签

  HTML标签使用<>表示,每个元素都由开始标签和结束标签组成,之间可以嵌套,但只存在包含与被包含的关系,即合理嵌套。<a><b>********</b></a>,而不能有以下形式<a><b>********</a></b>

HTML5语法

  大小写:HTML5不区分大小写,但一般用小写,区别JS。

  标签结构:HTML5可以省略结束标签,良好习惯一般保留结束标签,单标签会在结束使用空格 + “/”,如<br />

  属性值一般用单引号(‘ ’)或双引号(“”)引用,也可不用,默认属性值可省略。

 

时间: 2024-10-16 21:30:09

前端学习日记(2) —— HTML5 基础的相关文章

好程序员web前端学习路线分享函数基础

好程序员web前端学习路线分享函数基础,在这之前先来讲一下函数是什么? 函数就一个代码块,可以是一个完全独立与其它内容没有关系的代码块,也可以是一个与外界环境紧密相关的代码块.函数是一个拥有输入和输出的独立代码块.函数是程序中最重要的组成部分. 函数,是一种封装(将一些语句,封装到函数里面).通过函数可以封装任意多条语句,而且可以在任何地方.任何时候调用执行. 在javascript里,函数即对象,程序可以随意操控它们.函数可以嵌套在其他函数中定义,这样它们就可以访问它们被定义时所处的作用域中的

前端学习日记

时间过得真快,一周时间一眨眼就过去了.不知不觉,C语言就学完了. 这,今日郎沃之前.是完全没想到的,出来工作几年的我.会出现培训学校,和同学们一起学习.现在想来,还真有点儿匪夷所思的感觉.不过静下心来想想,其实也是一个难得的机会.如果这要在婚后,估计就得另当别论了. 刚开始接触C语言的时候,给我一种就像让脑子脱离一种常规的思考方式进进行思考一样.有时候一天下来,总感觉晕晕乎乎的.但是奇怪的是,上课的时候跟着老师的思路走.感觉又不难,但是一旦讲完之后再来做题的时候,脑袋里就是一片空白了.下来得花很

kali学习日记第一篇 -- 基础知识

一.kali基础 1.kali是基于backtrack基础之上的渗透测试新工具,它基于Debian GNU/Linux系统,并且支持多种桌面环境,多种语言,apt软件包管理机制,自定义系统,支持各类硬件(树莓派),包含多种渗透测试知名开源框架,kali包含的开源项目社区氛围好,更新较快. 二.kali安装之后必要的几步操作  1.配置网络与远程管理 kali默认是不开启网卡的,在确保联网的情况下使用dhcp或static使网卡获取ip地址 1.[email protected]:~# servi

Axiom3D学习日记 0.Axiom基础知识

程序基本步骤: Create the Root object. Define the resources that the application will use. Choose and set up the render system (that is, DirectX, OpenGL, etc). Create the render window (the window which Axiom will render onto). Initialize the resources that

Linux学习日记—shell脚本基础

在Linux的日常维护中,shell脚本是我们必不可少的日常管理之一:其作用是解决服务器的自动化维护工作,减轻管理员的工作量:如果想提高shell脚本的编写速度,必须要熟练使用vi编辑器的各种快捷键. [什么是shell]    Shell Script,Shell脚本与Windows/Dos下的批处理相似,也就是用各类命令预先放入到一个文件中,方便一次性执行的一个程序文件,主要是方便管理员进行设置或者管理用的.但是它比Windows下的批处理更强大,比用其他编程程序编辑的程序效率更高,毕竟它使

百度前端学习日记07——布局(三)Flexbox

前言 更多参考MDN flex布局 正文 1.Flexbox模型 主轴(main axis)是沿着 flex 元素放置的方向延伸的轴(比如页面上的横向的行.纵向的列).该轴的开始和结束被称为 main start 和 main end. 交叉轴(cross axis)是垂直于 flex 元素放置方向的轴.该轴的开始和结束被称为 cross start 和 cross end. 设置了 display: flex 的父元素被称之为 flex 容器(flex container). 在 flex 容

百度前端学习日记08——CSS文字样式,边框,背景

前言 MDN网站--文字样式 MDN网站--边框 MDN网站--背景 正文 MDN网站详细的说明举例 总结押后!(重点:背景) 原文地址:https://www.cnblogs.com/no-wing/p/9295973.html

百度前端学习日记10——javaScript基本语法

1.变量 a.变量类型 Number 数字 String 字符串 Boolean 布尔型true和false Array 数组 Object 对象 b.变量声明 var n; 与其他编程语言不同,在 JavaScript 中你不需要声明一个变量的类型.JavaScript是一种"动态类型语言",这意味着不同于其他一些语言(译者注:如C.JAVA),您不需要指定变量将包含什么数据类型(例如number或string). 2.条件语句与循环语句 a.条件语句 if.....else els

百度前端学习日记19——CSS sprite(雪碧图)

原理 如图所示,无黑影处为浏览器中会显示的部分,通过改变backgroundPosition来使显示的地方不同,从而达到更换背景的目的 更多 浅谈CSS Sprite和实例解析 CSS Sprites:实用技术还是生厌之物? 原文地址:https://www.cnblogs.com/no-wing/p/9325669.html