HTML-JS-CSS基础

1、html

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  5.     <title>this is title！</title>
  6.     <!-- 引用样式表文件 -->
  7.     <link rel="stylesheet" type="text/css" href="../css/mycss.css">
  8.     <!-- 引用java脚本文件 --->
  9.     <script type="application/javascript" src="../js/myjs.js"></script>
  11.   </head>
  12.   <body>
  13.     hello world !
  14.   </body>
  15. </html>

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

  • inline

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

  • block

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

1.1 html常见元素

  • body

  • table

    1. <table border="0px solid blue"
    2.   	cellpadding="0px"
    3. 	cellspacing="0px"
    4. 	style="border-collapse: collapse">
    5.   <tr>
    6.     <td style="border:1px solid blue"></td>
    7.   </tr>
    8. </table>

  • img

    1. <img src="1.jpg">

  • a

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

  • h1~h6

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

  • div

    1. <div>
    2. </div>

  • form

    1. <form action="/a/b" method="post">
    2. </form>

  • p

    1. <p>
    2. </p>

  • ul

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

    1. <ul>
    2.   <li>1</li>
    3.   <li>1</li>
    4.   <li>1</li>
    5.   <li>1</li>
    6. </ul>

    ​

  • ol

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

    1. <ol>
    2.   <li>1</li>
    3.   <li>1</li>
    4.   <li>1</li>
    5.   <li>1</li>
    6. </ol>

    ​

2、CSS

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

2.1 使用方式

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

  1. style属性

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

  2. style头信息

    1. <html>
    2.   <head>
    3.     <style type="text/css">
    4.       p{
    5. 		border:1px solid blue ;
    6.       }
    7.     </style>
    8.   </head>
    9.   <body>
    10.     <p>
    11.       这是段落标记！
    12.     </p>
    13.   </body>
    14. </html>

  3. style文件

    [mycss.css]

    1. p {
    2.   font-family: "宋体";
    3.   font-size: large;
    4.   border: 1px solid red;
    5.   width: 50%;
    6.   padding: 5px;
    7.   text-align: center;
    8. }
    10. #div1 {
    11.   border-width: 2px 	;
    12.   border-style: solid 	;
    13.   border-color: blue 	;
    14.   width: 300px			;
    15.   padding: 5px			;
    16.   margin-top: 50px		;
    17.   margin-bottom: 20px	;
    18. }

    [1.html]

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

3、JavaScript

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

  1. document.getElementById("div1").style.width = "100%";
  2. document.getElementById("div1").style['width'] = "100%";
  3. document.getElementsByTagName("button")[0].attributes[0].name;
  4. 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. 神奇的操作--O(1)快速乘

    从同机房大佬那里听来的... 用O(1)时间求出两个相乘超过long long的数的取摸的结果 神奇的操作... inline long long multi(long long x,long lon ...

  2. SQL server 2008 r2 安装图文详解

    文末有官网下载地址.百度网盘下载地址和产品序列号以及密钥,中间需要用到密钥和序列号的可以到文末找选择网盘下载的下载解压后是镜像文件,还需要解压一次直接右键点击解如图所示选项,官网下载安装包的可以跳过前 ...

  3. centos7-网络与防火墙常用命令

    1.网络配置 vi /etc/sysconfig/network-scripts/ifcfg-ens33 BOOTPROTO="static" IPADDR=192.168.163 ...

  4. 修改jupyter notebook的默认浏览器

    1.打开命令行 2.输入jupyter notebook --generate-config 3.显示出jupyter_notebook_config.py 文件所在的目录.按文件目录找到这个文件. ...

  5. 记录CentOS7.X版本下安装MySQL5.7数据库

    记录CentOS7.X版本下安装MySQL5.7数据库  设置rpm下载目录在/opt目录下新建一个目录存放mysql cd /opt sudo mkdir mysql12  下载MySQL的源 wg ...

  6. 五种I/O模型的学习

    来自   http://www.52im.net/thread-1935-1-1.html 4.互联网服务端处理网络请求的原理 首先看看一个典型互联网服务端处理网络请求的典型过程:<ignore ...

  7. CTeX里面CTRL-Space和中文输入法的冲突问题解决

    我使用的是windows xp,相信下面的方法也能应用到win7等windows系统上. 我希望在CTex套件的WinEdt 6.0里使用模板自动插入内容时,想快速从上到下遍历” * “并修改. 通过 ...

  8. Redis Intro - Dict

    https://segmentfault.com/a/1190000004850844

  9. [转]JS跨域总结

    本文转自:http://www.cnblogs.com/qixuejia/archive/2012/08/29/2662220.html javascript跨域有两种情况: 1.基于同一父域的子域之 ...

  10. pat1043. Is It a Binary Search Tree (25)

    1043. Is It a Binary Search Tree (25) 时间限制 400 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN ...