HTML快速入门 - 技术栈

HTML结构标签

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:设置文本内容的颜色

<span>标签

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

10.CSS选择器

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

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中无论输入多少个空格，只会显示一个。可以使用空格占位符:  

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> <form action="" method="post"> 姓名:

密码:

性别: 男 <label> 女 </label>

爱好: <label> java </label> <label> game </label> <label> sing </label>

图像:

生日:

时间:

日期时间:

邮箱:

年龄:

学历: <select name="degree"> <option value="">----------- 请选择 -----------</option> <option value="1">大专</option> <option value="2">本科</option> <option value="3">硕士</option> <option value="4">博士</option> </select>

描述: <textarea name="description" cols="30" rows="10"></textarea>
```
   
   <input type="button" value="按钮">
   <input type="reset" value="重置"> 
   <input type="submit" value="提交">   
   <br>
```
</form> </body> </html>