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. npm install 安装包报错

    D:\hapi_learn>npm .x.x npm ERR! code ENOSELF npm ERR! Refusing to install package with name " ...

  2. codeforces 620D Professor GukiZ and Two Arrays

    #include <bits/stdc++.h> using namespace std; + ; const long long inf = 1e18; int n, m; long l ...

  3. 07-图5 Saving James Bond - Hard Version （30 分）

    This time let us consider the situation in the movie "Live and Let Die" in which James Bon ...

  4. echarts分段（一段一种颜色）显示

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. day_09 函数及参数

    1.定义:把功能封装起来,方便下次直接调用 2.语法:def 关键词开头,空格之后接函数名称和圆括号(). def 函数名(形参) 函数体 3.参数:圆括号用来接收参数.若传入多个参数,参数之间用逗号 ...

  6. python 文件与异常

    ####文件### r: -只能读 不能写 -读取文件不存在,是会报错 r+: - 可以执行读写操作; - 文件不存在, 报错: w: -只能写,不能读 -会清空文件内容 -文件不存在,会新建文件 w ...

  7. daterangepicker-双日历

    js脚本和css样式,到bootstrap官网去下载 <!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml&qu ...

  8. hive表多种存储格式的文件大小差异，无重复数据

    -- 重点,目标表无重复数据 -- dbName.num_result 无重复记录 -- 插入数据 CREATE TABLE dbName.test_textfile( `key` string, ` ...

  9. ajax 工作原理以及其优缺点

    1.什么是AJAX?AJAX全称为“Asynchronous JavaScript and XML”(异步JavaScript和XML),是一种创建交互式网页应用的网页开发技术.它使用:使用XHTML ...

  10. java——如何通过class调用该类的方法并获得返回值？（反射）

    demo: public class T{ public static void main(String[] args) throws Exception{ //获得Person的Class对象 Cl ...