2022-08-23 HTML&CSS-CSDN博客

<h1>最大标题</h1> 最小到h6
<p>段落</p>
<hr size="" color= "" width = "">水平分割线
<br> 换行
<b>粗体文本</b>
<code>计算机代码</code>
<em>强调文本</em>
<i>斜体文本
<kbd>键盘输入
<pre>预格式化文本
<strong>重要的文本
<small>更小的文本
<del>删除线
log<sub>5</sub> 
2<sup>3</sup> = 8

超级链接

 普通的链接：<a href="http://www.baidu.com" target="_self">百度一下</a><br>
 图像链接：<a href="http://www.baidu.com"><img width="150" src="img/libai.jpeg" alt="这是刺客李白" title="青莲剑仙"></a><br>
  邮件链接：<a href="mailto:123456@qq.com">站长信箱</a><br>

文档中的块级元素、行级元素

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

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

块级元素：自占一行，自带换行功能，div，h，p，form，ul，ol，

行级元素，自己没有换行功能

列表

无序列表

<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>项目1</dt>
            <dd>描述项目1</dd>
            <dt>项目2</dt>
            <dd>描述项目2</dd>
        </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>13635412586</td>
           <td>延边第二中学</td>
           <td rowspan="4">中国</td>
      </tr>
</tbody>
<tfoot>
     <tr>
            <td colspan="5">
            备注：他们都是有钱人。
            </td>
      </tr>
</tfoot>

th加粗，tr换行，td换列，colspan合并列，rowspan 合并行

建表单

action表单提交地址 method表单提交方法

action：数据的提交后台地址；method：数据提交方式

        <a href="aaa?gender=on&username=admin">a标签</a>
        <form action="aaa" method="post">
            <p>
                账号：<input type="text" name="username" maxlength="12"
                    placeholder="用户名为6-12位">
            </p>
            <p>
                密码：<input type="password" name="password" placeholder="密码必须是6位">
            </p>
            <p>
                性别：
                <input type="radio" name="gender" value="男" id="man">
                <label for="man">男</label>
                <input type="radio" name="gender" checked value="女" id="women">
                <label for="women">女</label>
            </p>
            <p>
                地址：
                <select name="sheng">
                    <option value="0">请选择省</option>
                    <option value="吉林省">吉林省</option>
                    <option value="北京市">北京市</option>
                </select>
                <select name="shi">
                    <option value="0">请选择市</option>
                    <option value="长春市">长春市</option>
                    <option value="北京市">北京市</option>
                </select>
                <select name="qu">
                    <option value="0">请选择区</option>
                    <option value="南关区">南关区</option>
                    <option value="西城区">西城区</option>
                </select>
            </p>
            <p>
                爱好：
                <input type="checkbox" value="reading" checked>读书
                <input type="checkbox" value="swimming">游泳
                <input type="checkbox" checked value="running">跑步
            </p>
            <p>
                <textarea cols="30" rows="10" name="desc"></textarea>
            </p>
            <p>
                邮箱：<input type="email" name="email">
            </p>
            <p>
                薪水：<input type="number" name="salary">
            </p>
            <p>
                电话：<input type="tel" name="tel">
            </p>
            <p>
                隐藏：<input type="hidden" name="hidden" value="hidden_value">
            </p>
            <p>

                <button type="submit">注册</button>
                <button type="reset">重写</button>
                <button type="button">自定义</button>

            </p>
        </form>
    </body>
</html>

get：默认值，会把所有要提交的数据拼接在地址栏（不安全，有长度限制）

post：封装一个请求体，把数据提交给后台，不会拼接（安全，没有长度限制）

readonly和disabled的区别：

readonly可以提交给后台，disabled不可以提交给后台

实体Entity（转义字符）

  空格

& and符号

< 小于号

> 大于号

什么是css？

html提供了布料，css上色，css层叠样式表

定义如何显示HTML元素-----样式

样式通常储存在样式表中，把样式表添加到HTML中，内容与表现分离（样式和结构分离）

外部样式表可以极大提高工作效率，通常储存在css文件中

三种样式

 <!-- 1.行内样式 写在body里 -->
 <p style="background-color: red;">我是P标签</p>
<!-- 2.内联样式 写在style里 -->
        <style>
            h1 {
                background-color: green;
            }
            span{
                background-color: yellow;
            }
        </style>


 <!-- 3.外部样式  写在head结束语句前-->
        <link rel="stylesheet" href="css/style.css">

css选择器

类选择器

style中
 .fontStyle {
                color: red;
                font-size: 20px;
            }
 .backgroudStyle {
                background-color: yellow;
            }

body中
 <p class="fontStyle backgroudStyle">我爱你中国！</p>

id选择器

 #fontStyle2 {
                color: blue;
                font-size: 30px;
            }

 <p id="fontStyle2">我爱你长春！！！</p>

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

标签选择器：p{ }

全部选择器： *{ }

组合选择器：h1，div{ }

后代选择器： div p{ }

子选择器： div>p{ }

紧跟着div的p元素：div+p{ }

属性选择器： input[name] { }

input[name=username]{ }

伪类选择器：

初始状态 a:link{ }

鼠标悬停a:hover{ }

激活状态a:active{ }

访问过的 a：visited{ }

获得焦点 a:focus{ }