html、js基本命令认识

最新推荐文章于 2024-09-10 14:35:29 发布

2301_82218779

最新推荐文章于 2024-09-10 14:35:29 发布

阅读量353

点赞数 4

文章标签： html javascript

本文链接：https://blog.csdn.net/2301_82218779/article/details/140513934

版权

一、html（超文本标记语言）

1、基本骨架

<!DOCYPE html>	#文本类型
<html>
	<head>
		<meta charset="utf-8" > #字符集utf-8
		<title></title>	#网页导航栏
	</head>
	
	<body> #内容在body中填写
	</body>
</html>

2、h 标签

<h1>我是h1标签</h1>   标题

3、p标签（paragraph（段落））

<p>段落</p>

4、img标签（image）插入图片

<img src="3.png" alt="实例" width="220px" title="测试" border="10" >

src: 图片相对路径或绝对路径
alt: 图片加载不出来时候的替换文本
width: 设置图片的宽度
height: 设置图片的高度

5、跳转

<a>href="http://www.baidu.com" target="_blank">百度</a> 
#添加一个超级链接，跳转
<a>href="1.html" target="_blank" title="悬停文本">百度</a> 
target：作用是是否在新的标签页打开链接，值一定是“_blank"
title：作用是鼠标移上文字之后的悬停文本

6、列表

<body>
	<h2>古典四大名著</h2>
	<ul>
		<li>三国演义</li> #列表项
		<li>水浒传</li>
		<li>红楼梦</li>
		<li>水浒传</li>
	</ul>
</body>

ul：英文unordered list（无序列表）
li：英文list item（列表项）
ol：英文ordered list（有序列表）
li：英文list item（列表项）
dl英文：definition list 表示创建一个自定义列表结构
dt英文：definition term定义主题或者定义术语，表示一个列表的主题
dd英文：definition description 定义解释项，表示解释和说明前面的主题内容
dl内部只能存放dt和dd，dt和dd是同级关系

7、表格

able英文：table，作用是定义了一个表格的结构
tr英文是table rows作用定义了表格的行
td英文是table dock作用是定义表格的单元格
关系：table里面嵌套tr，tr里面嵌套td，即table>tr>td

<body>
	table border="1" style="border-collapse: collapse;">
	  <tr>
		<td>第一行第1列</td>
		<td>第一行第2列</td>
		<td>第一行第3列</td>
		<td>第一行第4列</td>
	</tr>
	<tr>
		<td>第二行第1列</td>
		<td>第二行第2列</td>
		<td>第二行第3列</td>
		<td>第二行第4列</td>
	</tr>
	<tr>
		<td>第三行第1列</td>
		<td>第三行第2列</td>
		<td>第三行第3列</td>
		<td>第三行第4列</td>
	  </tr>
	</table>
</body>

单元格合并
rowspan：上下跨行合并
colspan：左右跨列合并
属性值是数字，数字是几就代表跨几行或者跨几列

表格分区
caption：定义表格的主题
thead：定义表格的头部，内部嵌套tr>th
tbody:定义表格主题，内部嵌套tr>td

<table border="1">
	<caption>各地区固定资产投资情况</caption>
	<tr>
		<td rowspan="2">地区</td>
		<td colspan="2">按总量分</td>
		<td colspan="2">按比重分</td>
	</tr>
</table>

8、表单

form标签

method：方法，指的是数据提交的方法，属性值是post和get
action：是数据提交的位置

input标签

input标签是输入框的一种

①输入框

输入框有两个属性：value 和 placeholder value：设置默认显示的内容，属性值为自定义的内容 placeholder：属性作用是如果没有value的时候提示用户的文字占位符

②密码框

通过type值为password设置的，显示效果是输入后通过掩码形式显示的

<input type="password" placeholder="请输入密码">

2、input标签

input标签是输入框的一种，但不仅仅只是输入框，通过type属性，可以拓展多功能 input的type属性非常丰富

①输入框

输入框有两个属性：value 和 placeholder value：设置默认显示的内容，属性值为自定义的内容 placeholder：属性作用是如果没有value的时候提示用户的文字占位符 ②密码框通过type值为password设置的，显示效果是输入后通过掩码形式显示的

③单选框

通过type的值为radio设置的，单选按钮都是成组出现的，要想实现一组单选按钮的互斥，需要设置相同的name属性

④复选框

即多选框，通过type值为checkbox设置；复选框可以通过对自身进行多次点击实现选择或者取消；同时也可以选择一个或者多个，建议同一组设置相同的name属性