admin管理员组

文章数量:1794759

HTML/CSS/JavaScript笔记

HTML/CSS/JavaScript笔记

HTML/CSS/JavaScript个人学习笔记
  • 前言
  • 简介
  • HTML
      • 一些最常见的HTML标签汇总
  • CSS
      • 内联样式
      • 内部样式表

前言

学习用途所做的个人笔记，部分资料图片来自： 菜鸟教程.，如有侵权或标注遗漏请随时告知 ：）

简介

HTML：超文本标记语言，是一种描述性语言。 CSS：层叠样式表，是一种用来表现HTML、XML等文件样式的语言，如字体、颜色、位置等等。 JavaScript：多用于前端网页开发的脚本编程语言，是一门解释型的，弱类型的语言。虽然名字里带个 Java，但实际上和Java本身没什么关系。

HTML

HTML主体结构如下 ：

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>题目</title> </head> <body> <h1>标题</h1> <p>段落。</p> </body> </html>

此处用菜鸟教程中的一张图片来说明：

  • <meta>元素可提供有关页面的元信,要写在头元素内。charset="utf-8" 定义网页编码格式为 utf-8，否则可能会有中文乱码的现象；
  • <h> 元素定义一个大标题,<p>元素定义一个段落
  • 定义<h1>、<h2>，可以指定一级、二级标题。
  • 常用单位如下： px --像素（pixel） em–相对长度单位 pt --点（point）

    • 接下来看一行HTML代码：

    <p>我的第一个段落</p>

    这一行代码就是一个HTML元素，由开始标签：<p>、元素内容：我的第一个段落、结束标签：我的</p> 组成。

    再看这一行代码：

    <a href="www.baidu"> 这是一个链接 </a>

    标签<a>定义超链接或锚点，属性href用于指定超链接目标的 URL。 这里涉及到了一个新的概念，即HTML属性。属性用于设置HTML元素的各种附加信，一般描述于开始标签的内部。 下面列出了适用于大多数HTML元素的属性：

    属性描述
    class为html元素定义一个或多个类名，方便按类别定义样式
    id定义元素的唯一id
    style规定元素的行内样式（inline style）
    title描述了元素的额外信 (作为工具条使用)
    一些最常见的HTML标签汇总 标签描述
    a超链接或锚
    b粗体
    br换行
    center居中（文本）
    h1~h6标题（一到六级）
    hr水平尺
    href超文本引用（贴链接）
    i斜体（文本）
    src源文件链接
    strong加重（文本）
    sub下标（文本）
    sup上标（文本）
    code源代码（文本）
    CSS

    CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明: 选择器通常是您需要改变样式的HTML元素。 每条声明由一个属性和一个值组成。 属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。

    CSS 可以通过以下三种方式添加到HTML中: 内联样式：在HTML元素中使用"style" 属性 内部样式表：在HTML文档头部 <head> 区域使用<style> 元素来包含CSS 外部引用 ：使用外部 CSS 文件

    当样式定义重复时，优先级为：内联样式 > 内部样式 >外部样式> 浏览器默认样式

    我们主要讨论前两种方式，也即直接在HTML文件中进行CSS样式的编程。

    内联样式 <p style="color:blue;margin-left:20px;">这是一个段落。</p>

    用style属性来描述元素p中的各种样式，以下列举一些常用的样式属性：

    属性描述
    border设置对象的边框属性（复合属性）
    border-right-color设置或检索对象的右边边框颜色
    background设置对象的背景特性（复合属性）
    outline设置或检索对象外的线条轮廓（复合属性）
    padding设置对象的内边距属性（复合属性）
    margin设置对象的外边距属性（复合属性）
    width设置宽度
    height设置高度
    color设置文本的颜色
    text-align设置文本的对齐方式
    line-height设置行高
    font字体属性（复合属性）
    z-index设置元素的堆叠顺序
    overflow规定当内容溢出元素框时发生的事情
    内部样式表 <head> <style type="text/css"> body {background-color:yellow;} p {color:blue;} </style> </head>

    在头部通过<style>标签进行全局样式表的定义。可以通过标签、ID、类名等来选择指定的元素。 例：

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob)</title> <style> .red { color:red; } h3.green { color:green; } p { color:blue; } #hello4 { color:yellow; } </style> </head> <body> <h1 id="hello1" class="red">红色一级标题</h1> <h2 id="hello2" class="red">红色二级标题</h1> <h3 id="hello3" class="green">绿色三级标题</h1> <h4 id="hello4" class="green">黄色四级标题</h1> <p id="hello5" class="none">蓝色段落。</p> </body> </html>

    结果如下：

  • 以id为选择器时，前缀加上#；
  • 以class属性为选择器时，前缀加上.，或是以标签名.属性名的方式选择；

    • 不定期更新~

    本文标签： 笔记htmlcssJavaScript

    版权声明：本文标题：HTMLCSSJavaScript笔记 内容由林淑君副主任自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.xiehuijuan.com/baike/1686969102a123641.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。