html入门

html注释

1. html文档类型声明,告诉浏览器当前的html文档的版本
2. 保证不乱码 默认
3.标签上可以添加属性,属性可以帮助更完善的显示标签
空格后添加属性
属性名= ‘属性值’ “” 属性值放在一对引号中
4.标签的分类:
单标签 | 自闭和标签
双标签 | 闭合标签
head标签对中的内容是给浏览器看的
body标签对中的内容是给用户看的
注意:学习html就是学习不同的标签,标签的作用,标签的使用,标签的特点,属性,属性值

标签:
行内元素 : 宽度有自身的内容撑起来,可以和其他行内元素同行显示
不能使用css样式设置宽高
行内元素+文本
块元素 : 本身独占一行,前后换行
所有的块元素都可以添加一个属性 align 其中内容在块元素中对其方式
left 左对齐 right 右对齐 center中间对齐
块元素可以设置宽高
嵌套行内元素+快元素+文本

常用的标签:
1.a超链接标签
href 连接地址
网络上的地址 绝对地址
本地地址 相对地址
target 打开方式
_self 本页面 默认
_blank 新页面打开
title 当鼠标悬停在页面上时候显示的提示字
2.a锚链接
在中的任意一个位置定点,当点击某个a标签的时候,跳转到页面中的某一个位置
定点:在标签中添加一个属性 id
a: href属性值为: #+定义的id属性值
3.p 段落标签
内容正常显示,前后换行
4.div 块
内容正常显示,前后换行
5.h1~h6 标题标签
按照权重不同,字体大小以此减小
特点: 独占一行 ,字体加粗

<h1>h1</h1>
<h2>h2</h2>
<h3 align="right">h3</h3>
<h4>h4</h4>
<h5 align="center">h5</h5>
<h6>h6</h6>
我是body中的内容
<p align="center">我是p标签</p>
<a href="#bottom">去底部</a>
<a href='haha.html'>哈哈</a>
<a href="http://www.baidu.com" target="_blank" title="百度一下,你就知道">baidu</a>
<div>我是一个div块元素</div>

常用标签

1.span 行内元素 帮助显示不同的样式
2.img 图像标签
src 图像地址 绝对地址 相对地址
进入某个路径 /
回到上一层路径 …/
3.列表:
有序 ul
无序 ol
列表项标记 li
注意:列表中直接子元素只能是li标签,li中可以嵌套任意标签
在列表标签上添加一个属性 type属性

4.表格标签
table 表格
先有行,才有列,内容要放在单元格中
tr 行
th 表格头单元格 居中加粗
td 表格体单元格
属性:
border 变框宽度
width 表格width
height 表格高度
bordercolor 变框颜色
rowspan 跨行
colspan 跨列

<p style="color:pink;">我是一个<span style="color:deeppink;">粉</span>刷匠,<span style="color:deeppink;">粉</span>刷本领强</p>
    <img src="https://shsxt.shsxt.com/2019/1101/20191101061047469.jpg" alt="">
    <img src="img/hehe.jpg" alt="">
    <h3>我爱吃的水果:</h3>
    <ul type="circle">
        <li>车厘子</li>
        <li>冰葡萄</li>
        <li>草莓</li>
        <li>醋</li>
        <li>
            <h3>这是不爱吃的:</h3>
            <ol type="a">
                <li>香菜</li>
                <li>香菜</li>
                <li>香菜</li>
            </ol>
        </li>
    </ul>

    <table border="1px" width="500px" height="350px" bordercolor="green" align="center">
        <tr>
            <th colspan="6">课程表</th>
        </tr>
        <tr>
            <th></th>
            <th>星期一</th>
            <th>星期二</th>
            <th>星期三</th>
            <th>星期四</th>
            <th>星期五</th>
        </tr>
        <tr  align="center">
            <td rowspan="3">上午</td>
            <td>体育课</td>
            <td>体育课</td>
            <td>体育课</td>
            <td>体育课</td>
            <td>体育课</td>
        </tr>
        <tr>
            <td>体育课</td>
            <td>体育课</td>
            <td>体育课</td>
            <td>体育课</td>
            <td>体育课</td>
        </tr>
        <tr>
            <td>体育课</td>
            <td>体育课</td>
            <td align="right">体育课</td>
            <td>体育课</td>
            <td>体育课</td>
        </tr>
        <tr>
            <td rowspan="2">下午</td>
            <td>体育课</td>
            <td>体育课</td>
            <td>体育课</td>
            <td>体育课</td>
            <td>体育课</td>
        </tr>
        <tr>
            <td>体育课</td>
            <td>体育课</td>
            <td>体育课</td>
            <td>体育课</td>
            <td>
                <ul>
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                </ul>
            </td>
        </tr>

常用表单

表单元素 form标签 -------html中重点
属性
action 表单中数据发送的位置
method 提交方式
get 默认
post
enctype 注意: 一般不用修改属性的值 如果表单中有文件上传,需要修改的multipart/form-data
表单元素|表单域
大部分的表单元素都是通过一个标签定义的input 的type属性值的不同,决定表单元素不同的作用
input的type属性
text 普通文本框
password 密码框 加密
radio 单选框
一组的单选框只能选择一个 name 属性值相同
checkbox 多选框
默认选中 checked
file 文件上传 修改enctype值multipart/form-data
submit 提交
button 按钮 结合js使用
reset 重置
textarea : 多行文本框
select 下拉列表
下拉列表选项 option
默认选中 selected
button 标签 type属性 submit 默认 button reset
属性:
name 一个想要收集元素的,并具有提交能力的表单元素,必须定义name属性,后台用来区分前台的唯一
placeholder 提示字
autofocus 自动获取焦点
disabled 禁用 不能修改不能提交
readonly 只读 不能修改能提交

 <h2>相亲信息表</h2>
    <hr>
    <form action="" method="post" enctype="multipart/form-data">
        <p>
            员工姓名: <input type="text" name="username" value="张三" disabled>
        </p>
        <p>
            银行卡密码: <input type="password" name="upwd" value="123" readonly>
        </p>
        <p>
            性别:
            <input type="radio" name="gender" value="man" checked> 男
            <input type="radio" name="gender" value="woman"> 女
        </p>
        <p>
            兴趣爱好:
            <input type="checkbox" name="hobby" value="code"> 敲代码
            <input type="checkbox" name="hobby" value="study"> 学习
            <input type="checkbox" name="hobby" value="money" checked> 挣钱
            <input type="checkbox" name="hobby" value="cook"> 做饭
        </p>
        <p>
            生活照(素颜照):
            <input type="file" name="photo">
        </p>
        <p>
            交友宣言:
            <textarea name="info" placeholder="我喜欢有钱的...."></textarea>
        </p>
        <p>
            家乡:
            <select name="hometown">
                <option value="1">香港</option>
                <option value="2">张家港</option>
                <option value="3" selected="selected">鹤岗</option>
            </select>
        </p>
        <p>
            <input type="date" name="birthday">
        </p>
        <p>
            <input type="submit" value="submit">
            <input type="button" value="button" onclick="alert('哈哈哈哈!!!!')">
            <input type="reset" value="reset">
            <button>提交</button>
            <button type="button">按钮</button>
            <button type="reset">重置</button>
        </p>
    </form>

css入门

快速入门css
css 层叠样式表
1.如何定位元素
选择器:选中某个元素或者某些元素
基础选择器|常用的
2.如何使用css语法添加样式
css的使用方式
目的: 为某个|某些元素设置样式
样式: 样式名 : 样式值;
行内样式表: 只作用当前元素
标签上添加一个属性style = “css样式1;样式2;…”
内部样式表: html页面内部
在内部head标签中添加一个style标签对,css样式添加到标签对中
外部样式表
在外部定义一个css文件,在使用的html页面中引入这个css文件
3.样式的分类 : 常用的样式
尺寸
背景样式
文本样式
浮动
定位
盒子模型

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--内部样式表-->
    <!--<style>
        p{
            background:green;
            width:200px;
            height: 200px;
            font-family: "华文行楷";
            font-size:30px;
            color: white;
        }
    </style>-->
    <!--引入外部样式表-->
    <link rel="stylesheet" href="css/first.css">
</head>

 <!--行内样式表 :只作用当前元素-->
    <div style="background:red;width:200px;height: 200px;">跳钢管舞的兔子</div>
    <p>奔跑的肉包子</p>
    <p>奔跑的菜包子</p>
    <span>我是span</span>
    <a href="#">a标签</a>

基础选择器: 选中某个|些元素

****** #id选择器 :根据元素的id属性值,匹配到一个元素
元素的id属性->身份证号,唯一,一个页面只有一个相同的值
******** .class选择器:通过元素class属性值,匹配一个或一组元素
元素的class属性 值可以重复,可以添加多个值

***** 元素选择器:根据标签名匹配到个或一组元素
* 通配符:匹配所有元素
清除浏览器的默认样式|初始页面所有元素的样式
清除浏览器的默认样式
*{
padding:0;
margin:0;
}
后代选择器
选择器1 选择器2{} 选中这个父元素中的这个子元素
群组选择器: 通过这些选择器匹配的元素全部选中
选择器1,选择器2…{
}

<head>
    <meta charset="UTF-8">
    <title>选择器</title>
    <style>
        *{
            padding:0;
            margin:0;
        }
         #div2{
             color: yellow;
         }
        /*class选择器*/
        .cyan{
             color: cyan;
        }
        .p1{
            background: pink;
        }

        #box p{
            font-size: 50px;
        }
        
        ol li{
            background: olive;
        }

        /*群组选择器*/
        #div2,#box,.cyan,ul{
            font-weight: 700;
            color: #96b97d;
            color: rgb(150,180,125);
        }

    </style>

  <div>div1</div>
    <div id="div2">div2</div>
    <div class="cyan">div3</div>
    <p class="cyan p1">p1</p>

    <div id="box">
        <p>hahahahaha</p>
    </div>

    <ul>
        <li>ul1</li>
        <li>ul2</li>
    </ul>
    <ol>
        <li>ol1</li>
        <li>ol2</li>
    </ol>
    <ol>
        <li>ol3</li>
        <li>ol4</li>
    </ol>

display 控制元素的特性
块元素 : block
自己独占一行,可以设置块高
行内元素 : inline
宽度由内容撑起来,不可以设置宽高
行内块: inline-block
又可以设置宽高,又可以和其他行内元素|文本一样显示
元素消失 none
浮动:可以让块元素一行显示
元素一旦浮动, 不占父元素高度
float: left right
使用清除浮动的目的: 让后面元素给浮动元素让出位置|让浮动元素在文档流中占位
清除浮动: clear :
left 我这个元素的左边不能有浮动元素
right 我这个元素的右边不能有浮动元素
both 我这个元素的两边不能有浮动元素
盒子模型
盒子模型:内容+ 内边框+ 变框+ 外边距
padding 内边距 内容会默认延伸到内边距上
宽高,内容的显示都会在内容部分显示,内边距上无法显示具体内容|子元素
margin 外边距
内外边距都可以设置多个值 1个值 四边都是相同的
2个值 上下 左右
三个或者四个 上 右 下 左(如果三个值,左边和右边相同)
通过盒子模型,控制元素内部样式的显示|元素和元素之间的距离显示
定位:
position 定位 结合方向值一起使用
子父级定位
为父级身上设置 position:relative
为子集设置 position:absolute
固定定位 fixed
相对于浏览器窗体定位 固定在窗体的某一个位置不变