前端学习笔记第二篇
关于基础概念
html、css、javascript
HTML 指的是超文本标记语言,标记语言是一套标记标签
标记标签有属性,比如颜色,链接,名称,id,动作等等都是一个标签对象的属性,这个属性还有值,值可能是文本也可能是javascript函数
以下有几个例子
<a href="http://www.w3school.com.cn">This is a link</a> //herf 是属性
<body bgcolor="yellow"> // bgcolor是属性
<h2 style="background-color:red">This is a heading</h2> //style是属性,但这里的值比较特殊,因为style是高层次的样式属性,所以它也有很多子类别,比如background-color:red,以及下方的font-family:verdana
<h1 style="font-family:verdana">A heading</h1>
html学习链接:https://www.w3school.com.cn/html/html_id.asp
为什么有css
个人理解,因为有了Html超文本语言,可以用来标记各种对象,但是这些对象需要静态"装修"样式,为了把这套style样式抽出来解耦合
出来就是css,再后面我们继续还会看到当需要一些动态的动作(事件)需要用到javascript
javascript
<html>
<body>
<h1>我的第一段 JavaScript</h1>
<p>JavaScript 可以更改 HTML 元素的内容:</p>
<button type="button" onclick="myFunction()">点击我!</button>
<p id="demo">这是一个演示。</p>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Hello JavaScript!";
}
</script>
</body>
</html>
//在这段里面,我们看到button 的onclike属性关联了一个script函数,而MyFunction函数反过来取id为 demo的标签来进行修改
html事件参考手册
https://www.w3school.com.cn/tags/html_ref_eventattributes.asp
html的块
HTML <div> 元素
HTML <div> 元素是块级元素,它是可用于组合其他 HTML 元素的容器。
<div> 元素没有特定的含义。除此之外,由于它属于块级元素,浏览器会在其前后显示折行。
如果与 CSS 一同使用,<div> 元素可用于对大的内容块设置样式属性。
<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。
https://www.w3school.com.cn/html/html_blocks.asp
html类和ID
对 HTML 进行分类(设置类),使我们能够为元素的类定义 CSS 样式。
为相同的类设置相同的样式,或者为不同的类设置不同的样式。
Class 与 ID 的差异
同一个类名可以由多个 HTML 元素使用,而一个 id 名称只能由页面中的一个 HTML 元素使用:
class 好像更多用于style(待确定),同时也可以用id
CSS 和 JavaScript 可使用 id 属性来选取元素或设置特定元素的样式
html的布局
https://www.w3school.com.cn/html/html_layout.asp
https://www.w3school.com.cn/xhtml/xhtml_structural_02.asp
XHTML 结构化之二:案例分析:W3school 的结构化标记