学习HTML第一周

HTML基本属性
1、 标题<h1></h1>``<h6></h6>
2、 段落<p></p>
3、 强制换行<br>
4、 水平线<hr>
5、 加粗<b></b> <strong></strong>有强调作用
6、 倾斜<i></i> <em></em>有强调作用
7、 上下标<sub></sub> <sup></sup>
eg:
h<sub>2</sub>o
h₂o
8、下划线<u></u>
9、删除线<del></del>
10、列表
无序列表
ul的type属性 属性值：
默认 type=“disc” 小黑圆点
type="square"方形
type=“circle” 空心圆
type=“none” 清除

 <ul type="square">
    <li>列表1 
            <ul>
                <li>11</li>
                <li>12</li>
                <li>13</li>
           </ul>
    </li>
 </ul>

有序列表
ol的type属性 属性值：
默认 type=“1”
type=“A”
type=“a”
type=“i”
type=“I”
start属性 想改变开始的位置

<ol type="i">
            <li>列表</li>
            <li>列表</li>
            <li>列表</li>
        </ol>
        <ol type="i" start="6">
            <li>列表</li>
        </ol>

自定义列表

 <dl>
               <dt>帮助</dt> 
               <dd>找回密码</dd>
               <dd>自助服务</dd>
        </dl>      

11、图像
img标签的属性 scr路径 alt图片错误时显示的文字 width图片宽 height图片高

<img src="../chai1.webp" height="80" alt="图片消失"width="100"  >

12、超链接
a 属性href路径

<a href="D:\qianfeng\class\data0209">点我跳到data0209</a>

13、表单form
属性 action 表单提交的目的地
method="get"默认值
获取数据，用户可以看见数据传送传送数据较小，安全性差
method="post"传送数据 用户看不到传送过程，安全性高，传送数据大

input属性type==text文本框
==password密码框
==submit提交按钮
==reset重置按钮
placeholder提示信息
name 名字 必须书写数据传送接收不到
valu 值

 <form action="" method="">
            <div>
                <input type="text" name="zh" placeholder="输入账号">
            </div>
            <div>
                <input type="password" name="mm" placeholder="输入密码">
            </div>

       </form>

css
行内样式:

<div style="width: 200px; height: 200px; color: blue; "  >我是盒子</div>

内部样式
外部样式
在html文件里建立要修饰的对象
在建立css文件
连接两个文件：
link属于html语法
link在页面面加载时时link和css同时加载

<link rel="stylesheet" href="" type="text/css">

import属于css语法

import在页面加载时先加载html后加载css网速较慢会出现闪烁问题

<style>
        @import url("外部样式.css");
    </style>

选择器整体分为5大类：
基本选择器、层次选择器、伪类选择器、属性选择器、伪对象（元素）选择器
基本选择器：
通配符
常用代码 用于清楚自带边框

*{
            margin: 0px;
            padding: 0px;
        }

class选择器
可以是多个属值

<div class="
    p1">北京著名的高档百货店——赛特购物中心即将闭店</div>。
    <style>
        .p1{
            color: brown;
        }
    </style>

id选择器
只可一个数值

<div id="
    p1">北京著名的高档百货店——赛特购物中心即将闭店</div>。
    <style>
        #id{
            color: brown;
        }
    </style>

层次选择器
1、用于包含结构
后代选择器===空格连接

ul li{
           color: red;
       }

子孙选择器==用>连接

ul>li{
        border: 1px solid green;

2、用于并列结构
相邻选择器==用+连接

 #box+li{
            color: palegoldenrod;
        }

通用兄弟==用~连接
.list~li{ color: orange; }

样式权重
行内样式权重1000>id选择器100#div>class选择器10 .p>类型选择器1 div>通配符0 *>自带样式>继承样式
群组选择器无权重
层次选择器权重算和
不同权重样式作用于同一盒子中权重大的覆盖权重小的
css基本属性
一、文本
font-size=字号
font-color颜色
font-family字体样式
font-weight字体粗细
100-300 细体 用于取消字体加粗效果 b strong h1-h6
400-500正常
600-900粗体

font-style字体倾斜
normal取消em i自带倾斜
oblique斜体字
italic == 倾斜
text-align文本位置
center水平居中
justify水平两端对齐
text-align-last: justify;
对于对行来说是最后一行变两端对齐
line-height：
取值=高度 垂直居中
text-indent：2em;
首行缩进2字符
letter-spacing：10px；
字间距 字母与字母、空格、汉字、符号
word-spacing：10px；
单词和单词之间间距

标题代码：
代码：

<style>
       div{
           width: 500px;
           background-color: white;


       }
       .bt{
           width: 200px;
           height: 50px;
           background-color: #808080;
           color: #ffffff;
           font-size: 25px;
           text-align: center;
           line-height: 50px;

       }
       .p1{
           font-weight: 600;

       }
       .p2{
           color: red;
       }
       p{
           text-indent: 2em;
           font-size: 20px;
       }

  </style>
    <h2 class="bt">千锋简介</h2>
   <p><span class="p1">北京千锋互联科技有限公司（简称千锋）</span> 成立于2011年1月。公司总部位于北京，<span class="p2">目前已在 深圳、上海、郑州、广州、大连、武汉、成都、西安、杭州、青岛、重庆、长沙、哈尔滨、南京、太原</span> 建立分公司。</p>
   <p>千锋旗下现有<span class="p1">教育培训、人才服务、项目研发、创业孵化</span>等业务。 教育培训业务主要为大学生、企业提供技术培训服务；人才服务业务主要为企业提供优秀的互联网研发人才； 项目研发业务主要为企业提供APP解决方案及APP项目研发； 创业孵化业务为有创业梦想的学员设立，为其提供创业辅导及天使投资等服务。</p>
   <p>千锋秉承着<span class="p2">“用良心做教育”</span>  的理念踏踏实实的做事，<span class="p2">创办9年，现已成为业内口碑好、规模大、教学强的移动互联网研发培训机构。</span>目前累计与国内<span class="p1">超过8200多家</span>IT相关企业建立人才输送合作，与<span class="p1">562所大学</span>建立实训就业合作，每年为中国IT企业输送上万名移动开发工程师。计划未来5年内实现年营收过10亿，为中国教育行业贡献一份力量。</p>
</div>