重拾HTML
Posted 怡情_老二
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了重拾HTML相关的知识,希望对你有一定的参考价值。
一、网页组成
- html:网页的具体内容和结构,由N个标签(节点,元素,标记)组成
- CSS:网页的样式,美化网页
- javascript:网页的交互效果,比如用户鼠标的点击事件作出响应
二、常见的HTML标签
- 标题:h1、h2、h3、h4........
- 段落:p
<p style = "color: red; background: #00f">你好!好你妹!</p>
- 换行:br
- 容器:div、span(用来容纳其他标签)
- 表格:table、tr、td
- 列表:ul、ol、li
- 图片:img
<img src="q1.jpg">
- 表单:input
<input typr="button" value="这是一个按钮">
- 链接:a
<a href="http://baidu.com" target="_blank" style="font-size: 20px;">
<html>
<head>
<meta charset="utf-8"> /*使用utf-8编码,不然看到的是乱码*/
<link rel="shortcut icon" href="zheshitubiao.ico"> /*网页标题旁边的图标*/
<title>百度一下,你就知道</title> /*网页的标题*/
</head>
<body>
</body>
</html>
三、CSS(Cascading Style Sheets): 层叠样式表,用来控制HTML标签的样式
1>CSS的三种书写形式:
- 行内样式:(内联样式)直接在标签的style属性中书写
<body style="color: red;">
- 页内样式:在本网页的style标签中书写
<style>
body {
color: red;
}
</style>
- 外部样式:在单独的CSS文件中书写,然后在网页中用link标签引用
<link rel="stylesheet" href="index.css">
2>CSS两大核心:选择器+属性
选择器:选择对应的标签,加样式
选择器分类:
- 标签选择器:根据标签名找到标签
div {
color: red;
}
- 类选择器:. 类名
.high {
color: red;
}
<p class="high">第一行</p>
<p>第二行</p>
- id 选择器:#id 只能存在一个
#first {
color: red;
}
<p id="first">第一段文字</p>
- 并列选择器
div, .high {
color: red;
}
<p class="high">第一段文字</p> /*红色*/
<p>第二段文字</p>
<div class="high">div1</div> /*红色*/
<div>div2</div> /*红色*/
- 复合选择器
div.high {
color: red;
}
<p class="high">第一段文字</p>
<div class="high">div1</div> /*只有这一行是红色的*/
<div>div2</div>
- 后代选择器
div p {
color: red;
}
<div>
<p>div里面的p</p> /*红色*/
<span>
<p>div里面的span里面的p</p> /*红色*/
</span>
</div>
<p>外面的p</p>
- 直接后代选择器
div > p {
color: red;
}
<div>
<p>div里面的p</p> /*红色*/
<span>
<p>div里面的span里面的p</p>
</span>
</div>
<p>外面的p</p>
- 相邻兄弟选择器
div+ p {
color: red;
}
<div>
<p>div里面的p</p>
<span>
<p>div里面的span里面的p</p>
</span>
</div>
<p>与div相邻的p</p> /*红色*/
<p>与p相邻的p</p>
以上是关于重拾HTML的主要内容,如果未能解决你的问题,请参考以下文章