HTML-JS-CSS基础

1、html

hyper text markup language，超文本标记语言，所见即所得。web开发中用于展示功能的部分，浏览器可对其进行渲染。产生各种可视化组件，比如表格、图片、按钮等。

<!DOCTYPE html>

<html lang="en">

  <head>

    <title>this is title！</title>

    <!-- 引用样式表文件 -->

    <link rel="stylesheet" type="text/css" href="../css/mycss.css">

    <!-- 引用java脚本文件 --->

    <script type="application/javascript" src="../js/myjs.js"></script>

  </head>

  <body>

    hello world !

  </body>

</html>

html的元素分为inline和block两种类型：

  • inline

    行内元素，和其他元素在同一行，比如a、img等。

  • block

    块元素，自己独立占用一行，比如div、p等。

1.1 html常见元素

  • body

  • table

    <table border="0px solid blue"
    
  	cellpadding="0px"
    
	cellspacing="0px"
    
	style="border-collapse: collapse">
    
  <tr>
    
    <td style="border:1px solid blue"></td>
    
  </tr>
    
</table>

  • img

    <img src="1.jpg">

  • a

    <a href="http://www.baidu.com">百度</a>

  • h1~h6

    <h1>1号标题</h1>
    
<h6>6号标题</h6>

  • div

    <div>
    
</div>

  • form

    <form action="/a/b" method="post">
    
</form>

  • p

    <p>
    
</p>

  • ul

    无序列表，前面默认使用黑色圆点作为标记。

    <ul>
    
  <li>1</li>
    
  <li>1</li>
    
  <li>1</li>
    
  <li>1</li>
    
</ul>

    ​

  • ol

    有序列表，使用连续的数字作为标记。

    <ol>
    
  <li>1</li>
    
  <li>1</li>
    
  <li>1</li>
    
  <li>1</li>
    
</ol>

    ​

2、CSS

cascade style sheet，层叠样式表，是修饰元素的属性，控制外观。

2.1 使用方式

样式表的使用方式分为三种，依次为属性、头和外部文件。作用结果遵守就近原则，即最近的样式覆盖较远的样式。

  1. style属性

    <div style="border:1px solid blue">
    
</div>

  2. style头信息

    <html>
    
  <head>
    
    <style type="text/css">
    
      p{
    
		border:1px solid blue ;
    
      }
    
    </style>
    
  </head>
    
  <body>
    
    <p>
    
      这是段落标记！
    
    </p>
    
  </body>
    
</html>

  3. style文件

    [mycss.css]

    p {
    
  font-family: "宋体";
    
  font-size: large;
    
  border: 1px solid red;
    
  width: 50%;
    
  padding: 5px;
    
  text-align: center;
    
}

#div1 {
    
  border-width: 2px 	;
    
  border-style: solid 	;
    
  border-color: blue 	;
    
  width: 300px			;
    
  padding: 5px			;
    
  margin-top: 50px		;
    
  margin-bottom: 20px	;
    
}

    [1.html]

    <head>
    
  <!-- 连接外部样式文件 -->
    
  <link rel="stylesheet" type="text/css" href="../css/mycss.css">
    
</head>

3、JavaScript

java脚本语言可以用来操纵页面上的元素，动态修改属性、添加删除元素等操作。都是围绕文档进行的操作。

document.getElementById("div1").style.width = "100%";

document.getElementById("div1").style['width'] = "100%";

document.getElementsByTagName("button")[0].attributes[0].name;

document.getElementsByTagName("button")[0].attributes[0].value;

HTML-JS-CSS基础的更多相关文章

  1. css+js+html基础知识总结

    css+js+html基础知识总结 一.CSS相关 1.css的盒子模型:IE盒子模型.标准W3C盒子模型: 2.CSS优先级机制: 选择器的优先权:!important>style(内联样式) ...

  2. 日常用的css基础和自己常用的js封装

    css基础:base /* * 初始化 */ *::after, *::before { box-sizing: border-box; } body { font-family: 'Microsof ...

  3. 妙味课堂——HTML+CSS基础笔记

    妙味课堂的课程讲得非常的清楚,受益匪浅.先把HTML和CSS基础课程部分视频的学习笔记记录如下: padding #PS基础 ##前端需要的PS技能 - PS技能(前端需要):切图.修图.测量 - P ...

  4. css基础总结一

    最近在弄一个简单管理系统的前端,所以打算将做项目的一些个人感想以及总结简单罗列下,当然,主要针对前端的基础部分以及一些常用的前端个人简单技巧总结.主要分为js部分和css部分,下面是css的基础部分总 ...

  5. JS&CSS文件请求合并及压缩处理研究（五）

    接上篇.在我们最终调用 @Html.RenderResFile(ResourceType.Script) 或者 @Html.RenderResFile(ResourceType.StyleSheet) ...

  6. ASP.NET MVC 4使用Bundle的打包压缩JS/CSS

    打包(Bundling)及压缩(Minification)指的是将多个js文件或css文件打包成单一文件并压缩的做法,如此可减少浏览器需下载多个文件案才能完成网页显示的延迟感,同时通过移除JS/CSS ...

  7. 开始编写寄几的 CSS 基础库

    前言 在现在的互联网业务中,前端开发人员往往需要支持比较多的项目数量.很多公司只有 1-2 名前端开发人员,这其中还不乏规模比较大的公司.这时前端同学就需要独挡一面支持整个公司上下的前端业务,项目如流 ...

  8. 从零开始学习前端开发 — 2、CSS基础

    一.CSS简介  1.CSS是什么 CSS是Cascading Style Sheets的简称,中文称为层叠样式表.特点:实现了表现与结构相分离 2.css基础语法 css是由选择符和声明两大部分组成 ...

  9. CSS基础知识01

    一.CSS基础知识介绍 1.css是cascading style sheet层叠式样式表的简写 2.css小用法 加粗:font-weight:bold;             正常用:norma ...

  10. CSS基础入门

    css基础语法 一.CSS格式 选择器{ 属性名:属性值; 属性名:属性值; } 选择器负责圈定范围,要修改的元素集合,花括号内的声明由属性名和属性值组成(key:value)的形式,用于设定具体样式 ...

随机推荐

  1. POJ 3659 Cell Phone Network 最小支配集模板题（树形dp）

    题意:有以个 有 N 个节点的树形地图,问在这些顶点上最少建多少个电话杆,可以使得所有顶点被覆盖到,一个节点如果建立了电话杆,那么和它直接相连的顶点也会被覆盖到. 分析:用最少的点覆盖所有的点,即为求 ...

  2. Linux系统lvm管理

    pv:   物理卷,被pv命令处理过的物理分区vg:物理卷组        被组装到一起的物理卷pe: 物理扩展        lvm设备的最小存储单元    lvm是pe的整数倍lvm:逻辑卷    ...

  3. IOS开发-基于WebDriverAgent代理服务，实现iOS手机app自动化测试的框架搭建

    导引 iOS自动化测试一直使用的appium,iOS系统升级至10.0 Xcode8.0之后,改用WebDriverAgent代理服务作为server,编写了一套基于WebDriverAgent服务 ...

  4. 阿里云 Ubuntu16.04 部署 LAMP

    1.更新软件源 sudo apt-get update 2.安装Apache sudo apt-get install apache2 3.查看Apache是否安装成功 apache2 –v 如下所示 ...

  5. Lonsdor K518ISE Key Programmer Review

    Lonsdor K518ISE key programmer is the latest version of Lonsdor, with wider vehicle coverage in key ...

  6. java——io、字节流缓冲区拷贝文件、字节缓冲流

    使用try catch finally关闭文件流: 写入文件: import java.io.*; public class exp{ public static void main(String[] ...

  7. vscode写vue模板--代码片段

    Ctrl+Shift+P打开命令输入 snippet (打开用户代码片段) 在输入vue(选择代码片段的语言) 如果搜索不到,安装一个插件 vueHelper 如果搜索到复制粘贴以下代码 { &quo ...

  8. 常见的几种web攻击方式

    一.Dos攻击(Denial of Service attack) 是一种针对服务器的能够让服务器呈现静止状态的攻击方式.有时候也加服务停止攻击或拒绝服务攻击.其原理就是发送大量的合法请求到服务器,服 ...

  9. c++11 move构造函数和move operator 函数 学习

    先看个代码吧!!!!!!!!!! #include <iostream> using namespace std; class A { public: A(){cout<<&q ...

  10. 数据结构---Java---LinkedList

    public class LinkedList<E> extends AbstractSequentialList<E> implements List<E>, D ...