2022-08-22 第八组卢睿学习心得

HTML

前言

HTML是用来描述网页的一种语言。
HTML叫做超文本标记语言（Hyper Test Markerup Language）
HTML不是编程语言，而是一种标记语言，标记语言就是一套标记标签
HTML使用标记标签来描述网页

网页由谁来解析？

浏览器
IE
firefox 火狐 flash中文
safari webkit苹果
chrome webkit blink 谷歌（推荐）
Opera 手机端 blink

HTML标签

通常称为HTML tag
HTML 标签由成对出现的尖括号包围的关键词
HTML 标签通常是成对出现的，与例外，标签对中第一个标签是开始标签，第二标签是结束标签，结束标签是由/结束的
开始和结束标签也被称为开放标签和闭合标签

网页

HTML文档描述的就是网页
HTML文档包含HTML的标签的纯文本
HTML文档就被称为网页

web浏览器的作用是读取HTML文档，并以网页的形式...

HTML头部

head元素包含了所有的头部信息元素
script，link,以及各种meta.title,base

title

定义了浏览器工具栏的标题，当网页被收藏到收藏夹，显示的默认标题
显示在搜索引擎结果页面得到标题

base

描述了基本的链接地址/链接目录，作为HTML文档中所有的....

link

引用css层叠样式表

style

定义css层叠样式表

script

既可以定义script脚本，也可以引用script文件
不建议写在head里，写在body的最下方

html

块级元素

自占一行，自带换行功能
div,h,p,form,ul,ol

<div>文档中的块级元素</div>

行级元素

自己没有换行元素

<span>文档中的行级元素</span>

演示代码

    <b>粗体文本</b>
    <code>计算机代码</code>
    <em>强调文本</em>
    <i>斜体文本</i>
    <kbd>键盘输入</kbd>
    <pre>
        我声音大是因为行得正，
        到哪都是通天大道
    </pre>
    <small>更小的文本</small>
    <strong>重要的文本</strong>
    <del>删除线</del>
    log<sub>5</sub>
    2<sup>3</sup> = 8
    <font color ="green" >我是font</font>

a标签

<a href="http://www.baidu.com" target="_self">百度一下</a>

列表

    无序
    <ul type="disc">
        <li>项目1</li>
        <li>项目2</li>
    </ul>
    有序
    <ol type="I">
        <li>项目1</li>
        <li>项目2</li>
        <li>项目3</li>
        <li>项目4</li>
    </ol>
    自定义
    <dl>
        <dt></dt>
        <dt></dt>
        <dt></dt>
        <dt></dt>
    </dl>

表格

    <table border="1" cellpadding="10" cellspacing="0" width="400">
        <thead>
            <tr>
                <th>学号</th>
                <th>姓名</th>
                <th>联系方式</th>
                <th>毕业院校</th>
                <th>国籍</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1001</td>
                <td>罗永浩</td>
                <td>131131313</td>
                <td>延边二中</td>
                <td rowspan="4">中国</td>
            </tr>
            <tr>
                <td>1002</td>
                <td>罗翔</td>
                <td>12315464</td>
                <td>北京大学</td>
            </tr>
            <tr>
                <td>1003</td>
                <td>樊登</td>
                <td>12354613</td>
                <td>西安交大</td>
            </tr>
            <tr>
                <td>1004</td>
                <td>雷军</td>
                <td>54542131</td>
                <td>武汉大学</td>
            </tr>
        </tbody>
        <tfoot>
            <tr >
                <td colspan="5">备注：他们都很nb</td>
            </tr>
        </tfoot>
    </table>

框架

    <iframe src="http://www.sina.com.cn" height="300" width="300" frameborder="0"></iframe>
    <iframe src="http://lol.qq.com" height="300" width="300" frameborder="0"></iframe>

表单

<!--表单 -->
    <form action="" method="post">
        <p>账户:
            <input type="text">
        </p >
        <p>密码:
            <input type="password">
        </p >
        <p>性别:
            <input type="radio" name="gender" checked>男
            <input type="radio" name="gender">女
        </p >
        <p>地址:
            <select multiple --多选>
                <option value="">请选择省</option>
                <option value="">吉林省</option>
                <option value="">北京市</option>
            </select>
            <select >
                <option value="">请选择市</option>
                <option value="">长春市</option>
                <option value="">北京市</option>
            </select>
            <select >
                <option value="">请选择区</option>
                <option value="">朝阳区</option>
                <option value="">三里屯</option>
            </select>
        </p >
        <p>爱好:
            <input type="checkbox">读书
            <input type="checkbox">游泳
            <input type="checkbox" checked>打扑克
        </p >
        <p>
            <textarea name="" id="" cols="30" rows="10"></textarea>
        </p >
        <p>邮箱:
            <input type="email" name="" id="">自带验证功能
        </p >
        <p>数字
            <input type="number" name="" id="">
        </p >
        <p>头像
            <input type="file" name="" id="">
        </p >
        <p>隐藏
            <input type="hidden" name="" id="">
        </p >
        <p>
            <input type="submit" value="自来也">
            <input type="reset" name="" id="">
            <input type="button" value="卡卡西">

            <button type="submit">提交</button>
            <button type="button">自定义</button>
            <button type="reset">重置</button>
        </p >
    </form>

实体Entity（转义字符）

&nbsp; 空格
&amp; and符号
&lt; 小于号
&gt; 大于号
&copy; 版权号

音频，视频

音频

<audio src="123.mp3" autoplay controls></audio>

视频

<video src="123.mp4" autoplay controls></video>

CSS

html提供了布料，css上色
css层叠样式表
定义如何显示HTML元素--样式
样式通常存储在样式表中
把样式表添加到HTML中，内容与表现分离（样式和结构分离）
外部样式表可以极大提高工作效率
外部样式表通常存储在css文件中

css选择器

选择你想要的元素

类选择器

在使用类选择器选择css样式时，可以选择多个，中间用空格隔开即可

.frontStyle {
            color: red;
            font-size: 20px;
            font-family: "楷体";
        }
        
<p class="frontStyle">我爱你中国</p>

id选择器

每个标签元素的id是唯一不能重复

#fontStyle2{
            color: blue;
            font-size: 30px;
        }
        
<p id="fontStyle2">长春</p>

标签选择器

p{
    font-family: "仿宋";
}

通配符，全部选择器

页面初始化
*

* {
    margin:0;
    padding: 0;
    }

组合选择器

h1,div {
                font-size: 50px;
            }

后代选择器

div p {
                background-color: red;
            }

子类选择器

div>p {
                color: blueviolet;
            }

紧跟着div的p元素

div + p{
                background-color: pink;
            }

属性选择器

input[name]{
                height: 100px;
                font-size: 50px;
            }
            input[name=username] {
                color: red;
            }

伪类选择器

初始状态

a:link {
                color: red;
            }

鼠标悬停

a:hover {
                color: green;
            }

激活状态

a:active{
                color: black;
            }

访问过的

a:visited {
                color: yellow;
            }

获得焦点

input:focus {
                height: 100px;
                font-size: 50px;
            }

第一个字变成红色

        <style>
            p::first-letter {
                color: red;
            }
        </style>
    </head>
    <body>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut error
            reprehenderit est ipsam voluptatem, expedita, ipsa exercitationem
            accusamus amet, temporibus deserunt tempore nobis? Cupiditate libero
            repudiandae neque quaerat, incidunt dolore.</p>
    </body>

posted @ 2022-08-22 21:41 LegendR 阅读(33) 评论(0) 收藏举报

刷新页面返回顶部

lurui711

2022-08-22 第八组 卢睿 学习心得