HTML5基础归纳（1）

来源：互联网发布：淘宝店铺首页如何设置编辑：程序博客网时间：2024/05/22 10:26

1、表单常用的标签归类

文本框：<input type="text" value="默认值" name="text">

密码框：<input type="password" value="提示语" name="psw">

按钮：<input type="button" value="按钮内容” name="btn">

提交按钮：<input type="submit" value="按钮内容” name="submit">

重置按钮：<input type="reset" value="按钮内容" name="reset">

单选按钮：<input type="radio" value="默认值" name="radio" checked="checked" disable="disable">

复选框：<input type="checkbox" value="默认值" name="CheckBox">

注： checked="checked"代表默认选中 disable="disable"代表禁用

下拉菜单：<select name="select">

</select>

文本域：<textarea name="textarea" cols="字符宽度" rows="行数"></textarea>

提交按钮：<input type="submit" value="按钮内容” name="submit">

注： name属性最好都要有，这是唯一的，不会有重复的

2、引用css的几种方法

1）引用外部样式：可以以如下方式引用

①<head>
<meta charset="UTF-8">
<title>标题</title>
<link rel="stylesheet" type="text/css" href="引用的样式路径" />
</head>

②<head>
<meta charset="UTF-8">
<title>标题</title>
<style type="text/css"/>

@import url(目标文件的路径及文件名全称)

</style>
</head>

注： @import 方式是先加载样式完全，html再加载css，会出现闪屏现象，开始时没有

link是HTML标签，除了可以加载css外，还可以定义css，定义rel连接属性等

2）内联样式：（此方法优先级别最高），直接在html标签里面写样式，语法如下：

<标签 style=“属性：属性值；属性：属性值；”></标签>

例如：<p style="font-size:18px;"></p>

3）内部样式：形式如下：

<head>

<style>

/*css语句*/

</style>

</head>

3、选择器

1）元素选择器：语法：元素名称{属性：属性值}，例如：body{margin: 0 auto;}；

2）ID选择器：语法：ID{属性：属性值}，

例如：

#box{width:100px;}；

3）class选择器：语法：class{属性：属性值},

例如：

.box{width:100px;}；

4）包含选择器：语法：选择符1 选择符2{属性：属性值；},

例如：

<ul>

</ul>

ul li{width:50px;}

5）群组选择器：语法：选择符1，选择符2，选择符3...{属性：属性值}，

例如：html,body{width:100%;}

6）属性选择器：语法如：table[width]{color:#fff;}

7）伪类选择器：语法如：a:link{color:#000;}

这里顺便提下a标签的伪类选择器用法：

a:link：超链接的初始状态

a:visited：超链接被访问后的状态

a:hover：鼠标滑过超链接的状态

a:active：鼠标按下时超链接的状态

当四个超链接伪类选择器一起使用时，应按顺序编写

4、关于文本（这里只提一些特殊的）

文本修饰：text-decoration:none/underline/overline/line-through/blink;

意思依次是：无/添加下划线/添加上划线/添加删除线/闪烁

水平对齐方式：text-align:left/right/center/justify（两端对齐对中文不起作用）;

垂直对齐方式：vertical-align：top/bottom/middle;

首行缩进：text-indent:value;

说明：text-indent可取负值；且只对第一行起作用

字间距：letter-spacing:value;

词间距：word-spacing:value;

实现单行出现省略号效果：

定义容器宽度：width；

强制文本在一行显示：white-space:nowrap;

溢出内容设为隐藏：overflow:hidden;

溢出文本为省略号：text-overflow:ellipsis;

5、关于列表样式

1）list-style-type:disc/circle/square/none;

意思依次是：实心圆/空心圆/实心方块/去掉样式

2）使用图片代替样式：list-style-image:url(所使用的图片路径及全称);

3）定义列表位置：outside/inside；

阅读全文

1 0