HTML+CSS 常用标签

 官方参考文档:https://www.w3school.com.cn/

HTML H yper T ext M arkup L anguage ):超文本标记语言。
超文本:超越了文本的限制,比普通文本更强大。除了文字信息,还可以定义图片、音频、视频等内容。
标记语言:由标签构成的语言
HTML标签都是 预定义 好的。例如:使用 <a> 展示超链接,使用 < img > 展示图片, <video> 展示视频。
HTML 代码直接在浏览器中运行, HTML 标签由浏览器解析。
CSS Cascading Style Sheet ):层叠样式表,用于控制页面的样式(表现)。
CSS 引入方式
行内样式:写在标签的 style 属性中(不推荐)
内嵌样式:写在 style 标签中(可以写在页面任何位置,但通常约定写在 head 标签中)
外联样式:写在一个单独的 . css 文件中(需要通过 link 标签在网页中引入)
 

       CSS选择器 

       元素选择器:标签名 { … }

       

元素名称 {
    color: 颜色;
}

       id选择器:#id属性值 { … }

#id属性值 {
    color: 颜色;
}

       类选择器:.class属性值 { … }

.class属性值 {
    color: 颜色;
}
    优先级: id 选择器 > 类选择器 > 元素选择器
一、 HTML 结构标签
<html>
	<head>    
		   <title>标题</title>
	</head>
	<body>
    
	</body>
</html>
二、特点
HTML 标签不区分大小写
HTML 标签属性值单双引号都可以
HTML 语法松散

 三、常用标签

1.标题标签

标签: <h1>…</h1> h1 h6 重要程度依次降低)
注意: HTML 标签都是预定义好的,不能自己随意定义。

2.水平标签

 <hr>

3.图片标签

 

<img src="…" width="…" height="…">
绝对路径:绝对磁盘路径( D:/xxx )、绝对网络路径( https://xxx
相对路径:从当前文件开始查找。 ( ./ : 当前目录, 可省略, ../ : 上级目录,不可省略)

 4.<span>标签

   <span> 是一个在开发网页时大量会用到的没有语义的布局标签

特点:一行可以显示多个 ( 组合行内元素 ) 宽度和高度默认由内容撑开

5.超链接标签<a>

   属性:

   href:指定资源访问的url

   target:指定在何处打开资源链接

   _self:默认值,在当前页面打开

   _blank:在空白页面打开

6.音频、视频标签 

<audio>  <video>

7.换行、段落标签

换行:<br> ; 段落:<p>

8.文本加粗标签

<b> <strong>

其中<strong>标签有强调作用

9.布局标签

div标签:

    一行只显示一个(独占一行)

    宽度默认是父元素的宽度,高度默认由内容撑开

    可以设置宽高(widthheight

span标签:

    一行可以显示多个

    宽度和高度默认由内容撑开

    不可以设置宽高(widthheight

10.表格标签

<table>:定义表格

<tr>:定义表格中的行,一个 <tr> 表示一行

<th>:表示表头单元格,具有加粗居中效果

<td>:表示普通单元格

11.表单标签

表单标签:<form>   

表单属性:

    action:表单数据提交的url地址

    method:表单提交方式

12.表单项标签

<input> type属性:textpasswordradiocheckboxfiledatedatetime-localtimenumberhiddenbuttonsubmit

  

<select> 定义下拉列表

<textarea> 定义文本域

四、CSS属性

color: 设置文本内容的颜色

 font-size:字体大小 (注意:记得加px

text-decoration:规定添加到文本的修饰,none表示定义标准的文本。

line-height:设置行高

text-indent:定义第一个行内容的缩进

text-align:规定元素中的文本的水平对齐方式

width:设置宽度

height:设置高度

border:设置边框的属性,如:1px solid #000

padding:内边距

margin:外边距

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值