HTML CSS JavaScript(2111)

Study Think Practice

已于 2022-04-26 10:44:55 修改

阅读量617

点赞数

于 2022-01-11 20:24:22 首次发布

本文链接：https://blog.csdn.net/m0_53636192/article/details/122440414

版权

本文详细介绍了HTML超文本标记语言、CSS层叠样式表和JavaScript的基础知识，包括HTML的结构、常用标签，CSS的选择器、盒子模型，以及JavaScript的基本语法、数据类型和函数。此外，还提及了表单标签、音频视频的添加、DOM操作及BOM对象。通过学习，读者可以掌握前端开发的基础技能。

摘要由CSDN通过智能技术生成

文章目录

2022.01.05 第二阶段 day 07

HTML超文本标记语言,实现页面展现，形成静态网页

CSS层叠样式表实现页面美化

JS javascript脚本语言实现页面前端和后端的数据交互，形成动态网页

React facebook出品前端、移动端JavaScript框架

Angular google 出品基于TypeScript的开源 Web 应用框架

Vue 国人出品，阿里收购构建用户界面的渐进式框架，自底向上开发

NodeJS 基于 Chrome V8 引擎的 JavaScript 运行环境

HTML超文本标记语言

<>

html5兼容性好

制作网页的最基础语言,有独特语法,由大量标记描述的一门语言

后缀: .html .htm

结构

文档声明:声明文档类型

头部:描述网页属性标题编码被网页优先加载。

体部:要展示的数据

<!doctype html>
<html>
  <head>
      <meta charset="UTF-8"/>
      <title></title>
  </head>
  <body>
      hello html
	  hello html<br></br>
	  hello html
  </body>
</html>

html不区分大小写,语法相对java不太严谨 <br/>换行

HTML标签

HTML是一门标记语言，成对出现,标签分为开始标签和结束标签

如果开始和结束中间没有内容，可以合并成一个自闭标签

HTML属性

如果有多个属性，要以空格隔开。属性的值要用单引号或者双引号引起来。

HTML注释

如何在网页中做空格和换行

换行：<br/>

空格：在HTML中，多个空格会被当成一个空格来显示。用&nbsp

常用标签

标题标签h1_h6(大小,字体加粗且自动换行)

列表标签

ul+li无序列表unorderlist+list (type 定义列表符号,默认是 disc 小圆点

)

ol+li有序列表orderlist+list

    <ul>
		<li>111</li>
		<li>111</li>
		<li>111</li>
	</ul>
	<ol>
		<li>111</li>
		<li>111</li>
		<li>111</li>
	</ol>

图片标签

img向网页中引入图片 border:边框 width:图片宽度 ,单位是px height:图片高度

src属性用来指定图片位置和路径(如果图片和网页文件在同级文件夹可直接写图片名称)

<img src="1.jpg" border="10px" width="50%" height="30%">

超链接标签

href属性用来让超链接可以被点击,也可指定点击的跳转网址 不跳转只用一个#表示

target属性用来指定超链接的打开方式,默认是_self当前窗口打开_blank是用新窗口打开

<a href="https://www.baidu.com/" target="_blank">百度一下</a><br/>

锚定:从一个位置回到指定的另一位置

   <a name="top">顶部</a>
		<h1>11111111111</h1>
		......
		<h1>11111111111</h1>
   <a href="#top">回到顶部</a>

Input标签

input标签,表示输入框

提交按钮submit:把用户在游览器的数据,提交给java程序来处理

<body>
		普通文本框:<input type="text" /><br />
		密码:<input type="password" /><br />
		数字:<input type="number" /><br />
		日期:<input type="date" /><br />
		星期:<input type="week" /><br />
		单选框:<input type="radio" />男<br />
		复选框:<input type="checkbox" />吃饭 <input type="checkbox" />遛弯 <br />
    	邮箱:<input type="email" /><br/>
		按钮<input type="button" value="点一下" /><br />
		<button>注册</button><br />
		提交<input type="submit" value="提交" /><br />
</body>

表格标签

<table></table>

表格的行用<tr></tr>表格的列用<td></td>

border:表格的边框 cellspacing:单元格的间距 bgcolor:背景颜色 width:宽度 align:位置

<body>
		<table border="1px" cellspacing="0" bgcolor="bisque" width="500px" align="center">
			<tr>
				<td>11</td> <td>12</td> <td>13</td>
			</tr>
			<tr>
                <td>21</td> <td>22</td> <td>23</td>
			</tr>
			<tr>
                <td>31</td> <td>32</td> <td>33</td>
			</tr>	
		</table>
</body>

表头不用td用th

合并单元格合并行rowspan 把N行合并成一大行合并列colspan 把N列合并成一大列

行合并rowspan 列合并colspan都在<td>标签操作

<table bgcolor="pink" width="500px" border="1px" cellspacing="0">
			<tr>
				<td colspan="2">11</td>
				<td>13</td>
			</tr>
			<tr>
				<td>21</td>
				<td>22</td>
				<td rowspan="2">23</td>
			</tr>
			<tr>
				<td>31</td>
				<td>32</td>
			</tr>
		</table>


	<body>
		<table border="1px" bgcolor="antiquewhite" width="500px">
			<tr>
				<th>总页面流量</th> <th>共计来访</th> <th>会员</th> <th>游客</th>
			</tr>
			<tr>
				<td>11111111</td> <td>111111</td> <td>11111</td> <td>11111</td>
			</tr>
			<tr>
				<td>11111111</td> <td>111111</td> <td>11111</td> <td>11111</td>
			</tr>
			<tr>
				<td>111111111</td> <td>111111</td> <td>11111</td> <td>11111