html,css,js 常用属性及标签自查

最新推荐文章于 2024-08-30 18:40:43 发布

-Casey-

最新推荐文章于 2024-08-30 18:40:43 发布

阅读量169

点赞数 5

分类专栏： Java学习文章标签： java html css javascript

本文链接：https://blog.csdn.net/qq_50952157/article/details/133958160

版权

Java学习专栏收录该内容

22 篇文章 0 订阅

订阅专栏

标题标签: <h1> - <h6>

图片标签: <img>

常见属性:
   src: 指定图像的url (可以指定绝对路径 , 也可以指定相对路径)
   width: 图像的宽度 (像素 / 百分比 , 相对于父元素的百分比)
   height: 图像的高度 (像素 / 百分比 , 相对于父元素的百分比)

备注: 一般width 和 height 我们只会指定一个，另外一个会自动的等比例缩放。

css引入样式

名称	语法描述	示例
行内样式	在标签内使用style属性，属性值是css属性键值对	<h1 style="xxx:xxx;">中国新闻网</h1>
内嵌样式	定义<style>标签，在标签内部定义css样式	<style> h1 {...} </style>
外联样式	定义<link>标签，通过href属性引入外部css文件	<link rel="stylesheet" href="css/news.css">

css选择器（元素，id：#id，类：.cls）

语法格式：选择器名 {
        css样式名：css样式值;
        css样式名：css样式值;
        }

超链接

标签: <a href="..." target="...">央视网</a>
属性:
- href: 指定资源访问的url
- target: 指定在何处打开资源链接
  - _self: 默认值，在当前页面打开
  - _blank: 在空白页面打开

视频<video>

属性:

src: 规定视频的url
controls: 显示播放控件
width: 播放器的宽度
height: 播放器的高度

段落<p>

换行<br> 加粗强调<strong> 倾斜<i> 下划线<u> 删除线<s>

常见属性

font-size , 用来设置字体的大小单位px

text-indent: 设置段落的首行缩进

line-height: 设置行高

text-align: 设置对齐方式, 可取值为 left / center / right

text-decoration: none: 设置文本为一个标准的文本

占位符

显示结果	描述	占位符
	空格
<	小于号	<
>	大于号	>
&	和号	&
"	引号	"
'	撇号	'

页面布局

布局标签 <div> ，<span>

div标签：
- 一行只显示一个（独占一行）
- 宽度默认是父元素的宽度，高度默认由内容撑开
- 可以设置宽高（width、height）
span标签：
- 一行可以显示多个
- 宽度和高度默认由内容撑开
- 不可以设置宽高（width、height）

表格标签 <table>

属性：

border：规定表格边框的宽度

width：规定表格的宽度

cellspacing: 规定单元之间的空间

<tr>：表格的行

<td>：单元格，如果在表头（第一行），写成<th>

表单标签 <form>

表单属性:

action: 规定表单提交时，向何处发送表单数据，表单提交的URL。
method: 规定用于发送表单数据的方式，常见为： GET、POST。
- GET：表单数据是拼接在url后面的，如： xxxxxxxxxxx?username=Tom&age=12，url中能携带的表单数据大小是有限制的。
- POST：表单数据是在请求体（消息体）中携带的，大小没有限制。

表单项标签: 不同类型的input元素、下拉列表、文本域等。

input: 定义表单项，通过type属性控制输入形式
select: 定义下拉列表
textarea: 定义文本域

例如：用户名:<input type="text" name="username">

表单中的所有表单项，要想能够正常的采集数据，在提交的时候能提交到服务端，表单项必须指定name属性。否则，无法提交该表单项。

<input>表单项:通过type属性控制输入形式

type取值	描述
text	默认值，定义单行的输入字段
password	定义密码字段
radio	定义单选按钮
checkbox	定义复选框
file	定义文件上传按钮
date/time/datetime-local	定义日期/时间/日期时间
number	定义数字输入框
email	定义邮件输入框
hidden	定义隐藏域
submit / reset / button	定义提交按钮 / 重置按钮 / 可点击按钮

<select>定义下拉列表，<option>定义列表项

<textarea>：文本域

下面是一个例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML-表单项标签</title>
</head>
<body>

<!-- value: 表单项提交的值 -->
<form action="" method="post">
     姓名: <input type="text" name="name"> <br><br>
     密码: <input type="password" name="password"> <br><br> 
     性别: <input type="radio" name="gender" value="1"> 男
          <label><input type="radio" name="gender" value="2"> 女 </label> <br><br>
     爱好: <label><input type="checkbox" name="hobby" value="java"> java </label>
          <label><input type="checkbox" name="hobby" value="game"> game </label>
          <label><input type="checkbox" name="hobby" value="sing"> sing </label> <br><br>
     图像: <input type="file" name="image">  <br><br>
     生日: <input type="date" name="birthday"> <br><br>
     时间: <input type="time" name="time"> <br><br>
     日期时间: <input type="datetime-local" name="datetime"> <br><br>
     邮箱: <input type="email" name="email"> <br><br>
     年龄: <input type="number" name="age"> <br><br>
     学历: <select name="degree">
               <option value="">----------- 请选择 -----------</option>
               <option value="1">大专</option>
               <option value="2">本科</option>
               <option value="3">硕士</option>
               <option value="4">博士</option>
          </select>  <br><br>
     描述: <textarea name="description" cols="30" rows="10"></textarea>  <br><br>
     <input type="hidden" name="id" value="1">
	 	
     <!-- 表单常见按钮 -->
     <input type="button" value="按钮">
     <input type="reset" value="重置"> 
     <input type="submit" value="提交">   
     <br>
</form>

</body>
</html>