HTML和CSS

Posted xiaoruirui

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了HTML和CSS相关的知识,希望对你有一定的参考价值。

 

THML

概念:超文本标记

作用:页面内容

<h><p><img><a>

表格格式:

<table>

<tr>

<td>

</tr>

</table>

内有bordercolspan,rowspan连接列和行

表单form

<form action=”文件内容存储” method=”get或者post请求”>

<input type=”” name=”” value=””>

<form>

需要设置name值,这样数据才能传回后台不需要value

文本text

密码password

需要name也需要value的值才能把数据传入后台

单选radios

复选checkbox

需要value的值

文件file

隐藏hidden

重置reset

提交submit

下拉菜单

<select><option value=”属性值”>显示值</option></select>

<img src=”文件位置” alt=””>

<a href=”网站地址”>内容</a>

Textarea文本域中是由rowscols两个属性

 

CSS

概念:层叠样式表

作用:修饰thml

三种方式:

内联:

行内联

类选择器

id选择器

外联:

<link rel=”stylesheet href=”css路劲””

做一个表单

技术图片
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
    .c1
      text-align: right;
    
    #d1
        align:center;
    
</style>
</head>
<body>
<form>
    <table id="d1" border="1" cellspacing="0" cellpadding="0" style="width: 800px;height: 200px;" >
        <tr>
            <td colspan="3" style="font-size: 20px;font-size: b;"> 1.会员登陆名和密码</td>
        </tr>
        <tr>
            <td class="c1" style="width: 10%"> 用户名:</td>
            <td style="width: 30%"><input name="username" style="text-align: right: 5px;"><span style="color: red">*</span></td>
            <td style="width: 60%"><input type="submit" value="检测用户姓名">请使用数字和英文字母</td>
        </tr>
        <tr>
            <td class="c1" style="width: 10%"> 密码:</td>
            <td style="width: 30%"><input name="username" style="text-align: right: 5px;"><span style="color: red">*</span></td>
            <td style="width: 60%">密码为15个数子或者字母</td>
        </tr>
        <tr>
            <td class="c1" style="width: 10%"> 确认密码:</td>
            <td style="width: 30%"><input name="username" style="text-align: right: 5px;"><span style="color: red">*</span></td>
            <td style="width: 60%">再次确认</td>
        </tr>
        <tr>
            <td colspan="3" style="font-size: 20px;font-size: b;"> 2.姓名和联系方式</td>
        </tr>
        <tr>
            <td class="c1" style="width: 10%"> 真是姓名:</td>
            <td style="width: 30%"><input name="username" style="text-align: right: 5px;"><span style="color: red">*</span></td>
            <td style="width: 60%"><input type="radio" name="sex" name="nan"><input type="radio" name="sex" name="nv"></td>
        </tr>
        <tr>
            <td class="c1" style="width: 10%"> 电子邮箱:</td>
            <td style="width: 30%"><input name="username" style="text-align: right: 5px;"><span style="color: red">*</span></td>
            <td style="width: 60%"><b><span style="color: red">非常重要!</span></b></br>这是客户首选的方式</td>
        </tr>
        <tr>
            <td class="c1" style="width: 10%"> 固定电话:</td>
            <td style="width: 30%"><input name="username" style="text-align: right: 5px;"><span style="color: red">*</span></td>
            <td style="width: 60%">区号+电话号码</td>
        </tr>
        <tr>
            <td class="c1" style="width: 10%"> 公司所在地:</td>
            <td colspan="2" style="width: 90%">
                <select style="width: 100px">
                    <option value="compeny">北京
                    <option value="compeny">上海
                    <option value="compeny">成都
                </select>
                <select style="width: 50px">
                    <option value="local">东城
                    <option value="local">西城
                    <option value="local">北城
                </select>
            </td>
        </tr>
        <tr>
            <td class="c1" style="width: 10%"> 街道地址:</td>
            <td colspan="2" style="width: 30%">
            <input name="username" style="text-align: right: 5px;width: 300px"><span style="color: red">*</span>
            填写县(区)、街道
            </td>
        </tr>
        <tr>
            <td class="c1" style="width: 10%"> 传真号:</td>
            <td colspan="2" style="width: 30%">
            <input name="username" style="text-align: right: 5px;">
            </td>
        </tr>
        <tr>
            <td class="c1" style="width: 10%"> 手机号:</td>
            <td colspan="2" style="width: 30%">
            <input name="username" style="text-align: right: 5px;">
            </td>
        </tr>
        <tr>
            <td class="c1" style="width: 10%"> 传真号:</td>
            <td colspan="2" style="width: 30%">
            <input name="username" style="text-align: right: 5px;">
            </td>
        </tr>
        <tr>
            <td class="c1" style="width: 10%"> 邮政号:</td>
            <td style="width: 30%"><input name="username" style="text-align: right: 5px;"><span style="color: red">*</span></td>
            <td style="width: 60%"></td>
        </tr>
        <tr>
            <td colspan="3" style="font-size: 20px;font-size: b;">3.公司主营业务</td>
        </tr>
        <tr>
            <td class="c1" style="width: 10%"> 公司名称:</td>
            <td style="width: 30%"><input name="username" style="text-align: right: 5px;"><span style="color: red">*</span></td>
            <td style="width: 60%">填写注册号,公司全称<br>无商号的个体填写营业执照号如:张三</td>
        </tr>
        <tr>
            <td class="c1" style="width: 10%"> 你的职位:</td>
            <td style="width: 30%"><input name="username" style="text-align: right: 5px;"><span style="color: red">*</span></td>
            <td style="width: 60%"></td>
        </tr>
        <tr>
            <td class="c1" style="width: 10%"> 主营行业:</td>
            <td style="width: 30%">
            <select>
                <option value="work">电子电工
                <option value="work">装修
                <option value="work">祭祀
            </select>
            </td>
            <td style="width: 60%">请选择正确</td>
        </tr>
        <tr>
            <td class="c1" style="width: 10%"> 主营产品/服务:</td>
            <td colspan="2" style="width: 30%">
            <input name="username" style="text-align: right: 5px;width: 300px">
            <span style="color: red">*</span>
            3个主要的产品,至少需要填写一个
            </td>
        </tr>
        <tr>
            <td class="c1" style="width: 10%"> 公司网站:</td>
            <td colspan="2" style="width: 30%">
            <input name="username" style="text-align: right: 5px;width: 300px;" placeholder="http://">
            </td>
        </tr>
        <tr>
            <td class="c1" style="width: 10%"> </td>
            <td colspan="2" style="width: 30%">
            <input type="submit" style="width: 200px;height: 60px;border-radius: 10px;background: green;" >
            </td>
        </tr>
    </table>
</form>
</body>
</html>
View Code

 

BSCS

Bs浏览器服务器模式:不用客户跟新,不安全,只要右浏览器就可以访问,

 

Cs客户服务器模式;需要下载APP,安全,服务器速度块,需要跟新软件,

以上是关于HTML和CSS的主要内容,如果未能解决你的问题,请参考以下文章

javaWeb_Css

PHP.7-HTML+CSS-HTML语法常用字符实体颜色代码

使用 CSS HTML 垂直对齐提交按钮

万字长文史上最强csshtml总结~看完涨薪不再是梦

全局配置css和js

使用 CSS HTML 右对齐图像