HTML+CSS基础

html

html是一种超文本标记语言 hyper text markup language

俗称网页

文件名字后缀必须是 *.html 或者 *.htm

html的形式如下:

<html>
    <head> 
        子标签
    </head>
    <body> 
        子标签
    </body>
</html>

1. head 中的常见标签

<title>网页标题</title> <!--该标签表示是网页的标题-->
<meta charset="字符编码"> <!--该标签告诉浏览器请用这个字符串编码显示网页内容-->

<script></script>    <!--用来包含网页的脚本-->
<link>       <!--用来包含外部的样式表-->

<title>网页标题</title> <!--该标签表示是网页的标题-->
<meta charset="字符编码"> <!--该标签告诉浏览器请用这个字符串编码显示网页内容-->

<script></script>    <!--用来包含网页的脚本-->
<link>       <!--用来包含外部的样式表-->

 

2. body 中的标签

1) 标题标签

        <h1>1号标题</h1>
        <h2>2号标题</h2>
        <h3>3号标题</h3>
        <h4>4号标题</h4>
        <h5>5号标题</h5>
        <h6>6号标题</h6>

1号标题最大往后越来越小

2) 正文标签

段落标签: <p>

换行标签: <br>

分割线标签: <hr>

注意: html中特殊文字需要转义 如:

<

&lt;

>

&gt;
空格&nbsp

具体转义可以在网上搜

3) 超链接标签

<a href="链接地址">链接文字</a>

<img src="图片地址" width="宽度" height="高度"> 宽度和高度的单位都是像素

<a href="链接地址"> <img src="图片地址"> </a> 让图片具有超链接的功能

页面内的链接(锚)

首先在目的地标签添加 id="唯一编号", 然后在超链接的 href="#唯一编号"

4) 列表标签

有序列表

<ol>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
</ol>

无序列表

<ul>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
</ul>

5) 表格标签(重点)

<table>
    <thead></thead> <!-- 头 -->
    <tbody> <!-- 体 -->
        <!-- tr 代表行 -->
        <tr> 
            <!-- td 代表列 -->
            <td></td>
            <td></td>
        </tr>  
    </tbody>
    <tfoot></tfoot> <!-- 脚 -->
</table>

6) 表单标签(重点)

接收用户的输入

<!-- 把填写的信息收集起来发送给服务器
        有name属性的表单,会把信息发送给服务器
-->
<form action="http://www.baidu.com">
    文本框 <input type="text" name="username">
    <br>
    密码框 <input type="password" name="password">
    <br>
    按钮 <input type="button" value="点我">
    <br>
    单选框 <!-- name 用来给单选框分组 checked 表示默认勾选-->
    男 <input type="radio" name="sex" value="男"> 女 <input type="radio" name="sex" checked value="女">
    <br>
    多选框
    唱歌 <input type="checkbox" name="hobby" checked value="1">
    跳舞 <input type="checkbox" name="hobby" value="2">
    游戏 <input type="checkbox" name="hobby" value="3">
    睡觉 <input type="checkbox" name="hobby" value="4">
    <br>
    <input type="file">
    <br>
    <input type="date" value="2018-12-30">

    <br>
    <input type="submit" value="提交">
    <input type="reset" vlaue="重置">
</form>

7) iframe

内嵌另一个页面

<iframe src="http://www.baidu.com" width="100%" height="500"></iframe>

 

css

层叠(级联)式样式表

cascade style sheet

用来美化html网页的

颜色相关的样式:

前景色

color: 单词
       rgb(红色, 绿色, 蓝色)  范围从 0~255
       16进制值  格式 `#红绿蓝` 范围从 0~FF       
       rgba(红色, 绿色, 蓝色, 0.0~1.0)
       特殊取值
       白色 rgb(255,255,255)
       黑色 rgb(0,0,0)

背景色:

background-color:颜色

背景图:

background-image:url(图片地址)
background-repeat: no-repeat(不重复) repeat-x repeat-y 在哪个轴上重复

盒子模型

margin 外间距
    margin-left
    ...
border 边框
    border-left    边框宽度 边框线类型 边框颜色
    ...
padding 内间距
    padding-left 左
    padding-right 右
    padding-top 上
    padding-bottom 下

定位方式

div 
position: absolute;  /*绝对定位*/
坐标的原点在左上角
left:  x 轴的坐标 
top:   y 轴的坐标
z-index z 轴坐标 取值越大,越靠上

width: 宽度
height: 高度

字体相关

font-size : 字体大小
font-family: 字体种类 (电脑上事先需要有这个字体)
font-style:italic; 倾斜
font-weight: bold; 加粗
text-decoration: line-through 贯穿线
text-decoration: underline  下划线

显示隐藏

## 显示隐藏
display: none;  隐藏
display: block; 显示

样式表

样式表,定义一个有名称的样式,标签内可以根据名称引用

名字的叫法: 选择器(selector)

 

类选择器 :

.名字 之后使用标签的 class="名字引用"

.c1{ color: black;background-color: chartreuse}

id选择器 :

根据标签的id属性来进行匹配

#id值 之后使用标签的 id="id值"

#p1{color: red;background-color: brown}

元素选择器 :

根据标签的名字进行匹配

span{color: blue;background-color: aliceblue}

优先级: 如果不同的选择器匹配到了同一个元素,

* style属性定义的样式最高,id选择器优先级次之,类选择器次之,元素选择器最低,

* 同级选择器,后定义的优先

* 可以用 !important 改变优先级,可以把优先级提升到最高

父子选择器 :

找到一个p标签,并且它的父标签必须是div

div>p {color:red;}

格式:

父标签>子标签

祖先后代选择器:

格式:

祖先标签 后代标签

伪类选择器

按钮 鼠标移入改变样式,鼠标移除还原
:hover 移入
:first 匹配选中的第一个
:last 匹配选中的最后一个
:focus 获取焦点时

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值