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. php版 日文半角转全角

    工作需要,写的这个 /* *转载请注明 http://www.cnblogs.com/kclteam/p/5278923.html$str //参数可以是字符串或数组*/ function HkToF ...

  2. js 点击页面出现烟花 心形

    css :1 body{width:1000px; height:500px;} input{ margin:100px; width:250px; height: 50px } 3 .Firewor ...

  3. P2596 [ZJOI2006]书架（splay）

    [题目链接] https://www.luogu.org/problemnew/show/P2596 平衡树,需支持五个操作: 1. 将某元素置顶:将元素旋到根,然后将左子树合并到该元素的后继 2. ...

  4. P3943 星空

    传送门 观察题目数据,发现 k ≤ 8 ,可能可以从这里入手解决问题 考虑状态压缩 但是我们每次操作都会让一连串的序列改变,而序列的每个状态都是必须要知道的 很麻烦,所以考虑如何把一段区间表示地简单一 ...

  5. P2264 情书

    传送门 正常会想到字典树 然鹅数据怎么小直接map也能过 然后就写map暴力匹配了 毫无思维难度,毫无代码难度 注意逗号算单词分隔符,如果有句号就算另一句 同一句的单词重复出现只计算一次贡献 再开个m ...

  6. Educational Codeforces Round 11 B

    Description Consider 2n rows of the seats in a bus. n rows of the seats on the left and n rows of th ...

  7. Django ORM 最后操作

    F查询:代表2个字段之间的比较 from django.db.models import F models.Book.objects.filter(price__gt=F('keep_price')) ...

  8. Java8 流的使用示例

    foreach遍历处理 dataList.stream().forEach(index -> sb.append(dataList.get(index) + "',")); ...

  9. asp.net AD 域验证

    1.获取环境变量 string strAuthUser = request.ServerVariables["AUTH_USER"] 以上这行代码是用来获取当前用户的登录名 2.I ...

  10. 技巧：Python中print打印信息的同时打印文件、行号

    import sys def Log(msg): print('Print Message: '+msg+' ,File: "'+__file__+'", Line '+str(s ...