您的位置：首页 > Web前端 > HTML

重拾HTML（一）

2016-04-04 23:12 411 查看

一、网页组成

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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航