HTML CSS JavaScript(2111)

本文详细介绍了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

常用标签
标题标签h1h6(大小,字体加粗且自动换行)
列表标签

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
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值