html课后总结1

最新推荐文章于 2021-06-16 19:59:56 发布

x1998xxx

最新推荐文章于 2021-06-16 19:59:56 发布

阅读量235

点赞数

本文链接：https://blog.csdn.net/x1998xxx/article/details/100558228

版权

文本
文本样式：
（水平对齐方式）text-align : center / left / right;
（设置字体颜色）color : red;
（设置首行缩进）text-indent : 2em;
（行高/设置文字垂直对齐方式）line-height : 30px;
（文本修饰）text-decoration : none/underline/overline/line-through;
普通文本用
字体样式：
font-size
font-style : italic/oblique;
font-weight : bold/bolder;
font-family : “宋体”

<p>内容</p>

标题一般用此代码来显示，改变其中的数字即可改变字体大小，相对于普通文本加黑加粗。

<h1>内容</h1>

效果：
在这里插入图片描述

插入图片：<img src="图片所在文件夹" />

超链接：
:link 只有超链接可以用（未被访问之前）
:visited 只有超链接可以用（访问过后）
:hover 可用于任意标签（鼠标经过时）
:active（鼠标点击时）

<a href="">内容</a>

列表:分有序与无序两种，<ul><li>无序</li></ul> <ol><li>有序</li></ol>
效果：在这里插入图片描述
列表：·
单词效果：
border设置边框
cellspacing设置单元格之间距离
cellpadding设置单元格和内容距离
width 宽 height 高
align 对齐方式
bgcolor 背景色
rowspan 行合并
colspan 列合并
表单用<tabel></tabel>来显示，而<table width="0" border="0" cellpadding="0" cellspacing="0"> </tabel>这个位置加入单词则是定义表单的边框的各种显示效果改变数值则可改变边框的各种效果的大小。在表单中加入两种文本：TH和TD。TH是将文本加粗居中，而TD加入的则是普通文本。

<th colspan="4">合并4个列单元格并将文本加粗居中</th>
<td rowspan="3">合并3个行单元格，字体普通</td>

伪代码演示：

<table width="800" border="5" cellpadding="0" cellspacing="0">  
        <tr>          
        <th colspan="4">合并4个列单元格并将文本加粗居中</th> 
 </tr>
 <tr>
         <td rowspan="3">合并3个行单元格，字体普通</td>
         <td>1</td>
                     <td>2</td>
            <td>3</td>
             </tr>
             <tr>
         <td >4</td>
     <td>5</td>
            <td>6</td>
             </tr>
             <tr>
  <td >7</td> 
 <td >8</td>
         <td>9</td>
         </tr>
         </table>

效果在这里插入图片描述

当需要给表单做各种改变时时，有两种方法，第一种是直接在html的头文件中写入，第二种是创建一个css，在css中写，在HTML的头文件中用<link rel="stylesheet" href="调用的css文件" />调用。
css：

.nav li{
  
  width: 224px;
    height: 42px;
    border: 1px solid red;<!-- 边框大小以及颜色-->
    text-align: center;<!-- 水平对齐-->
    line-height: 42px;<!-- 行高-->
    background: #eee url(img/nav1.png) no-repeat 168px center; <!-- 添加背景色，添加图片，并定义图片位置-->
   }

a{
 text-decoration: none; 
}
<!-- 设置框内文字成超链接并去除下划线，在A标签中可进行各种有关超链接的各类修改-->

HTML：

<div>
   <ul class="nav "><!-- 调用-->
   <li><a href=""></a>内容</li><!-- 调用a标签->
 
   </ul>
  </div>

效果
在这里插入图片描述

登录界面：
type是用于选择可在文本输入框中输入什么类型的文本格式，
texe可输入字母与数字
number仅可输入数字
password用于接收密码

<body style="text-align: center;"><!--居中 ->
<label for="user">用户名</label><!-- 使文本出现光亮->
<input  type="text" name="user" placeholder=" 输入用户" /><br />
       <label for="shouji">手机号</label>
       <input  type="number" name="shouji" placeholder="输入手机" /><br />
  <label for="paw">密码</label>
  <input  type="password" name="paw" placeholder=" 输入密码" /><br />
  <input  type="text" name="yzm" placeholder="输入验证码 " />
  <input type="submit" value="获取验证码" /><br />
 <label for="sex">性别</label>
  <input type="radio" name="sex" walut="man"  />男 <input type="radio"  name="sex" walut="woman"  />女<br /><!-- 单选框->
  <label for="xy"></label>
  <input type="checkbox" name="xy" walut="xy" />阅读并同意协议<a href="">考试协议</a><br /><!-- 多选->
  <label for="zc"></label>
  <input type="submit" name="zc" value="注册" /><br /><!-- 注册按钮->
  </body>

效果：在这里插入图片描述