HTML快速入门

honhbu

已于 2024-05-27 18:58:49 修改

阅读量960

点赞数 5

文章标签： html 前端服务器

于 2024-05-23 23:11:04 首次发布

本文链接：https://blog.csdn.net/m0_63839619/article/details/139118862

版权

1. HTML结构标签

<html>
    <head>
        <title>标题</title>
    </head>
    <body>

    </body>
</html>

2．特点

HTML标签不区分大小写
HTML标签属性值单双引号都可以
HTML语法松散

3．标题标签

标签: <h1>...</h1> (h1 o h6重要程度依次降低)
注意:HTML标签都是预定义好的，不能自己随意定义。

4．水平线标签<hr>

5．图片标签<img src="..." width="..." height="...">

绝对路径:绝对磁盘路径（D:/xxx×)、绝对网络路径(https: / /xxxx)
相对路径:从当前文件开始查找。(/︰当前目录，../ :上级目录)

6.CSS引入方式

行内样式:<h1 style="...">
内嵌样式: <style> ... </style>
外联样式:xxx. CSS <link href="...">

7．颜色表示

关键字:red.green . . ﹒
rgb表示法:rgb(255,e,e).rgb(134,1ee,89)
十六进制: #ff000e、#cccccc、#ccc

8．颜色属性

color:设置文本内容的颜色

9. <span>标签

<span>是一个在开发网页时大量会用到的没有语义的布局标签
特点:一行可以显示多个(组合行内元素)，宽度和高度默认由内容撑开

10.CSS选择器

元素选择器:标签名{ ... }
id选择器:#id属性值{ ... }
类选择器:.class属性值{ ... }
优先级:id选择器〉类选择器〉元素选择器

11. CSS属性

color:设置文本的颜色
font-size:字体大小（注意:记得加px)

12．超链接

标签:<a>属性:

href:指定资源访问的url
target:指定在何处打开资源链接_self:默认值，在当前页面打开_blank:在空白页面打开

13.CSS属性

text-decoration:规定添加到文本的修饰，none表示定义标准的文本。

color:定义文本的颜色

14．音频、视频标签

15．换行、段落标签

换行: <br> ;段落:<p>

16．文本加粗标签

17.CSS样式

line-height:设置行高
        text-indent:定义第一个行内容的缩进
        text-align:规定元素中的文本的水平对齐方式5．注意
        在HTML中无论输入多少个空格，只会显示一个。可以使用空格占位符:  

18. CSS盒子模型

组成:内容(content) 、内边距(padding)、边框( border) 、外边距( margin)

19.CSS属性

width:设置宽度height:设置高度
        border:设置边框的属性，如:1px solid #000;padding:内边距
        margin:外边距
        注意:如果只需要设置某一个方位的边框、内边距、外边距，可以在属性名后加上-位置，如:         padding-top.padding-left、 padding-right ...

20．表格标签

<table>:定义表格
<tr>:定义表格中的行，一个<tr>l表示一行
<th>:表示表头单元格，具有加粗居中效果
<td>:表示普通单元格

21．表单标签

表单标签:<form>表单属性:
action:表单数据提交的url地址method:表单提交方式
get:表单数据拼接在url后面，?username=java ,大小有限制
post:表单数据在请求体中携带，大小没有限制

注意:表单项必须有name属性才可以提交。

22.表单项

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>

honhbu

关注

5
点赞
踩
14

收藏

觉得还不错? 一键收藏
0
评论
HTML快速入门

注意:如果只需要设置某一个方位的边框、内边距、外边距，可以在属性名后加上-位置，如: padding-top.padding-left、 padding-right ...组成:内容(content) 、内边距(padding)、边框( border) 、外边距( margin)text-decoration:规定添加到文本的修饰，none表示定义标准的文本。5．图片标签: 文本域。
复制链接

扫一扫