html+css基础教程(笔记)

阅读目录

      • 一、html
          • 1、HTML标题
          • 2、 HTML 段落
          • 3、HTML 文本格式化标签
          • 4、HTML 实体标签
          • 5、超链接
          • 6、HTML图像标记
          • 7、HTML列表元素
      • 二、CSS
          • 1、css样式的三种使用方法
          • 2、CSS 背景样式
          • 3、CSS 的边框

一、html

HTML称为超文本标记语言,是一种标识性的语言。它包括一系列标签.通过这些标签可以将网络上的文档格式统一,使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本,HTML命令可以说明文字,图形、动画、声音、表格、链接等。

1、HTML标题

HTML 标题是通过h标签对进行定义的

<body>
	<h1>这是 1 号标题h1>
	<h2>这是 2 号标题h2>
	<h3>这是 3 号标题h3> 
 	<h4>这是 4 号标题h4> 
	<h5>这是 5 号标题h5>
 	<h6>这是 6 号标题h6>
2、 HTML 段落

HTML 段落是通过p标签对进行定义的

<body>
	<p>这是一个段落p> 
	<p>这是另一个段落p>
3、HTML 文本格式化标签
标签名 含义
b 定义粗体文本
i 定义斜体字
del 定义删除字
ins 定义插入字
sup 定义上标字
sub 定义下标字
abbr 定义缩写
<body>
    <p><b>每天都要加油,忌颓废b>p>
    <p><i>每天都要加油,忌颓废i>p>
    <p><del>每天都要加油,忌颓废del>p>
    <p><ins>每天都要加油,忌颓废ins>p>
    <p><b>每天都要加油,忌颓废b>p>
    <p>H<sub>2sub>Op>
    <p>100<sup>2sup>p><p>
body>

效果:
html+css基础教程(笔记)_第1张图片

4、HTML 实体标签
<body>
    <p>每天都要加油,忌颓废p>
    <p>空格:hello worldp>
    <p>&:hello&worldp>
    <p><:hello<worldp>
    <p>>:hello>worldp>
    <p>":hello"worldp>
    <p>版权符号:hello©worldp>
body>

html+css基础教程(笔记)_第2张图片

5、超链接

超链接内容

属性名 说明
href 用来定义链接跳转的目标对象(一般使用相对地址)
name 用于创建目标端点(锚点)
target 用来定义链接对象显示窗口(_blank、_self、_parent、 _top)
title 用于设置链接提示信息
<body>
    
    <a href="http://www.baidu.com">百度一下a><br>
    
    <a href="http://www.baidu.com">
    <img src="img/baidu.gif" height="38" width="117"/>a><br>
    
    <a href="html实体标签.html">链接到html实体标签.htmla>
body>

html+css基础教程(笔记)_第3张图片

6、HTML图像标记

html+css基础教程(笔记)_第4张图片

<body>
    <img src="img/image.jpg"/>
    
    <img src="images.jpg" alt="忌颓废logo"/>
    
    <img src="img/image.jpg" title="忌颓废logo"/>
    
    <img src="img/image.jpg" height="300" width="300"/>
body>

html+css基础教程(笔记)_第5张图片

7、HTML列表元素
<body>
    
    <ul>
        <li>编程语言
            <ol>
                <li>pythonli>
                <li>javali>
                <li>cli>
            ol>
        li>
    ul>
    <ul>
        <li>编程语言
            <ul>
                <li>pythonli>
                <li>javali>
                <li>cli>
            ul>
        li>
    ul>
    
    <ol start="4">
        <li>pythonli>
        <li>javali>
        <li>cli>
    ol>
    
    <ol start="4" reversed>
        <li>pythonli>
        <li>javali>
        <li>cli>
    ol>
    
    <dl>
        <dt>pythondt>
        <dd>Python是一种解释型脚本语言dd>
        <dt>javadt>
        <dd>java是一门面向对象编程语言dd>
    dl>
body>

html+css基础教程(笔记)_第6张图片

二、CSS

CSS,层叠样式表(英文全称:Cascading Style Sheets)是一种 用来表现HTML等文件样式的计算机语言

1、css样式的三种使用方法
  • 链接样式
  • 嵌套样式-
  • 行内样式
<head>
	
	<link rel="stylesheet" href="style.css">
	 
    <style type="text/css">
        .p1{color: blue}
        #p2{color: green}
    style>
head>
<body>
	 
    <p style="color:red;font-weight: bold">每天都要加油,忌颓废p>
    <p class="p1">准备和努力不会背叛你p>
    <p id="p2">总会熬过去的,你要加油p>
body>

html+css基础教程(笔记)_第7张图片

2、CSS 背景样式
属性名
background-color 为元素设置背景色
background-image 把图像设置为背景
background-repeat 设置背景图片的平铺方式
background-attachment 设置背景图像是否随页面滚动
background-position 设置背景图片的起始位置

background 复合属性
html+css基础教程(笔记)_第8张图片

<head>
    <style type="text/css">
        body{
            /*background-color: blue;*/
            background-image: url("zd.jpg");
            background-repeat: no-repeat;
            /*随页面滚动而滚动*/
            /*background-attachment: scroll;*/
           /*背景图片固定*/
            background-attachment: fixed;
        }
    style>
head>
<body>
    <p>原来长大是种慢性告别p>
body>

html+css基础教程(笔记)_第9张图片

3、CSS 的边框

1、边框样式:border-style
边框样式,也就是 border-style,它是边框最重要的一个方面,这不仅仅是因为样式 控制着边框的显示风格,而是因为如果没有设定样式,将根本没有边框,或者说元素是默认 没有边框的。 CSS 的 border-style 属性定义了 10 个不同的非 inherit 样式,这其中也包括 none,就是无边框

样式
none 无边框
hidden 隐藏边框
dotted 虚线边框1
dashed 虚线边框2
solid 实线边框
double 双边框
groove 凹槽边框
ridge 垄状边框
inset 嵌入边框
outset 外凸边框
<head>
    <style type="text/css">
        p{
            border-style:solid ;
            border-top-width: 5px;
            border-right-width: 2px;
            border-bottom-width: 5px;
            border-left-width: 2px;
            border-color: blue;
        }
    style>
head>
<body>
    <p>每天都要加油,忌颓废p>
body>

在这里插入图片描述
2、边框宽度
我们可以通过 border-width 属性为边框指定宽度。为边框指定宽度有两种方法:  可以指定长度值,比如 2px 或 0.1em;  还有一种方法是使用下面 3 个关键字之一,它们分别是 thin 、medium 和 thick,其中 medium 是默认值 我们也可以单独设定边框的每一条边的宽度。
html+css基础教程(笔记)_第10张图片
html+css基础教程(笔记)_第11张图片

更新中……

你可能感兴趣的:(html+css基础教程(笔记))