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 case when then end根据某列数据内容在新列显示自定义内容

    ') then '实习' ' ) then '赤脚医生' ' ) then '村卫生员' ' ) then '乡卫生员' ' ) then '镇卫生员' ' ) then '医师' ' ) then ...

  2. Unity组件

    在学习C++的时候,对于面对对象有点了解.然后也使用过一段时间的Unity,用起来还是觉得,怎么这么好用.耦合性极低.当时不知道这是基于组件编程.所以现在来学习下基于组件的知识,并比较下基于组件和基于 ...

  3. C语言抽象数据类型ADT

    根据编程的问题匹配合适的数据类型.数据项连接构成了链表,定义了一个结构代表单独的项.设计了一些方法把一系列结构构成一个链表.本质上,我们使用C语言的功能设计了一种符合程序要求的新的数据类型.但是上述的 ...

  4. SQL-Error-1

    错误描述:String   or   binary   data   would   be   truncated. 原因:字段长度不够

  5. Educational Codeforces Round 7 A

    Description Consider the infinite sequence of integers: 1, 1, 2, 1, 2, 3, 1, 2, 3, 4, 1, 2, 3, 4, 5. ...

  6. 微信小程序多图上传/朋友圈传图效果【附完整源码】

    效果图 部分源代码 js文件: var uploadPicture = require('../Frameworks/common.js') //获取应用实例 const app = getApp() ...

  7. 技巧：开启ubuntu系统桌面上的右键进入terminal命令行控制台功能

    $ sudo apt-get install nautilus-open-terminal 执行上述命令,重启. 重启命令: $ sudo reboot 注意:需要联网

  8. 笔记_简明Python教程_Byte_of_Python

    1. 局部变量.全局变量 局部变量: x = 50 def func(x): x = 2 print('Change local x to',x) func(x) print('x is still' ...

  9. 2.3 Rust函数

    2.3 函数 [root@itoracle src]# cargo new functions Created binary (application) `functions` package [ro ...

  10. my17_Mysql 主从切换

    注意事项: 从库提升为主库read_only要设置为OFF原主库改为从库后,read_only要设置ONread_only=ON并不能对root生效,确保root不会进行数据写入从主库进行 flush ...