WEB前端-HTML-基础

作为WEB前端的第一篇,先讲讲WEB大体的情况。
学习WEB前端开发,需要了解三把刀:HTML、CSS、JavaScript
HTML:提供最基本的web语言基础
CSS:用过Photoshop的朋友应该了解一个图层的概念,css就是实现各种页面渲染的语言,主要实现的是静态渲染
JavaScript:跟Java没有任何关系,是当今最主流的web脚本语言,主要作用是实现页面的动态化

讲到这里就顺便提一下B/S的最基本的架构图:
WEB前端-HTML-基础_第1张图片
严格来讲B/S也属于C/S的一种,只是C变成了被广泛标准化的浏览器,浏览器自带了解释器、处理方法、API等。


今天主要跟大家分享一下HTML的基础知识

HTML(Hyper Text Mark-up Language)–超文本标记语言

简言之 它是制作万维网页面的标准语言。

下面贴一张来自武sir的HTML结构树:
WEB前端-HTML-基础_第2张图片

先来贴一段HTML代码最基本的构成:


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>

body>
html>

DOCTYPE

相当于linux脚本前的#!/bin/bash, DOCTYPE用来告诉浏览器使用什么规范来解释代码。
常用的有HTML 、 XHTML

有和无的区别:

1、BackCompat:标准兼容模式未开启(或叫混杂模式[Quirks mode])
2、CSS1Compat:标准兼容模式已开启(或叫严格模式[Standards mode])

这个属性会被浏览器识别并使用,compatMode默认是BackCompat,。
如果没有,浏览器按照自己的方式解析渲染页面,在不同的浏览器就会显示不同的样式。
如果添加了,那么各个厂商的浏览器就会按照W3C的标准解析渲染页面,这样页面内容就不会因为浏览器不同而出现素材渲染不同的情况。

lang

设置页面的语言属性,这里设置了lang=en,这样谷歌在加载页面时就会提示是否翻译,这是html5的写法

charset

设置html文件使用的字符集

< html> < html/>(标签)

由“一套尖括号+标签名”组成
html:超文本标记语言,类似于xml、xhtml,是通过一个个成对的标签来进行配对,实现属性的配置,并将标签里的属性作用于被标记的内容上。

一个完整的html一般分为三部分:
< html> content < html/>:项目标签,一个html里包含首尾,范围最大的一个标签,其中标记着整个头部标签、内容标签
< head>content < head/>: 头部标签,用于页面布局
< body>content < body/>: 内容标签,页面的大部分内容都在此处编写

标签根据闭合形势分为:
1、 自闭和标签
例如 < br /> 只有一套加括号,标签不成对出现;
2、 非自闭和标签
例如 < p> content < p/> 由两套尖括号组成,标签成对出现;
根据标签属性作用域的不同又可以分为:
1、块级标签
例如< div> content< div/> 作用域为中间内容所占的整行;
2、内联标签
例如< span> content< span/>作用域为中间内容本身所占的位置;
PS:具体实例可见最后符的代码,用不同颜色来区分。块级和内联的区分只是最基本的,到了后面,可以通过其他属性来相互实现

注释

html的代码注释方式,其实是一个特殊的自闭和标签:
完整的形势为
<meta charset="UTF-8"> <meta http-equiv="Refresh" Content="30; Url=https://www.baidu.com"/> <meta http-equiv="x-ua-compatible" content="IE=edge"/> <title>mydometitle> <link rel="shortcut icon" href="http://image.so.com/v?q=%E6%B5%B7%E8%B4%BC%E7%8E%8B%E5%A4%B4%E5%83%8F&src=srp&fromurl=http%3A%2F%2Fwww.3761.com%2Fyule%2Fhtml%2F171109.html#q=%E6%B5%B7%E8%B4%BC%E7%8E%8B%E5%A4%B4%E5%83%8F&src=srp&fromurl=http%3A%2F%2Fwww.3761.com%2Fyule%2Fhtml%2F171109.html&lightboxindex=5&id=1df6633303e906af8df32c6fa44078ed&multiple=0&itemindex=0&dataindex=20"/> head> <body> <div style="background-color:red">块级div> <span style="background-color:greenyellow">内联span> <左尖括号   空格 >右尖括号 <p>雀巢咖啡<br />巧克力p> <p>蜂蜜柚子茶p> <h1>脉动h1> <h2>尖叫h2> <h3>可乐h3> <h4>雪碧h4> <h5>醒目h5> <h6>芬达h6> <h6 style="font-size:45">康师傅h6> <a href="http://www.baidu.com">百度本页跳转a> <a href="http://www.baidu.com" target="_blank">百度分页跳转a> <a href="#i1">第一章a> <a href="#i1">第二章a> <a href="#i1">第三章a> <div id="i1" style="height: 500px";>第一章内容div> <div id="i2" style="height: 500px";>第二章内容div> <div id="i3" style="height: 500px";>第三章内容div> body> html>

你可能感兴趣的:(Web-Dev相关,WEB三把刀使用介绍)