我的暑期实训的处女笔记

最新推荐文章于 2018-01-25 15:56:00 发布

zjy1070168724

最新推荐文章于 2018-01-25 15:56:00 发布

阅读量300

点赞数

分类专栏： html 文章标签：实训入水处女作

本文链接：https://blog.csdn.net/zjy1070168724/article/details/74937420

版权

html 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

今天首先讲了最基础的知识。如HTML的标签，HTML标签最外层标签包括head头标签，与body标签。在head中可写CSS样式和JS脚本。
在编码中UTF-8码支持中文（此为最权威，支持中文数量最多的编码方式）
具体样式如下:

<!Doctype html> 声明
<html> 
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
<input type="password" id="password" name="password" maxlength="10" /> <br/>
此处在body的内部写了一个input类型password(passwod为文本单对外显示为点)。 id与name为前后台交互使用的，并不影响显示。
    </body>
</html>

id：唯一标识身份证。
接下来介绍了超链接一的格式如下

<a href="目标路径" target="显示的位置">超链接的对象（例如一串字符一张图）</a>

Target的常用属性如下：
_blank 在新窗口中打开
_self 在自己当前的窗口打开
_parent 在父标签打开
同时介绍了一些常用的格式:

<h1></h1>题头 数字可以从1到6,h1最大h6最小。
<b></b>黑体
<i></i>斜体
<sub></sub>斜向下表示
<sup></sup>斜向上表示
<u></u>下划线
<br/>换行
<p></p>定义段落
<div align=”midddle”><div>字体居中
同样可用font设置字体格式，如下。
<font size="5">文字</font>

Table的创建也尤为重要

<table border="1" cellspacing="0" cellpadding="0" width="300px" height="100px" align="center" style="text-align: center;">

Border为边框 cellspacing和cellpadding为与边框的间距。
Width和height为标的宽与高， style（css属性）此处可设置表格中文字样式
Align 可设置表格的位置。

            <tr style="color: purple"> 此处设置行的内容
                <th>name</th> 设置列的内,(th表示为标题td表示为内容区别为挺好加粗而td未加粗)
                <th>number</th>
                <th>age</th>
                <th>charecter</th>
                <th>sex oreitation</th>
            </tr>
            <tr>
                <td>unkown</td>
                <td>unkown</td>
                <td>unkown</td>
                <td>6</td>
                <td>maid</td>
            </tr>
        </table>

有序列表为 order list

<ol type=”控制排序方式，如数字、字母”start=”控制开始位置（为数字位置）” >
<li> </li>
</ol>

无序列表 unorder list
去别为 type 选择为square，circle等图形。
ol 与ul可相互嵌套。

Frameset
    <frameset rows="20%,*" />
        <frame src="top.html" name="top" noresize="noresize"/>
        <frameset cols="20%,*"/>
        <frame src="left.html" name="left" noresize="noresize" />
        <frame src="right.html" name="right"/>
       </frameset>
       <!--应用场景，一般应用在管理系统中
        像淘宝电商网站，采用的布局都是div，配合css进行布局
       -->

是对界面个是的设置同时iframe也可实现界面格式的设置。
区别：(1)iframe在body中写frameset不能再body中写。
(2)iframe嵌入body中，实现一块区域刷新，frameset页面布局整体框架。
通过今天学的知识完成了如下的一个页面

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    <center>
    </table>
    <font size=5> 微博验证 </font></br>
    <table border="0" cellspacing="" cellpadding="" style="text-align:  right;">
        <tr>
            <td>注册邮箱:</td>
            <td align="left"><input type="text" name="@" id="@" value="" /></td>
        </tr>
        <tr>
            <td></td>
            <td align="middle">你可以<a href="">使用账号</a>或<u>手机号注册</u></td>
        </tr>
        <tr>
            <td>创建密码:</td>
            <td align="left"><input type="password" name="" id="" value="" /></td>
        </tr>
        <tr>

            <td>真实姓名:</td>
            <td align="left"><input type="text" name="" id="" value="" /></td>
        </tr><tr>
            <td >性别:</td>
            <td align="left"><input type="radio" name="sex" id="sex" value="0" />male
     <input type="radio"name="sex" id="sex" value="1"/>female</br></td>
        </tr>
        <tr>
            <td>生日:</td>
            <td align="left">
                <select name="bir">
                <option value="0" selected="selected">2014</option>
                </select>
    <select name="moth">
        <option value="0" >1</option>
        <option value="1" selected="selected">2</option>
        <option value="2" >3</option>
        <option value="3" >4</option>
        <option value="4" >5</option>
        <option value="5" >6</option>
        <option value="6" >7</option>
        <option value="7" >8</option>
        <option value="8" >9</option>
        <option value="9" >10</option>
        <option value="10">11</option>
        <option value="11">12</option>
    </select>
    <select name="day">
        <option value="0">1</option>
    </select>
            </td>
        </tr>

        <tr>
            <td>我现在:</td>
            <td align="left"><select name="now">
        <option value="0">在上学</option>
        <option value="1">就业</option>
        <option value="2">退休</option>
    </select></td>
        </tr>
        <tr>
            <td></td>
            <td align="left"><img src="img/验证码.png"></td>
        </tr>
    <tr>
    <td>验证码:</td>
    <td align="left"><input type="text" name="yanzheng" id="yanzheng"></td>
    </tr>
        <tr>
            <td></td>
            <td align="left"> <a href=""><img src="img/按钮.png"width=""></a></td>
        </tr>
    </table>
    </center>
    </body>
</html>

效果如下
这里写图片描述

zjy1070168724

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
我的暑期实训的处女笔记

今天首先讲了最基础的知识。如HTML的标签，HTML标签最外层标签包括head头标签，与body标签。在head中可写CSS样式和JS脚本。在编码中UTF-8码支持中文（此为最权威，支持中文数量最多的编码方式）具体样式如下:<!Doctype html> 声明<html> <head> <meta charset="utf-8" /> <title
复制链接

扫一扫

专栏目录