网页设计基本标签的使用

HTML常用标签使用说明

HTML文件基本格式

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!--设置字符集为utf-8-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>填写页面标题</title>
<style>添加css样式用来渲染页面也可以添加一些个性化的标题标签用于标签使用的时候直接对标签所表示的内容进行渲染</style>
</head>

<body>
body中的内容就是展示到画面的内容
</body>
</html>

常用标签说明

标签说明/属性值 标签说明/属性值
p段落标签 h1、h2、、标题标签
table表格标 签tr设置行,td设置列 form表单
inputtext单行文本框,password密码文本框,radio 单选框,checkbox多选框,submit提交,botton按钮
a超文本链接 div分区

常用标签属性设置

字体的属性

  1. 设置颜色
          <p style="color:red">设置字体的颜色</p>
  2. 设置字体的大小
          <p style="font-size:20px">设置字体的大小</p>
  3. 设置文本位置
    center 居中,left左居中,right右居中。例如:
    1
    text-align: center

插入图片

    <img src="" >

background

1
2
3
4
/** 横向填充*/
repeat-x;
/** 纵向填充*/
repeat-y;

超链接

a标签超链接

href 设置超链接的目标。
target 设置连接的对象是在一个新的窗口打开还是在当前窗口打开(覆盖当前窗口)。
_blank 当前窗口打开(覆盖当前窗口
_self 在一个新的窗口打开

1
<a href="https://www.bilibili.com/video/BV1NJ411J79W?p=40" target="_blank">遇见狂神说</a>

瞄点连接

1
2
3
4
<a name = "123">跳到123</a>
····

<a href = "#123">我是123,跳我这儿</a>

表格

表单设置登录页面,包括文本域,单选按钮,复选按钮
基本使用格式:

1
2
3
4
5
6
7
8
9
<table>
<caption>定义表格标题</caption>
<tr>
<th>定义表头单元</th>
</tr>
<tr>
<td>定义一个单元格</td>
</tr>
</table>

·注:td 设置rowspan="2"属性->左合并两格。td 设置 colspan="2"属性->向下合并两格

表单

表单用于信息交互其中包括提交属性。

1
2
3
4
5
6
7
<form οnsubmit="提交目的位置">
<input type="text" id="password" name="单行文本框 placeholder="文本框提示文本"/>
<input type="radio" id="radio01" name="单选"/>
<input type="radio单选的属性值" id="radio02" name="单选"/></p>
<input type="submit" id="submitTo"value="提交按钮"/>
<input type="button" id="but01" value="普通按钮"/>
</form>

·注:radio单选的属性值name相同是别是相互是互斥关系。

css

css是什么

CSS为HTML标记语言提供了一种样式描述,定义了其中元素的显示方式。CSS在Web设计领域是一个突破。利用它可以实现修改一个小的样式更新与之相关的所有页面元素,属性设置和使用可以参考其他作者分享的笔记:其他作者的笔记

css选择器

下面列举常用的标签选择器

常用选择器名称使用格式
id选择器#id01{}
class类选择器.class01{}
标签选择器使用已有的标签名命设置个性化那么之后此标签所表示的所有内容都使用此标签的个性化属性

·注:使用的时候统一通过--> clsaa="选择器名称"使用

class 属性

class 属性规定元素的类名(classname)。
class 属性大多数时候用于指向样式表中的类(class)。不过,也可以利用它通过 JavaScript 来改变带有指定 class 的 HTML 元素。
具具体可以参考w3school


转载请注明来源,欢迎对文章中的引用来源进行考证,欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论,也可以邮件至 jaytp@qq.com

×

喜欢就点赞,疼爱就打赏