HTML和CSS常用属性

最新推荐文章于 2022-06-11 14:32:34 发布

kissingfires

最新推荐文章于 2022-06-11 14:32:34 发布

阅读量67

点赞数

分类专栏： Java

本文链接：https://blog.csdn.net/weixin_46099027/article/details/104957490

版权

Java 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

HTML结构

<!DOCTYPE html> 文档声明，不是HTML标签必须放首行
<html> 网页的根元素
    <head> 放网页的头部信息
        <meta charset="utf-8"> 设置网页的编码方式
        <title></title> 网页标题
        <link href="css文件的路径" rel="stylesheet" type="text/css"> 引入css样式
    </head>
    <body>
     网页主体内容，用户浏览器看到内容
    </body>
</html>

常用标签

标题标签

h1~h6(h标签是双标签) 大小依次减小，重要程度依次减弱特点：默认宽度100%、高度自适应，独立成行，自带间距加粗效果
注意：

在一个页面中只能使用一次，其他h标签可以使用多次

段落标签

 <p></p>
   显示一段内容
   特点：默认宽度100%、高度自适应，独立成行，自带间距

div标签

<div>
    我是一个块级标签，无语义
    可以用我进行嵌套
</div>

列表标签

1）ul无序列表
    <h1>我喜欢吃的水果</h1>
    <ul>
        <li>甜桔,不为别的,就是因为甜</li>
        <li>水蜜桃,因为花开的颜色很好看</li>
        <li>香蕉,不知道为啥就是喜欢吃</li>
    </ul>
2）ol有序列表
    <h1>我不喜欢的好多..</h1>
    <ol>
        <li>老大榴莲,我吐了</li>
        <li>芒果,核太大了,吃完弄一手,烦</li>
        <li>苹果,果核有轻微的毒素</li>
    </ol>

超链接标签

 - [<a href=””></a>标签 ]

插入图片

<img src=””>图片标签

文本输入

<input type=””>标签

        type取值：text、password等 文本输入框
                 button、submit、reset等 按钮
                 radio 单选按钮
                 checkbox 复选框
        特点：可设置宽高、水平布局

表格标签

tr  行
td  列
<tr align="center">

        <td rowspan="3">上午</td>
        <td>语文</td>
        <td>数学</td>
        <td>英语</td>
        <td>体育</td>
        <td>政治</td>
    </tr>

CSS常用属性

float浮动属性
float: left; 元素向左浮动
float: right; 元素向右浮动
float: none; 默认值，元素不浮动
宽高属性

width 设置宽度
heigth 设置高度
margin 外边距属性

	外间距：
	margin-top属性：上外间距
	margin-right属性：右外间距
	margin-bottom属性：下外间距
	margin-left属性：左外间距

padding 内边距属性

	内填充：
    padding-top属性：上内填充
    padding-right属性： 右内填充
    padding-bottom属性：下内填充
    padding-left属性： 左内填充

border 边框属性

	border-width属性：边框的宽度，属性值单位像素
	    border-style属性：边框的样式
	    border-style: none; 没有边框
	    border-style: solid; 单实线
	    border-style: double; 双实线
	    border-style: dashed; 条状虚线
	    border-style: dotted; 点状虚线
		border-color属性：边框颜色。默认的边框颜色是元素本身的前景色

text-align 文本对齐方式

	text-align:left; 左对齐 默认
	text-align:center; 居中对齐
	text-align:right; 居右对齐

text-decoration 文本装饰线属性

	text-decoration:none; 去除文本装饰线
	text-decoration:underline; 下划线
	text-decoration:overline; 上划线
	text-decoration:line-through; 删除线

kissingfires

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML和CSS常用属性

HTML结构<!DOCTYPE html> 文档声明，不是HTML标签必须放首行<html> 网页的根元素 <head> 放网页的头部信息 <meta charset="utf-8"> 设置网页的编码方式 <title></title> 网页标题 <link h...
复制链接

扫一扫