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. sql 日期对比

    来自这里

  2. Python自动化开发学习20-Django的form组件

    武沛齐老师的Django的FORM组件:http://www.cnblogs.com/wupeiqi/articles/6144178.html 转自:http://blog.51cto.com/st ...

  3. my.宝石 --- --- ZC 收集

    1.         DT PT 头盔 太阳石 物理伤害+8     √     月亮石 物理防御+12     √ 武器 太阳石 物理伤害+8   √     舍利子 法术伤害+6         ...

  4. 转载 Some indexes or index [sub]partitions of table VAS.TAB_PUB_CALLLOG have been marked unusable

    http://www.xifenfei.com/2011/12/some-indexes-or-index-subpartitions-of-table-vas-tab_pub_calllog-hav ...

  5. Approximate timing for various operations on a typical PC

    execute typical instruction 1/1,000,000,000 sec = 1 nanosec fetch from L1 cache memory 0.5 nanosec b ...

  6. Not so Mobile UVA - 839

    题目链接:https://vjudge.net/problem/UVA-839 题目大意:输入一个树状天平,根据力矩相等原则,判断是否平衡.  如上图所示,所谓力矩相等,就是Wl*Dl=Wr*Dr.  ...

  7. [转]Loading, Editing, and Saving a Text File in HTML5 Using Javascript

    本文转自:http://thiscouldbebetter.wordpress.com/2012/12/18/loading-editing-and-saving-a-text-file-in-htm ...

  8. MATLAB特殊矩阵以及矩阵转置

    特殊矩阵 通用特殊矩阵 zeros函数:产生全0矩阵,即零矩阵. ones函数:产生....1矩阵,即幺矩阵. eye函数:产生对角线为1的矩阵,当矩阵是方正时,得到单位矩阵. rand函数:产生(0 ...

  9. 位于XDB的服务器localhost要求用户名和密码，端口占用

    问题现象: 从MyEclipse启动部署在tomcat上的web程序后,出现如下问题: 然后访问tomcat主页(http://localhost:8080/),弹出如下对话框: 问题原因: 机器上安 ...

  10. 初步学习XML的基本代码

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...