Document

Web开发网站-02

2024-01-03
dfer
299
前端 CSDN

1 超链接

标签<a href=",,," "target="...">教育网</a>
属性：

href：指定资源访问的url

target：指定在何处打开资源链接

_self:默认值，在当前页面打开

_blank:在空白页面打开

2 css属性

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

font-size：设置字体大小

color：定义文本的颜色

line-height:设置行高

text-indent：定义第一行内容的缩进

text-align:规定元素中的文本的水平对齐方式

3 视频

视频标签：<video>

src:规定视频的url

controls：显示播放控件

width：播放器的宽度

height：播放器的高度

4 音频

音频标签:<audio>

src:规定音频的url

controls：显示播放器控件

5 段落/换行

段落标签：<p>
换行 <br>

6 文本加粗

文本加粗标签<b> / <strong>

注意：在html中无论输入多少个空格，只会显示一个。尅使用空格占位符： 

7 页面布局

盒子：页面中所有的元素（标签），都可以看作是一个盒子，由盒子将页面中的元素包含在一个矩形区域内，通过盒子的视角更方便的进行页面布局
盒子模型组成：内容区域(content)、内边距区域（padding）、边框区域（border）、外边距区域（margin）。

8 布局标签

布局标签：实际开发网页中，会大量频繁的使用div和span这两个没有语义的布局标签。
标签<div><span>
特点：
- div标签：
  - 一行只显示一个（独占一行）
  - 宽度默认是父元素的宽度、高度默认由内容撑开
  - 可以设置宽度（width、height）
- span标签：
  - 一行可以显示多个
  - 宽度和高度默认由内容撑开
  - 不可以设置高度（width、height）

9 盒子模型CSS属性

width:设置宽度
height：设置高度
border：设置边框的属性，如：1px solid #000；
padding：内边框
margin：外边框

注意：如果只需要设置某一个方位的边框、内边框、外边框，可以在属性名后加上 -位置，如：padding-top、padding-left、padding-right...

10 表格、表单标签

表格标签

场景：在网页中以表格（行、列）形式整齐展示数据，如：班级表
标签

标签	描述	属性/备注
<table>	定义表格整体，可以包裹多个<tr>	border：规定表格边框的宽度 width：规定表格的宽度 cellspacing：规定单元格之间的空间
<tr>	表格的行，可以包裹多个<td>
<td>	表格单元格（普通），可以包裹内容	如果是表头单元格，可以替换为<th>

表单标签

场景：在网页中主要负责数据采集功能，如注册、登录等数据采集。
标签 <form>
表单项：不同类型的input元素、下拉列表、文本域等。
- <input>:定义表单项，通过type属性控制输入形式
- <select>:定义下拉列表
- <textarea>:定义文本域

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

属性
- action：规定当提交表单时向何处发送表单数据，url
- method：规定用于发送表单数据的方式。get、post
  - get:表单数据拼接在url后面，？username=java，大小有限制
    - post：表单数据在请求体中携带，大小没有限制

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

<!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：表单提交的url，往何处提交数据。
        method：表单提交方式
            get：在url后面拼接表单数据，比如：？username=Tom&age=12,url长度有限制。默认值
            post：在消息体（请求体）中传递的，参数大小无限制的。
    -->

        <form action="" method="post">
            姓名: <input type="text" name="name"> <br><br>
            密码: <input type="password" name="password"><br><br>
            性别：<label ><input type="radio"  name="gender" value="1">男</label>
                 <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>

以上示例代码！

上一篇： Web开发网站-03

下一篇：网站系统开发中的用户