html 、css基础

最新推荐文章于 2024-07-25 11:52:08 发布

mordor__

最新推荐文章于 2024-07-25 11:52:08 发布

阅读量880

点赞数

分类专栏：学习笔记文章标签： html css

本文链接：https://blog.csdn.net/mordor__/article/details/70339657

版权

学习笔记专栏收录该内容

8 篇文章 0 订阅

订阅专栏

html

编写一个基本的网页格式

<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<title>Document</title>
</head>
<body>

</body>
</html>

第一行是 文档声明，第二行“<html>”标签和最后一行’</html>’定义html文档的整体，*lang='en'定义网页的语言为英文，
 lang='zh-CN'为中文,不定义也没影响，一般只作为分析统计用,
  <body></boyd> 内编写网页上显示的内容。

HTML文档类型

目前常用的两种文档类型是xhtml 1.0和html 5

xhtml 1.0

xhtml 1.0是html5之前的版本，快捷创建方法：
html：xt + tab键

这里写图片描述
html5

快捷创建方法：
html：5 + tab键或！ + tab键
这里写图片描述

html标题

通过<h1><h2><h3><h4><h5><h6>,标签可以在网页定义6种级别的标题。
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>

这里写图片描述

html段落、换行、字符实体和注释

段落
在网页里编写一段内容：

<p>
    心若没有栖息的地方，在哪里都是在流浪。
</p>

换行

<br>

注释

<!-- 在段落前想缩进两个空格，使用空格的字符实体：&nbsp； -->
<p>
    &nbsp;&nbsp;一个html文件就是一个网页，html文件用编辑器打开显示的是文本，可以用文本的方式编辑它，<br>
如果用浏览器打开，浏览器就会按照标签描述内容将文件渲染成网页，<br>
显示的网页可以从一个网页链接跳转到另一个网页。 

</p>

这里写图片描述
字符实体

在网页上显示‘<’和‘>’会误认为是标签，可以使用它们的字符实体，例如：

<!--  '<'和'>'的字符实体为 &lt； 和 &gt； -->
<p>
    2 &lt; 3 <br>
    5 &gt; 4
</p>

这里写图片描述

html图像、相对路径和绝对路径

html图像

<img>标签可以在网页上插入一张图片，它是独立使用的标签，通过‘src’属性定义图片地址，
通过‘alt’属性定义图片加载失败时显示的文字，以及对搜索引擎和盲人读屏软件的支持。
<img src="http://www.wmpic.me/wp-content/
uploads/
2014/01/20140122155945433.jpg" alt = "无法加载！请重试！">

绝对路径和相对路径

绝对路径：相对于磁盘的位置去定位文件的地址。
相对路径：相对于引用文件本身去定位被引用的文件地址。

绝对路径

<img src="http://www.wmpic.me/wp-content/
uploads/
2014/01/20140122155945433.jpg" alt = "无法加载！请重试！">

相对路径
绝对路径地址在整体文件迁移时会因为磁盘和顶层目录的改变而找不到文件，
相对路径就没有这个问题。

<img src = "./xiamu/xiamu.jpg" alt = "无法加载！请重试！">

html链接

html的超链接

建立一个超链接

<!DOCTYPE html>
<html lang='en'>    
<head>
    <meta charset='UTF-8'>
    <title>Document</title>
</head>
<body>
    <p>
        开店大酬宾，优惠多多<br>
        <a href="https://www.tmall.com">点击了解</a>
    </p>

</body>
</html>

这里写图片描述

将一个图片作为一个超链接

<!DOCTYPE html>
<html lang='en'>    
<head>
    <meta charset='UTF-8'>
    <title>Document</title>
</head>
<body>

    <P>
    夏木友人帐 <br>

   <a href="http://image.baidu.com"target=self><img src = "./xiamu/xiamu.jpg"
    alt = "无法加载！请重试！"></a>

    </P>


</body>
</html>

这里写图片描述
点击网页图片就可跳转到百度图片首页

a和href属性

1 .  html 用<a>来表示超链接，英文叫anchor。
2 .  <a>可以指向任何一个文件源： 一个html网页，一个图片，一个影视文件等，用法：
    <a href='网址'>链接的显示文字</a>
3 .  点击<a>...</a>当中的内容，即可打开一个人链接文件，href 属性则表示这个链接文件的路径。

target属性

<!DOCTYPE html>
<html lang='en'>    
<head>
    <meta charset='UTF-8'>
    <title>Document</title>
</head>
<body>

    <P>
    夏木友人帐 <br>

    <!-- target的属性值设为 blank，点击链接，网页就会新开一个窗口出现 -->

   <a href="http://image.baidu.com"target="blank">百度图片</a>

    <!-- target的属性值设为 self，点击链接，网页会在原窗口出现 -->

    <a href="http://image.baidu.com"target=self>百度图片</a>

    </P>
</body>
</html>

使用target属性，可以选择新开一个窗口或原窗口里打开链接文件。

title属性

1 .  使用title 属性，可以让鼠标悬停在超链接上的时候，显示该超链接的文字注释。
     <a href='http://www.itheima.com/' title='神秘网站'>...</a>
2 .  如果希望注释多行显示，可使用 &#10； 作为换行符。
     <a href='http://www.itheima.com/' title='神秘网站&#10；异常神秘'>...</a>

<!DOCTYPE html>
<html lang='en'>    
<head>
    <meta charset='UTF-8'>
    <title>Document</title>
</head>
<body>

    <P>
    夏木友人帐 <br>

    <a href="http://image.baidu.com"target=self><img src = "./xiamu/xiamu.jpg"
     alt = "无法加载！请重试！"></a>


    <a href="http://image.baidu.com"title="夏木友人帐"> <img src = "http://www.wmpic.me/
    wp-content/uploads/2014/01/20140122155945433.jpg" 
        alt = "无法加载！请重试！"></a>


    <a href="http://image.baidu.com"title="夏木友人帐&#10; 治愈动漫"> <img src = "http://www.wmpic.me/wp-content/
    uploads/2014/01/20140122155945433.jpg" 
        alt = "无法加载！请重试！"></a>

    </P>


</body>
</html>

name属性

name属性同常用于一个大文件的章节目录。
1 .  使用name属性，可以跳转到文件的指定部位
2 .  name属性要设一对。
    一是设定name的名称，
    二是设定一个href指向这个name

<!DOCTYPE html>
<html lang='en'>    
<head>
    <meta charset='UTF-8'>
    <title>Document</title>
</head>
<body>
     <p>
        <a href="#C5">参见第五章</a>
    </p>

        <a name="C1"><h3>第1章</h3></a>
        <p>黑马程序员1</p>
        <br>
        <a name="C2"><h3>第2章</h3></a>
        <p>黑马程序员2</p>
        <br>
         <br>
          <br>
        <a name="C3"><h3>第3章</h3></a>
        <p>黑马程序员3</p>
         <br>
          <br>
        <a name="C4"><h3>第4章</h3></a>
        <p>黑马程序员4</p>
         <br> <br>
        <a name="C5"><h3>第5章</h3></a>
        <p>黑马程序5</p>
         <br> 
          <br>
        <a name="C6"><h3>第6章</h3></a>
        <p>黑马程序员6</p>
         <br>
          <br>
        <a name="C7"><h3>第7章</h3></a>
        <p>黑马程序员7</p>
         <br>
          <br>
        <a name="C8"><h3>第8章</h3></a>
        <p>黑马程序员8</p>


</body>
</html>

这里写图片描述
点击‘参见第五章’就可以跳到第五章

html列表

有序列表

定义一个有编号的内容列表可以用<ol>、<li>配合使用来实现：
<ol>
    <li>列表1</li>
    <li>列表2</li>
    <li>列表3</li>
</ol>

无序列表

定义一个无编号的内容列表可以用<ul>、<li>配合使用来实现：
<ul>
    <li>列表1</li>
    <li>列表2</li>
    <li>列表3</li>
</ul>

这里写图片描述

html表格

table常用标签
table标签：声明一个表格
tr标签：定义表格中的一行
td和th标签：定义一行中的一个单元格，td代表普通单元格，th代表表头单元格

 <table>

            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>籍贯</th>
            </tr>
            <tr>
                <td>六月锦</td>
                <td>21</td>
                <td>男</td>
                <td>四川</td>
            </tr>

table常用属性

border 定义表格的边框
cellpadding 定义单元格内内容与边框的距离
cellspacing 定义单元格与单元格之间的距离
align 设置单元格中内容的水平对齐方式，设置值有： left | center | right
valign 设置单元格中内容的垂直对齐方式， top | middle | bottom
colspan 设置单元格水平合并
rowspan 设置单元格垂直合并

border
定义表格的边框粗细

<!DOCTYPE html>
<html lang='en'>    
<head>
    <meta charset='UTF-8'>
    <title>Document</title>
</head>
<body>

        <table border="1">

            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>籍贯</th>
            </tr>
            <tr>
                <td>六月锦</td>
                <td>21</td>
                <td>男</td>
                <td>四川</td>
            </tr>


</body>
</html>

这里写图片描述

colspan和rowspan

水平和垂直的和并

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
            <table border="1">

            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>籍贯</th>
            </tr>
            <tr>
                <td>六月锦</td>
                <td>21</td>
                <td>男</td>
                <td>四川</td>
            </tr>
             <tr>
                <td >周尅</td>
                <td colspan="2">21</td>

                <td rowspan="2">四川</td>
            </tr>
             <tr>
                <td>冯刚</td>
                <td>20</td>
                <td>男</td>

</body>
</html>

这里写图片描述

html表单

表单常用控件

input type=‘text’：单行文本输入框
input type=‘password’：密码输入框（密码是隐藏的）
input type=‘radio’：单选框
input type=‘checkbox’：复选框
select ：下拉框
textArea ：多行文本输入框
input type=‘submit’：将表单里的信息提交给表单里action所指的文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

    <form action="http://www.xiachufang.con/html/choose.asp" method="post">
        姓名<input type="text" name='点击选择'><br>
        密码<input type="password"><br>
        您的爱好：
                <input type="checkbox">苹果
                <input type="checkbox">香蕉
                 <input type="checkbox">芒果<br>
        您的性别：
                 <input name='s' type="radio">男
                <input name='s' type="radio">女<br>


        <p>
            照片：<input type="file" name='person_pic'>
        </p>
        <p>
            个人描述：
            <textarea name='about'></textarea>
        </p>
        <p>
            籍贯：
            <select name="site">
                <option value="0">四川</option>
                <option value="1">湖南</option>
                <option value="2">湖北</option>
                <option value="3">广西</option>
                <option value="4">广东</option>
                <option value="5">山东</option>
                <option value="6">吉林</option>
            </select>
        </p>

        <p>
            <input type="reset" value="重置"><br>
            <input type='submit' value='提交'>
        </p>

    </form>       
</boyd>
</html>

这里写图片描述

html内嵌框架

<iframe>标签会创建包含另一个html文件的内联框架，src属性来定义另一个html文件的引用地址。

多个页面
此方法已在新版本中废除，在此只做了解

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
        <frameset cols='33%,33%,33%'>
            <frame src='http://www.taobao.com'>
            <frame src='http://www.jd.com'>
            <frame src='http://www.dangdang.com'>
        </frameset>

</html>

这里写图片描述

css

css是Cascading Style Sheets 的首字母缩写，意思是层叠样式表。有了css，html中大部分表现样式的标签就不用了，html只负责文档的结构和内容，表现形式完全交给css，html文档变得更加简洁。

css文本设置

常用的应用文本的样式
color ：设置文本颜色，如 color：red；
font-size：文字大小，如 font-size：12px；
font-family：文字字体，如 font-family：“微软雅黑”；
font-style：文字是否倾斜，如 font-style：“normal”文字不倾斜， font-style：‘italic’；文字倾斜
font-weight：文字是否加粗，如 font-weight：bold；加粗，font-weight：normal；不加粗
font：同时设置文字的几个属性，写的顺序有兼容问题，建议如下顺序写 font：是否加粗字号/行号字体；如 font：normal 12px/36px ‘微软雅黑’；
line-height：文字行高，如 line-height：24px；
test-decoration：文字的下划线，如 test-decoration:none；将文字下划线去掉
test-indent：文字首行缩进，如 test-indent：24px；文字首行缩进24px
test-align：文字水平对齐方式，如 test-align：center；文字水平居中

css颜色值主要有三种表示方法

1、颜色名表示，如 red （红色），gold（金色）
2、rgb 表示，如 rgb（255，0，0）表示红色
3、16 进制数值表示，如 #ff0000 表示红色，这种可简写成#f00

css基本语法

css的定义方法：

选择器{属性：值；属性：值；属性：值；}

选择器是将样式和页面元素关联起来的名称，属性是希望设置的样式属性，每个属性有一个或多个值：

div{
    width:100px;
    height:100px;
    color:red;
}

css页面引入方法

1 . 嵌入式：通过style标签，在网页上创建嵌入的样式表

<style type="test/css">
    div{
        width:100px;
    height:100px;
    color:red;
    ......
}
</style>

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!--<link rel="stylesheet" href="test.css">-->
    <style>
    label{
        color:red;
        font-size: 20px;
        background-color: wheat;
    }
    body{
        background-color:aliceblue;
    }


    </style>


</head>
<body>

    <form action="http://www.xiachufang.con/html/choose.asp" method="post">
        <label>姓名:</label><input type="text" name='点击选择'><br>
        <label>密码:</label><input type="password"><br>
        <label>您的爱好：</label>
                <input type="checkbox">苹果
                <input type="checkbox">香蕉
                 <input type="checkbox">芒果<br>
        <label>您的性别：</label>
                 <input name='s' type="radio">男
                <input name='s' type="radio">女<br>


        <p>
            <label>照片：</label><input type="file" name='person_pic'>
        </p>
        <p>
            <label>个人描述：</label>
            <textarea name='about'></textarea>
        </p>
        <p>
            <label>籍贯：</label>
            <select name="site">
                <option value="0">四川</option>
                <option value="1">湖南</option>
                <option value="2">湖北</option>
                <option value="3">广西</option>
                <option value="4">广东</option>
                <option value="5">山东</option>
                <option value="6">吉林</option>
            </select>
        </p>

        <p>
            <input type="reset" value="重置"><br>
            <input type='submit' value='提交'>
        </p>

    </form>
</body>
</html>

这里写图片描述

2 . 外联式：通过link标签，链接到外部样式表到页面中

<link rel="stylesheet" href="test.css">

新建一个css文件保存，要使用时通过link标签链接
例：

label{
    color:red;
    font-size: 20px;
    background-color: wheat;
}
body{
    background-color:aliceblue;
}

这里写图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <link rel="stylesheet" href="test.css">


</head>
<body>

    <form action="http://www.xiachufang.con/html/choose.asp" method="post">
        <label>姓名:</label><input type="text" name='点击选择'><br>
        <label>密码:</label><input type="password"><br>
        <label>您的爱好：</label>
                <input type="checkbox">苹果
                <input type="checkbox">香蕉
                 <input type="checkbox">芒果<br>
        <label>您的性别：</label>
                 <input name='s' type="radio">男
                <input name='s' type="radio">女<br>


        <p>
            <label>照片：</label><input type="file" name='person_pic'>
        </p>
        <p>
            <label>个人描述：</label>
            <textarea name='about'></textarea>
        </p>
        <p>
            <label>籍贯：</label>
            <select name="site">
                <option value="0">四川</option>
                <option value="1">湖南</option>
                <option value="2">湖北</option>
                <option value="3">广西</option>
                <option value="4">广东</option>
                <option value="5">山东</option>
                <option value="6">吉林</option>
            </select>
        </p>

        <p>
            <input type="reset" value="重置"><br>
            <input type='submit' value='提交'>
        </p>

    </form>
</body>
</html>

这里写图片描述

3 . 内联式：通过标签的style属性，在标签上直接写样式。（基本不用，只做了解）

<body style="width:100px;color:red;">
    ......
</body>

id选择器

通过id名来选择元素，元素的id名称不能重复，所以一个样式设置项只能对应于网页上一个元素，
不能复用，id名一般给程序使用，所以不推荐使用id作为选择器
这里写图片描述

这里写图片描述

类选择器

通过类名来选择元素，一个类可应用于多个元素，一个元素上也可使用多个类，
可复用，是css中应用最多的选择器

.red{
    color:red;
}
.big{
    font-size:20px;
}
.mt{
    margin-top:10px;
}

<label class='red'>...</label>
<h1 class='red big mt'>...</h1>
<p class='red mt'>...</p>

这里写图片描述

mordor__

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
html 、css基础

html编写一个基本的网页格式<!DOCTYPE html><html lang='en'><head><meta charset='UTF-8'><title>Document</title></head><body></body></html>第一行是文档声明，第二行“<html>”标签和最后一行’</html>’定义html文档的整体，*lang='en'定义网页的语言为英文
复制链接

扫一扫