初学html&&css

html总结

基本标签

段落:

标题:

超链接:标签

超链接放在herf属性中,title属性是鼠标放在超链接时的效果,target属性值为_blank时在新窗口打开网页

<a href="https://chenyunxin.cn" title="我的博客" target="_blank">超链接a>

图片:

后面可以添加width和height属性,分别确定img的宽和高,可以为像素或者百分比。

<img src="https://cdn.jsdelivr.net/gh/1999cyx/cdn/img/custom/cloudYun.jpg" height="100" width="100" />
<img src="https://cdn.jsdelivr.net/gh/1999cyx/cdn/img/custom/cloudYun.jpg" height="50" width="50" />

换行:

结构标签

HTML标签:

文档头部:

文档标题:

文档主体:

网页的基本结构:


<html>
    <head>
        <meta charset="UTF-8">
        <title>标题title>
    head>
    <body>

    body>
html>

css资源文件一般放在标签中,js资源文件一般放在标签最后

文本格式

标记:

删除线:或者

下划线:或者

小字号:

加粗:或者

倾斜:

<p>文本格式<mark>格式mark>p>
<p><del>文本格式del>p>
<p><s>文本格式s>p>
<p><ins>文本格式ins>p>
<p><u>文本格式u>p>
<p><small>文本格式small>p>
<p><strong>文本格式strong>p>
<p><b>文本格式b>p>
<p><em>文本格式em>p>

表格

  1. 用来显示数据或者某些特殊信息

  2. 用法:

    <table>
        <tr>
            <th>这是表头th>
        tr>
        <tr>
            <td>这是一个单元格td>
            ...
        tr>
        ...
    table>
    

    表示行, 表示行中的单元, 是表头的单元

列表

  1. 无序列表

    可以使用无序列表做导航栏

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

    列表项

  2. 中可以是其它任何元素;无序列表中各项之间没有级别之分。

  3. 有序列表

    和无序列表基本一致

    <ol>
        <li>1li>
        <li>2li>
        <li>3li>
        ...
    ol>
    

div盒子

div标签是没有语义的,它们就是一个盒子,用来装内容的。

特点:div 标签用来布局,但是现在一行只能放一个div,是独占一行的大盒子

CSS总结

引入CSS

  1. 内联样式

    在标签内使用style属性

    <img src="https://cdn.jsdelivr.net/gh/1999cyx/cdn/img/custom/cloudYun.jpg" style="width:100px;heigth:100px" />
    
  2. 内部样式

    在head标签中添加style标签,引入css代码

    <style>
    	img{
    		width:100px;
    		heigth:100px
    	}
    style>
    <img src="https://cdn.jsdelivr.net/gh/1999cyx/cdn/img/custom/cloudYun.jpg" style="width:100px;heigth:100px" />
    
  3. 外部样式

    将css代码在css资源文件中,在head标签中引入css文件

    引入同目录下的test.css

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

选择器

有两种选择器:id选择器和类选择器

id选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 “#” 来定义。

在标签中定义id选择器名为:testid

<某标签 id="testid">

编写testid属性代码

#testid {

}

类选择器

class 选择器用于描述一组元素的样式,class 选择器有别于id选择器,class可以在多个元素中使用。

class 选择器在HTML中以class属性表示, 在 CSS 中,类选择器以一个点"."来定义。

在标签中定义类选择器名为:testclass

<某标签 id="testclass">

编写testclass属性代码

#testclass {

}

基本属性

文本

文本内容 css属性
颜色 color
对其方式 text-align
行高 line-height
字体大小 font-size

背景

background:可以为颜色背景,也可以是图片背景,添加图片url就位图片背景

尺寸

width:宽度

height:高度

可以是像素,也可以是百分比

盒子模型

margin:外边距

padding:内边距

你可能感兴趣的:(初学html&&css)