Web入门

Web入门笔记

HTML

HTML: Hyper Text Markup Language-超文本标记语言

HTML元素

<p class="editor-note">Hello HTML</p>

元素由 开始标签, 内容, 结束标签 组成
元素可以有属性, 属性包含了元素的额外信息且不显示在内容中.

常见元素

图像

<img src="images/img.png" alt="Image" />

段落

<p>这是一个段落</p>

列表

列表分为有序列表(Ordered List)<ol>
无序列表(Unordered List)<ul>
列表中项目(List Item)<li>

链接

链接用<a>(Anchor)表示
<a href="https://www.xxx.com">xxx官网</a>

CSS

CSS: Cascading Style Sheets-层叠样式表
CSS用于给HTML元素添加样式

在HTML中用link元素引入

<link href="styles/style.css" rel="stylesheet" />

规则集

li,
h1,
p{
    color: red;
    width: 500px;
}

选择器(Selector)

HTML元素的名称位于规则集的开始

声明(Declaration)

一个单独的规则, 如color: red

属性(Properties)

改变样式的方法, 如color

属性值(Properties Value)

指定声明中属性的值

div

CSS布局主要是基于Div

padding

内边距: div盒子中内容到border的空间

border

边框: div盒子中有效区域边框线条

margin

外边距: div盒子中border到最外围的空间

JavaScript

为网站添加交互功能

在HTML中用script引入
<script src="scripts/main.js" defer></script>

let myHeading = document.querySelector("h1");
myHeading.textContent = "Hello world!";