HTML5&CSS3——让你的页面美如画(1)

一、HTML

1.HTML基础

HTML是一种超文本标记语言,主要用于搭建页面的框架结构,它能够被浏览器解析,将内容按其所编写的结构有组织地展现出来。

HTML文体有以下常用内容:

1)首部声明(如<!DOCTYPE HTML>);

2HTML开始标签(或包括声明)(如

<HTML lang=”en”>

);

3)头部配置(如

<head>

<meta charset="UTF-8">

<title>网页标题</title>

 </head>

);

4)文件引入(如

<link rel="stylesheet" type="text/css" href="test.css">

<script type="text/javascript" src="./package/jquery-3.3.1.min.js"></script>

);

5)内联样式(如<style>h1{color: blue;}</style>);

6)内联脚本(如<script>alert(message...);</script>);

7)内容体(如

<body>

<!--注释-->

<h1>内容标题</h1>

<p>内容</p>

</body>

);

2HTML结束标签(如

</HTML>

2.HTML元素

HTMLHTML元素组成,HTML元素由开始标签、结束标签和它们之间所包含的内容组成。HTML标签中可以通过设置属性对其显示的内容形式做一些调整,格式为<标签名 属性名1=“属性值1” 属性名2=“属性值2...>内容</标签名>(部分标签不需要</标签名>)。

HTML的元素可以分为块元素和行内元素,它们的特性和固有样式如下:

(1)块元素

搭建页面框架 box

特性:

独占一行空间

默认宽父元素的100%,默认高由子元素或内容决定

可以指定宽高

元素: 样式:

div

h1~h3  margin,font-size,font-weight

p    margin

HTML

body  margin

ol,ul  margin,padding,list-style

li

dl margin

dt

dd  margin

(2)行内元素

填充,装饰

特性:

多个行内元素共享一行空间

默认宽高都由内容决定

不可以指定宽高

行内元素中不可以嵌套块元素

元素:  样式:

span  无意义的行内元素

a    超链接(默认事件) open link

    href="跳转的路径"

      锚点

      url

      相对路径

      绝对路径

      mailto:xxx(发送邮件)

      ...

img 图片

    srca标签中href属性类似

      url

      相对路径

      决定路径

    地图(可将图片划分为规则或不规则的若干区域,绑定不同事件)

      像素信息

    alt

      图片找不到的时候的显示文本

(3)装饰类型(逐步淘汰使用的行内元素)

strong  强调加粗

b    加粗

Em  强调

i    斜体

del  删除线

sub/sup  /下标

...

这些元素的使用策略如下:

总体策略:先使用块元素搭建页面框架,再使用行内元素填充页面。

列表性质用:ul,ol,dl

标题性质用:h1~h3

段落:p

不知道用什么的时候使用div

功能性标签(非纯粹的块元素或行内元素)

(1)表格(展示数据列表)

table

  【属性】borderwidthstyle

  caption 表格标题

  thead 表头部分

    tr

      th/td

  tbody 表格主体部分【不可以省略】

    tr

      td/th

        【属性】colspanrowspanwidthalign

        td/th中可以放任意子元素

    tfoot 表底部分

      tr

        td

【注意】:每一行中的列数应该是相等

2)表单(获取用户输入、前后台交互)

用户 -> 前台表单 -> 后台 -> 数据库

<form action="">

  input

  select

  submit(/input)

</form>

form属性

  action  后台接口地址

  method  请求方式

    get

      参数拼接在url后面,通过?来分割

      传递参数较少

      查询学生信息、通过id删除学生信息、

    post

      参数存放在请求体中,安全

      传递参数更多

      保存或者更新学生信息、批量删除

   target  回应显示位置

      _self_blank_parent_top

   enctype  在发送前编码所有字符使用到的编码方式

      1. enctype='application/x-www-form-urlencoded'(默认)

      “&”连接“参数名=参数值”的格式

      2. multipart/form-data

      表示不对字符进行编码,直接打包发送

      当有附件在表单中的时候,enctype务必设置为此格式

      ...

input属性

  name: 不能省略,作为键值对参数中的键key

  value: 作为参数中的value,在按钮中务必指定value

  type:

  text 单行文本框

  password 密码框,输入的内容将会被遮挡。

  checkbox 复选框,必须使用value属性来描述该组件所提交的值,使用checked属性默认选中。

  radio 单选按钮,必须使用value属性来描述该组件所提交的值,使用checked属性默认选中。一个单选按钮组中所有组件都应该具有相同的name值,这样,每次只能选中按钮组中的某一个组件

  submit 提交按钮

  reset 重置按钮

  file 文件按钮,该组件用于选中文件系统中的某个文件

  hidden 隐藏域,该组件不显示在页面中,但是其值会被提交。

  image 图像按钮,必须使用src来加载图片,使用alt来声明替换文本。

  button 普通按钮

  第三方库(element(饿了吗)Ant Design(蚂蚁金服)

    日期插件

    地址选择器地址

    附件上传

    富文本

    ...

猜你喜欢

转载自www.cnblogs.com/wodeqiyuan/p/11272900.html