HTML&CSS – liuchuo

<!DOCTYPE html>
<html>
<head>

    <!-- 任何在页面具体内容进行展示之前需要运行的代码都放在head标签下，比如一段js代码，或者是一个css文件链接。 -->

    <!-- <title>是用来写标题的，会显示在标签页那里 -->
    <title>html practise</title>
    <meta charset="utf-8"/>

    <!-- 使用style标签直接在html的head里面添加css样式 -->
    <style>
        h3{
            color: #8FACAA;
        }
    </style>
    <link rel="stylesheet" type="text/css" href="test1.css">
</head>
<!-- 可以给body添加class，使用时在css文件里面.text0 p或者.text0 h1 等等 -->
<body class="text0">

    <!-- <p>会显示一段的内容 -->
    <p>p标签：这里显示一段的内容</p>
<div class="header">
    <!-- h1~h6一共有六个标题大小 -->
    <h1>h1标签：一级标题</h1>
    <h2>h2标签：二级标题</h2>
    <h3>h3标签：三级标题</h3>
    <h4 style="color: blue">h4标签：四级标题</h4>
    <h6>h6标签：六级标题好小哦哈哈哈哈</h6>
</div>
    <!-- 无序列表 -->
    <ul>
        <li>我是ul的li标签1</li>
        <li>我是ul的li标签2</li>
        <li>我是ul的li标签3</li>
    </ul>

    <!-- 有序列表 -->
    <ol>
        <li>我是ol的li标签1</li>
        <li>我是ol的li标签2</li>
        <li>我是ol的li标签3</li>
    </ol>

    <!-- a标签中使用href属性，用来写链接 -->
    <!-- id标签用来标记当前的链接，然后在css文件里面使用a#idname改变css样式 -->
    <a href="http://www.liuchuo.net" id="blog">~这里是 柳婼的博客 的链接~</a>
    <!-- br或者br/可以用来换行 -->
    <br/>

    <!-- 使用target标签来确定是新建标签打开还是在原网页基础上跳转 -->
    <!-- 使用class标签标记一类，在css文件里面可以使用a.classname改变css样式 -->
    <a href="http://www.baidu.com" target="_blank" class="myclass">_blank是在新的标签页里面打开</a>
    <br/>
    <a href="http://www.zhihu.com" target="_self" class="myclass">_self是在原网页基础上跳转，默认为_self</a>
    <br/>

    <!-- 相对路径是默认在本服务器下的，这样可以让自己在换服务器的时候不用一个个改绝对路径那样前面的服务器名称 -->
    <a href="/Users/ChenXin/Downloads">My Downloads File</a>
    <br/>
    <!-- 也可以使用../返回当前html所在文件夹的上一层文件夹 -->
    <a href="../../Java">返回两层，到Java文件夹下瞅瞅~</a>

    <p id="id1">你好，我是p标签里面的内容</p>
    <p id="id2">你好，我是另一个p标签里面的内容</p>

    <div class="class0">
        <p>这是div里面的p</p>
    </div>
    <div class="class1">
        <p>好巧我也是div里面的p</p>
    </div>

    <!-- 显示图片 img src -->
    <ul class="img-show">
        <li><img src="/Users/ChenXin/Desktop/iOS笔记/iOS需要的icons/可爱的小图标/bookicon.png" alt="bookicon"></li>
        <li><img src="/Users/ChenXin/Desktop/iOS笔记/iOS需要的icons/可爱的小图标/treeicon.png" alt="treeicon"></li>
        <li><img src="/Users/ChenXin/Desktop/iOS笔记/iOS需要的icons/可爱的小图标/mp3icon.png" alt="mp3icon"></li>
    </ul>

    <div class="background1">
        <p>背景图片专用div1</p>
    </div>
    <div class="background2">
        <p>背景图片专用div2</p>
    </div>
    <div class="background3">
        <p>背景图片专用div3</p>
    </div>

<!-- 表单 -->
<form>
    <!-- label有开/闭标签，input只有开标签 label和input都是行内级别的 -->
    <!-- input有很多种，比如text password submit checkbox radio file -->
    <!-- label和input分别使用for和id标记是否是一对儿，如果名称相同就是一对的 -->
    <label for="name">姓名</label>
    <input type="text" id="name">
    <br/>

    <label for="password">密码</label>
    <input type="password" id="password">
    <br/>

    <label for="submit">提交</label>
    <input type="submit" id="submit">
    <br/>

    <input type="checkbox" id="check">
    <label for="checkbox">checkbox的label</label>
    <br/>

    <input type="radio" id="radio">
    <label for="radio">radio的label</label>
    <br/>
    <label for="file">file的label在此~</label>
    <input type="file" id="file">
</form>

<!-- 关于默认位置、绝对位置、相对位置的设置 -->
<h2 class="title0">~~~~~~~~默认位置~~~~~~~~~~~~~</h2>
<h2 class="title1">~~~~~~~~相对位置~~~~~~~~~~~~~</h2>
<h2 class="title2">~~~~~~~~绝对absolute位置~~~~~~</h2>
<h2 class="title3">~~~~~~~~绝对fixed位置~~~~~~~~~</h2>



</body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

<!DOCTYPE html>

<html>

<head>

<title>html practise</title>

<style>

h3{

color: #8FACAA;

}

</style>

</head>

<p>p标签：这里显示一段的内容</p>

<h6>h6标签：六级标题好小哦哈哈哈哈</h6>

</div>

<ul>

<li>我是ul的li标签1</li>

<li>我是ul的li标签2</li>

<li>我是ul的li标签3</li>

</ul>

<ol>

<li>我是ol的li标签1</li>

<li>我是ol的li标签2</li>

<li>我是ol的li标签3</li>

</ol>

<a href="http://www.liuchuo.net" id="blog">~这里是柳婼的博客的链接~</a>

<br/>

<a href="http://www.baidu.com" target="_blank" class="myclass">_blank是在新的标签页里面打开</a>

<br/>

<a href="http://www.zhihu.com" target="_self" class="myclass">_self是在原网页基础上跳转，默认为_self</a>

<br/>

<a href="/Users/ChenXin/Downloads">My Downloads File</a>

<br/>

<a href="../../Java">返回两层，到Java文件夹下瞅瞅~</a>

<p id="id1">你好，我是p标签里面的内容</p>

<p id="id2">你好，我是另一个p标签里面的内容</p>

<p>这是div里面的p</p>

</div>

<p>好巧我也是div里面的p</p>

</div>

</ul>

<p>背景图片专用div1</p>

</div>

<p>背景图片专用div2</p>

</div>

<p>背景图片专用div3</p>

</div>

<form>

<br/>

<br/>

<br/>

<label for="checkbox">checkbox的label</label>

<br/>

<label for="radio">radio的label</label>

<br/>

<label for="file">file的label在此~</label>

</form>

<h2 class="title2">~~~~~~~~绝对absolute位置~~~~~~</h2>

<h2 class="title3">~~~~~~~~绝对fixed位置~~~~~~~~~</h2>

</body>

</html>

p{
    text-decoration: underline;
}
h1{
    color:pink;
}

.header {
    /* 将文字居中 */
    text-align: center;
    width: 800px;
}
/* #idname用来改变对应id标签的css样式 */
a#blog{
    text-decoration: none;
    color:#FF9999;
}

/* .classname用来改变对应class标签的css样式 */
a.myclass{
    color:#9999FF;
}

/* 使用空格分割嵌套的标签 */
ul li{
    color:#0099FF;
}

p#id1{
    /* 使用padding属性设置盒子内部周边空白处的css内容 */
    padding-left: 10px;
    padding-top: 2px;
    padding-right: 10px;
    padding-bottom: 2px;
/* 使用border属性设置盒子的边界的css内容 */
    border-width: 3px;
    border-style: dashed;
    border-color: pink;
/* 使用margin属性设置盒子外部的css内容 */
    margin-bottom: 50px;
}

p#id2{
    /* padding 和 margin 是按照顺时针顺序从上开始 */
    /* 如果只写两个，那么就是垂直 水平 两个方向对称 */
    /* 如果只写一个，那就是所有的都是这样 */
    padding: 12px 10px 20px 30px;
    margin: 20px 20px 0px 3px;
    /* border 按照 大小、虚实、颜色的顺序来设置参数 */
    /* border也有上下左右 */
    border-top: 4px solid #0099FF;
    border-left: 3px dashed #99FFFF;
}

/* 使用.classname 属性标签的方式指定div里面classname下某属性的css样式 */
.class0 p{
    color: green;
}
.class1 p{
    color:red;
}


.img-show li{
    display: inline;
}

.background1 p{
    background-color: pink;
    background-image: url(test0background.png);
    background-repeat: no-repeat;
    background-position: right;
}

.background2 p{
    background-color: blue;
    background-image: url(test0background.png);
    background-repeat: repeat-x;
}
/* 背景图片的简写方式：颜色，图片路径，位置，重复方式*/
.background3 p{
    background: green url(test0background.png) right repeat-y;
}

.background1 p{
    /* font-family 设置修饰字体 从第一个开始 第二个备选，以此类推 */
    font-family: "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
    /* 使用font-size 设置字体大小 */
    font-size: 40px;
    /* 使用line-height 设置行高 */
    line-height: 100px;
}

input[type="text"]{
    width: 220px;
    height: 30px;
    border: 3px solid #8FACAA;
}
input[type=password]{
    border: 3px solid #8FACAA;
}
input[type=submit]{
    color: blue;
    font-size: 20px;
    font-weight: bold;
    background-color: pink;
}


/*  css的三种选择器 */
h2{

}

.class0 {

}

#id1 {

}

/*
不同css书写方式之间的优先级差异
遵循"越近越重要"原则

优先级从高到低分别为：

在标签处添加CSS属性
在head添加CSS属性
在head链接外部添加CSS属性

*/

/*
不同CSS样式类型也存在优先级差异：
优先级从高到低分别为：

直接添加样式
ID选择器
类选择器
元素选择器

*/

/*  关于默认位置、绝对位置、相对位置的设置  */
.title0 {
    position: static;
}

.title1 {
    position: relative;
    left: -38px;
}

.title2 {
    position: absolute;
    left: 23px;
}

.title3 {
    position: fixed;
    top: 500px;
    left: 5px;
}


/*block: 会换行，可以设置width height属性，可以设定margin padding属性
inline: 不会换行，不能设定width height属性，margin和padding可以设定left和right，但是不能设定top和bottom
inline-block: 包含了block和inline的双重属性：不会换行，但是可以设定width和height属性

对于block的标签，在进行左右居中的时候，使用auto：*/
h1{
    margin: 5px auto 8px auto;
}

/*对于inline和inline-block标签，在进行居中操作的时候，直接使用text-align：*/
input[type=text] {
    text-align: center;
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

text-decoration: underline;

}

h1{

color:pink;

}

.header {

/* 将文字居中 */

text-align: center;

width: 800px;

}

/* #idname用来改变对应id标签的css样式 */

a#blog{

text-decoration: none;

color:#FF9999;

}

/* .classname用来改变对应class标签的css样式 */

a.myclass{

color:#9999FF;

}

/* 使用空格分割嵌套的标签 */

ul li{

color:#0099FF;

}

p#id1{

/* 使用padding属性设置盒子内部周边空白处的css内容 */

padding-left: 10px;

padding-top: 2px;

padding-right: 10px;

padding-bottom: 2px;

/* 使用border属性设置盒子的边界的css内容 */

border-width: 3px;

border-style: dashed;

border-color: pink;

/* 使用margin属性设置盒子外部的css内容 */

margin-bottom: 50px;

}

p#id2{

/* padding 和 margin 是按照顺时针顺序从上开始 */

/* 如果只写两个，那么就是垂直水平两个方向对称 */

/* 如果只写一个，那就是所有的都是这样 */

padding: 12px 10px 20px 30px;

margin: 20px 20px 0px 3px;

/* border 按照大小、虚实、颜色的顺序来设置参数 */

/* border也有上下左右 */

border-top: 4px solid #0099FF;

border-left: 3px dashed #99FFFF;

}

/* 使用.classname 属性标签的方式指定div里面classname下某属性的css样式 */

.class0 p{

color: green;

}

.class1 p{

color:red;

}

.img-show li{

display: inline;

}

.background1 p{

background-color: pink;

background-image: url(test0background.png);

background-repeat: no-repeat;

background-position: right;

}

.background2 p{

background-color: blue;

background-image: url(test0background.png);

background-repeat: repeat-x;

}

/* 背景图片的简写方式：颜色，图片路径，位置，重复方式*/

.background3 p{

background: green url(test0background.png) right repeat-y;

}

.background1 p{

/* font-family 设置修饰字体从第一个开始第二个备选，以此类推 */

font-family: "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;

/* 使用font-size 设置字体大小 */

font-size: 40px;

/* 使用line-height 设置行高 */

line-height: 100px;

}

input[type="text"]{

width: 220px;

height: 30px;

border: 3px solid #8FACAA;

}

input[type=password]{

border: 3px solid #8FACAA;

}

input[type=submit]{

color: blue;

font-size: 20px;

font-weight: bold;

background-color: pink;

}

/* css的三种选择器 */

h2{

}

.class0 {

}

#id1 {

}

不同css书写方式之间的优先级差异

遵循"越近越重要"原则

优先级从高到低分别为：

在标签处添加CSS属性

在head添加CSS属性

在head链接外部添加CSS属性

不同CSS样式类型也存在优先级差异：

优先级从高到低分别为：

直接添加样式

ID选择器

类选择器

元素选择器

/* 关于默认位置、绝对位置、相对位置的设置 */

.title0 {

position: static;

}

.title1 {

position: relative;

left: -38px;

}

.title2 {

position: absolute;

left: 23px;

}

.title3 {

position: fixed;

top: 500px;

left: 5px;

}

/*block: 会换行，可以设置width height属性，可以设定margin padding属性

inline: 不会换行，不能设定width height属性，margin和padding可以设定left和right，但是不能设定top和bottom

inline-block: 包含了block和inline的双重属性：不会换行，但是可以设定width和height属性

对于block的标签，在进行左右居中的时候，使用auto：*/

h1{

margin: 5px auto 8px auto;

}

/*对于inline和inline-block标签，在进行居中操作的时候，直接使用text-align：*/

input[type=text] {

text-align: center;

}

标签： HTML&CSS

【note】HTML&CSS基础笔记