2022-07-09 day02 第一小组 王鸣赫

####[toc]
####HTML
html：文档的根标签
head：头，标签处。
title：适配搜索引擎。meta charset=utf-8
link：链接css的，引入css样式
style：定义css样式
script：定义js，也可以引入js
body：身体。目前来说在网页上看见的所有的东西都是body里的

#####超级链接：a

点击查看代码

普通链接<a href="html02.html" target="" title="x">go<a/><br>
        http
        ../返回上一级目录
target目标 blank新窗口打开   self当前打开   parent top 在父容器  顶级父容器打开   title鼠标悬停出现的文字
图片链接<a href="html02.html"><img src="IMG/"><BR>
    锚记链接跳转到指定位置

#http地址（完整域名）:带有http或https的完整网址 默认的方式去到当前项目下某一个页面（地址） ../：返回上一级目录 ./：当前目录（不需要写） target：目标。怎么打开目标地址 _blank：在新窗口打开 _self：在当前窗口打开（默认） _parent、_top：在父容器（顶级父容器）打开 title：标题，当鼠标悬停在标签上出现的提示文字 图片：img src：图片的路径 height、width：宽和高（尽量指定一个属性，等比例缩放） title： alt：图片无法正常加载的提示文字 align：对齐方式

####标签

点击查看代码

 /* 根据标签命名 */
        /* 标签选择器，可以让p标签显示对应样式 */
        p{
            background-color: blueviolet;
        }
        /* 生成样式起名 类选择器  优先级高于标签  */
        .bg {
            background-color: bisque;
        }
        /* id选择器  了解  */
        #xx {
            background-color: aquamarine;
        }

引入

点击查看代码

    <!-- 引入外部 -->
    <link rel="stylesheet" href="css/my.css">

#字体

点击查看代码

    /* 字体大小 */
            font-size: 100px;
            /* 样式 */
            font-family: 宋体;
            /* 行高 */
            line-height: 200px;
            /* 粗细 */
            font-weight: bold;
            /* 修饰 */
            text-decoration: underline;

####背景

点击查看代码

 height: 200px;
            width: 200px;
            /* 背景颜色 */
            background-color: beige;
            /* 图片 */
            background-image: url();
            background-repeat:
            /* 简写 */

框架：ifream
src：目标页面的路径

转义字符（实体）：
<> &copy.....

---

水平分割线

表单元素：提交数据
form：
action：数据的提交地址

####注释：

提交和重置按钮，只能控制和他们在同一个form标签内的元素

所有的文本框的内容都是它的value属性

前后端交互的事情，
浏览器开发者工具的使用

####id：每个HTML元素的唯一（不能重复）标识

表单提交的数据格式：username=admin等号左边是表单元素的name属性，右边是表单元素的value属性

method：
get：提交的数据都会显示在地址栏，不安全，地址栏长度是有限制的。
post：提交的数据是不显示在地址栏，封装一个请求体，长度也没有限制了。

分为两大类：
1、行级元素：不能自己换行。
2、块级元素：可以自己换行。

####随堂练习

点击查看代码

<table width="600" align="center">
        <caption><h4>青春不常在</h4></caption>
            <tr>
                <td> 性别：</td>
                <td>
                    <input type="radio" name="sex" checked>男
                    <img src="inages/man.jpg">
                    <input type="radio" name="sex"/>女
                    <img src="inages/women.jpg" >
                </td>
            </tr>

            <tr>
                <td> 生日</td>
                <td>
                    <select>
                        <option >--请选择年--</option>
                        <option >1999</option>
                        <option >2000</option>
                        <option >2001</option>
                    </select>
                    <select>
                        <option >--请选择月--</option>
                        <option >1999</option>
                        <option >2000</option>
                        <option >2001</option>
                    </select>
                    <select>
                        <option >--请选择日--</option>
                        <option >1999</option>
                        <option >2000</option>
                        <option >2001</option>
                    </select>

                </td>
            </tr>            

            <tr>
                <td>所在地区 </td>
                <td>
                    <input type="text" placeholder="填写所在区"/>
                </td>
            </tr>
            <tr>
                <td> 婚姻状况</td>
                <td>
                    <input type="radio" name="marry" checked>未婚
                    <input type="radio" name="marry" >已婚
                    <input type="radio" name="marry" >离婚
                </td>
            </tr>
            <tr>
                <td>学历 </td>
                <td>
                    <input type="text" placeholder="幼儿园">
                </td>
            </tr>
            <tr>
                <td> 月薪</td>
                <td>
                    <input type="range"  max="10000" min="100">
                </td>
            </tr>
            <tr>
                <td>手机号码 </td> 
                <td>
                    <input type="tel" >
                </td>
            </tr>
            <tr>
                <td>昵称</td>
                <td><input type="text"></td>
            </tr>
            <tr>
                <td>喜欢类型</td>
                <td>
                    <input type="checkbox" nam="love" >妩媚的
                    <input type="checkbox" nam="love" >妖娆的
                    <input type="checkbox" nam="love" >性感的
                    <input type="checkbox" nam="love" >老的
                    <input type="checkbox" nam="love" >年轻的
                </td>
            </tr>
            <tr>
                <td>自我介绍</td>
                <td>

                </td>
            </tr>
            <tr>
                <td></td>
            </tr>
            <tr>
                <td></td>
            </tr>

   </table>

已全部掌握

心得体会
第一天的学习不是很能适应，早日适应。