HTML和css复习总结

HTML总结

标题标签

在html中一共有6种标题标签,h1-h6，数字越小标题级别越高

    <h1>h1</h1>
    <h2>h2</h2>
    <h3>h3</h3>
    <h4>h4</h4>
    <h5>h5</h5>
    <h6>h6</h6>

段落标签

<p>标签是一个块级标签，主要用来描述一个段落

<p>
        p标签是一个段落标签。
</p>

列表标签

在html种一共由三种列表：

• 有序列表：<ul>标签
• 无序列表: <ol>标签
• 自定义列表: <dl>标签

其中ul和ol标签的列表项标签为li

有序列表

<ul>
        <li>第一个</li>
        <li>第二个</li>
        <li>第三个</li>
</ul>

无序列表

<ol>
        <li>第一个</li>
        <li>第二个</li>
        <li>第三个</li>
</ol>

自定义列表

自定义列表种的列表项标签和有序列表以及、无序列表不一样。它是<dt>作为一项的标题开头,<dd>作为该项的主要内容

<dl>
        <dt>常玩游戏</dt>
        <dd>--王者</dd>
        <dd>--王者</dd>
        <dd>--王者</dd>
</dl>

表格

html中表格可以更好的展示数据和帮助我们排版。

<!--
	table代表这是一个表格
	border属性代表表格的边框
	cellspacing代表单元格之间的间距
	cellpadding代表单元格与其内容之间的间距
-->
<table border="1" cellspacing="0" cellpadding="20"> 
        <thead> <!-- thead代表表头部分 -->
            <tr>  <!-- tr表示一行 -->
                <th>序号</th>   <!-- th表示一个表头单元格，其中的字体默认加粗 -->
                <th>名称</th>
                <th>战力</th>
            </tr>
        </thead>
        <tbody>  <!-- tbody 表示表格的主体部分，也就是数据展示部分 -->
            <tr> 
                <td>1</td>
                <td>火箭炮</td>
                <td>100</td>
            </tr>
            <tr>
                <td>2</td>
                <td>飞机大炮</td>
                <td>120</td>
            </tr>
            <tr>
                <td>3</td>
                <td>大坦克</td>
                <td>80</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>武器型号展示</td>
            </tr>
        </tfoot>
    </table>

超链接标签

在html中<a>标签可以完成对一个页面或者资源的链接跳转，他最主要的属性就是**href**属性，它将决定这个a标签会跳转到哪里

href属性可以设置哪些值：

• 域名：a标签可以直接跨域访问资源，比例www.baidu.com

• id值：href标签为一个id值的时候，那么就意味着直接跳转到这个id值元素的位置上，我们可以用它来完成跳转到顶部。

  <a href="#one">前往顶部</a>
  

a标签还有一个重要的属性:target,他将决定是否基于原页面跳转，默认是在同标签页上跳转，**_blank**则表示跳转到新的标签页上。

表单标签

<form>表单标签是最最重要的html标签之一，它不仅只是为了渲染页面，更多的是和服务器交互。它可以将数据传递给服务端。

他至少需要两个重要的属性：

• action：表示这该表单的数据会被提交到哪个服务器。所以需要填写服务端地址。
• method：表示请求方式，常见的请求方式无非就是post和get请求，表单的提交一般使用post方式提交。

表单项

form主要有三种表单项：

• input:输入框
• select：下拉选项框
• textarea：文本域

input

这个标签用的很多，有多这类型，我们需要先了解以下它的属性：

• type:表示输入框类型，可以是text、password、checkedbox、radio、submit、date和file等等。
• name:该标签则告诉后端该选项的选项名，方便后端取值
• placeholder:text、password等类型的输入框才需要这个属性，输入框提示关键字
• checked：radio、checkedbox输入框才有的属性，表示被选中

<form action="" method="">
        姓名：<input type="text" placeholder="输入姓名"><br> <!-- 普通输入框 -->
        密码：<input type="password" name="password"/><br> <!-- 密码输入框，隐藏秘密内容 -->
        性别: 
        <input type="radio" value="male" checked name="sex">male  <!-- 单选框，默认为选中男 -->
        <input type="radio" value="female" name="sex">female <br>
        爱好:
        <input type="checkbox" value="basketball" name="like">篮球  <!-- 复选框  -->
        <input type="checkbox" value="soccer" name="like">足球 <br>
        头像：<input type="file" name="picture"> <br>  <!-- 文件上传按钮  -->
        出生日期：<input type="date" name="birth"> <br> <!-- 日期按钮  -->
        <input type="submit" value="提交">
 </form>

select

下来菜单也是一个可以让用户感受不错的表单选项，它可以让用户在多个选项中快速的查到想要的选项

它需要<option>代表菜单项

<select name="city" id="">
            <option value="武汉">武汉</option>
            <option value="杭州">杭州</option>
</select>

textarea

可以换行输入文本，一般用来写长篇的文章

 自我介绍
        <textarea name="introduction" id="" cols="30" rows="10"></textarea>

css总结

使用css的三种方式

• 行内式

  <tr style="background-color: green;">
  

• 内嵌式

  <style>
          h1{
              color: red;
          }
      </style>
  

• 引入外部css

  <link rel="stylesheet" href="style.css">
  

常见的一些属性

• color:设置文本颜色
• width：这是元素宽度
• height：设置元素高度
• font-size：设置文本字体大小
• font-family：设置文本字体类型
• backgroud-color：设置背景颜色
• backgroud-image:设置图片背景
• cursor:选中元素是鼠标变为小手
• box-shadow:元素阴影

当然css远远不止这些属性，css可以很好的将html渲染成任何我们想要的样子。

选择器

标签选择器

h1{

​      color: red;

​ }

类选择器

.className{
	color:red;
}

id选择器

#idName{
	color:red;
}

子代选择器

一个元素的子元素

p>a{ /* p元素中第一个a元素 */
	color:red;
}

后代选择器

一个元素的所有子元素

p a{  /* p元素中的所有a元素*/
 color:red;
}

伪类选择器

p:hover{ /* 当鼠标悬停到p元素时渲染 */
	color:red
}