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 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 使用方式

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

style属性

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

style头信息

<html><head><style type="text/css">p{border:1px solid blue ;}</style></head><body><p>这是段落标记！</p></body>
</html>

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;

转载于:https://www.cnblogs.com/xupccc/p/9670638.html

HTML-JS-CSS基础相关推荐

HTML+CSS+JS的基础知识笔记
语义化:通俗来说就是明白每个标签的用途(在什么情况下使用此标签合理) 语义化的好处:1更容易被搜索引擎收录.2. 更容易让屏幕阅读器读出网页内容. html文件基本结构: <html> ...
和前端撕出逼格，撕的硬气 - 产品应该懂的html/css基础知识
之前和前端交流页面的实现方案时,经常被告知:这个效果实现不了:那个东西兼容性不好:这个做不了...明明这些效果别人家已经实现出来了,哎,奈何不懂前端相关,没辙! 最近花了点时间看了些前端相关的博客.论 ...
HTML/CSS基础知识（四）
WEB标准和W3C的理解与认识 Web标准是一系列标准的集合. 网页主要由三部分组成:结构(Structure).表现(Presentation)和行为(Behavior). 对应的标准也分三方面:结 ...
html css基础知识
1 这是自己学习html时候做的一些记录,供大家参考 <!-- 2 块和内联3 块元素:独占一行的元素4 div p h ul5 div没有任何语义,就是一个纯粹的快元素6 就是为了方便布局7 ...
诺禾致源css客户端,诺禾，诺禾致源：CSS 基础教学
伦多星报 2020-07-06 17:14:58 Applying CSS and JavaScript to HTML 当今您将使用的几乎所有网站都将使用CSS使它们看起来很酷,并使用JavaScr ...
html js css如何关联_会html+css+js就能把前端项目发布到多个平台
在这篇文章中,小编将给大家分享如何让自己的前端代码发布到多个常用的平台. 看完这篇文章以后,你就知道了如何让你的前端代码发布到多个平台,如:安卓应用程序,小程序,iOS应用程序,Windows,Mac ...
CSS基础「六」元素的显示与隐藏
本篇文章为 CSS 基础系列笔记第六篇,参考黑马程序员pink老师前端入门教程其他CSS基础相关文章: CSS基础「一」基础选择器 / 字体属性 / 文本属性 / 三种样式表 CSS基础「二」复合 ...
CSS基础「五」定位
本篇文章为 CSS 基础系列笔记第五篇,参考黑马程序员pink老师前端入门教程其他CSS基础相关文章: CSS基础「一」基础选择器 / 字体属性 / 文本属性 / 三种样式表 CSS基础「二」复合 ...
前端面试题汇总（css基础篇）
前端面试题汇总(css基础篇) 1 css sprite是什么,有什么优缺点概念:将多个⼩图⽚拼接到⼀个图⽚中. 通过 background-position 和元素尺⼨调节需要显示的背景图案. ...
CSS基础汇总——点击标题跳转详细博客【学习笔记】
CSS 网页的美容师理想中的结果: 结构(html)与样式(css)相分离 1.引入CSS样式表(书写位置) 行内式(内联样式) : <标签名 style="属性1:属性值1; 属性 ...

HTML-JS-CSS基础

HTML-JS-CSS基础

1、html

1.1 html常见元素

2、CSS

2.1 使用方式

3、JavaScript

HTML-JS-CSS基础相关推荐

最新文章

热门文章