HTML常用标签及属性

  • 内容
  • 相关

    HTML:超文本标记语言。

HTML文档基本结构:

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	
</body>
</html>

    HTML文档中的所有内容都写在<html></html>

<!DOCTYPE html>:这是一个声明,告诉我们这是一个HTML文档,网页中的文档有不同的类型,比喻说XHTMLXML等。

<head></head>:这里面放一些外部引入的文件,标题,设置网页编码等。

<title></title>:这之间放的内容是在网页标签上面显示。

<body></body>:之间的内容是显示在网页上的。

    设置网页编码格式:<meta  charset="utf-8">

    单双标签是HTML文档中标签的书写格式,页面中最常见的是双标签。

单标签:只有一个标签,也就是一个空元素。例如 meta、img、br、hr……

双标签:拥有开始标签和结束标签。例如 html、body、title……

    成对的标签称为元素,标签与标签之间的内容称为元素内容。

块级元素:独占一行,对宽高属性值设置生效,如果不给宽度,则默认为浏览器的宽度(浏览器有自带的边距)。例如 div、p、ul…

行内元素:对宽高属性值设置不生效,宽高靠内容撑开,可以和其他标签存在于一行。例如 span、b、em、a、strong……

行内块元素:结合了行内元素和块级元素的特点,不仅对设置宽高属性值生效,还可以多个标签存在于一行。例如 img、input……

 

link 标签

<link  rel=""  type="text/css"  href="">  用于引入外部文档、资源、CSS样式等。只存在于 head 标签内部。

rel     定义文档与被链接文档之间的关系。

type    规定被链接文档的类型。

href    url地址。

链接一个图片:

<link  rel="shortcut icon" type="image/x-icon" href="images/logo.png">

链接 CSS 样式:

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

stylesheet:层叠样式表。

 

p段落标签:

<p  style="text-indent:2em; font-size:18px; color:cyan;">XXXXXX</p>

 

text-indent:2em      首行缩进2字符。

font-size:18px       段落文字大小。

color:cyan         设置文字颜色。

font-weight:blod     字体加粗。

font-family:楷体    设置字体(要字体在C:\Windows\Fonts里面是存在的)。

text-align:center          文字水平居中,有三个取值:right、left、center

border:1px solid #ccc  设置外边框,线粗1pxsolid实线(dashed虚线边框),#ccc边框颜色。

 

em/i斜体

<em>xxx</em>    或者   <i>xxxx</i>

 

del删除线,打折商品时用的:

<del>¥199</del>¥99

¥199¥99

 

br换行标签

<br>

 

pre域格式文本标签

<pre>XXXXYYY</pre>

被包含在这里面的文本会保留它的空格、换行。

 

hi标题标签

<h1>xxx</h1>

……

<h6>xxx</h6> 

 

a超链接标签:

<a  href="url地址">xxx</a>

href   链接目标。本页面跳转使用#,如<a  href="#">xx</a>

 

图片链接

<a href="url地址"><img src="images/logo.png"></a>

 

默认的超链接显示有下划线,可以通过设置属性text-decoration:none;)去除下划线 
    a{
        text-decoration: none;
        color: #000;
    }

设置超链接鼠标触发效果,例如鼠标放到超链接文本上字体变红且有下划线,通过设置伪属性来实现:

  a:hover{
        color: red;
        text-decoration: underline;
  }

 

列表分为有序列表和无序列表。

 

有序列表

<ol>

    <li>xxx</li>

</ol>

每一行前面默认实现1、2、3……序号,可以有多个 li 标签。

1. xxx

2. xxx

 

无序列表

<ul>

    <li>xxx</li>

</ul>

默认是黑色小圆点(颜色无法控制)。可以修改为正方形、圆等。

一般布局使用无序列表。

去掉无序列表前面的小圆点

ul li{list-style: none; }

 

将无序列表前面的小圆点改为图片:

ul li{list-style: url(images/logo.png); }

 

但是这样子添加的图片时无法修改图片与文字之间的距离的。可以使用伪元素:

before:在元素前面插入内容。

ul li{list-style: none; }    /*去掉小圆点*/

ul li:before{content: url(images/logo.png); margin-right: 20px;}    /*添加图片  修改图片与文字之间的间距*/    

after:在元素后面插入内容。

ul li:after{content: url(images/logo.gif); }

 

文字垂直水平居中:

div{

    width:100px;

    height:40px;

    border 1px dashed red;

    text-align: center;

    line-height: 40px;

}

<div>你好</div>

效果:

TIM截图20181128174002.png

margin属性:设置外边距,可以单独设置上、下、左、右外边距。也可以一次设置所有方向的属性。

padding属性:定义上下左右内边距,即边框和元素内容之间的间距。(设置方法与margin类似)

TIM截图20181128174749.png

margin:10px 5px 15px 20px;

    上外边距为10px,右外边距为5px,下外边距为15px,左外边距为20px。

margin:10px 5px 15px;

    上外边距为10px,右外边距和左外边距为5px,下外边距为15px

margin:10px 5px;

    上外边距和下外边距都是10px,右外边距和左外边距都是5px

margin:10px;

    所有外边距都是10px

 

form表单

<form  method="post"  action="#">
  姓 名:<input type="text" name="username" placeholder="请输入用户名"><br>
  密 码:<input type="password" name="pwd" placeholder="请输入密码">
</form>

TIM截图20181128180310.png

属性

method:传值方式。传值方式。一般在后端传递数据时使用,用于收集不同类型的数据输入,传递给服务器端,取值get/postget传值时有最大值,post没有,get(信息会显示在url后面)没有post安全。

action:传值地址,向后端或服务器端传递数据。action="url地址"。

    input标签的type属性取值有很多种,如text、password、submit(提交按钮、reset(重置按钮……

placeholder:规定可描述输入字段预期值的简短的提示信息。

 

button按钮

<button>xxx</button>

默认自带边框。也可以通过color属性来修改字体颜色。

 

table表格标签

<table>

    <tr>

        <th>x</th>

        <th>x</th>

    </tr>

    <tr>

        <td>x</td>

        <td>x</td>

    </tr>

</table>

    th定义表头(内容默认居中),tr定义表格行,td定义表格单元。

colspan="5"    合并5列单元格。

rowspan="3"   合并9行单元格。

本文标签:

版权声明:若无特殊注明,本文皆为《尤尤》原创,转载请保留文章出处。

本文链接:HTML常用标签及属性 - https://www.yxfseo.cn/post-225.html

发表评论

电子邮件地址不会被公开。 必填项已用*标注

00:00 / 00:00
顺序播放