html表和连接css的方法

HTML

<caption></caption>    表头
<table></table>        表格
<tr></tr>            行
<td></td>            行内格
<tfoot></tfoot>
table中：aligh="center leht right"     对其方式[左，中，右]
    rowspan=""                    合并行
    colspan=""                    合并列
    &nbsp;                        空格
    &ensp;                        两个空格
    &emsp;                        三个空格

【表单标签】
<form></form>                    表单‘
action="/java2212/login"指定后台服务器路径

<input/>                        输入框

    <inputtype="输入类型"/>
        text        文本输入
        password    密码框，密文
        radio        单选框，多框同name值
        checkbox    复选框，多框同name值
        date        日期
        range        范围滑动框
        file        文件
        email        邮箱
        button        可点击按钮
        submit        可点击提交
        reset        可点击重置
name值，用        

    value="默认值"
    
    name="" 暂时不用，java用name获取输入框的值
    
    placeholder="输入提示"            输入框提示

<select>                选项框
    <option></option>     选项
</select><textarea></textarea>    可变大小文本域

【框架集标签】
cols将页面按照列分为几比几
rows将页面按照行分为几比几
<framesetcols="1,9"><framesrc="frame-a.html"><framestc="frame-b.heml"></frameset>

【框架标签】
将a页面设置为target="namesss"
当a标签的页面内容指定在iframe内，就可以实现一个页面中的iframe实现可以打开多个页面
<iframename="namesss"src="frame-a.hetm"width="900px"height="700px"></iframe>

CSS

CSS叫层叠样式表,用来美化HTML,

也可以配合脚本动态的改变样式

提供代码复用,

与HTML代码分离,方便后期维护

使用方式

1、CSS样式与HTML标签在一起

在标签内，引入style

<!-- css与html在一起；在标签内使用style属性引入css --><divstyle="width: 400px;height: 400px;background-color: red;"></div>

2、css样式与html标签分离，但不出，使用

给标签id，css中用（#id名字）做连接

<html><head><metacharset="utf-8"><title></title><style>#d2{width: 600px;height: 600px;background-color: green;}</style></head><body><divid="d2"></div></body></html>

3、css文件和html文件分离

1.得有html和css文件

2.在html中的head内中使用link引用css文件

语法格式

<linkrel="stylesheet"href="css/Demo1.css"><!-- rel中的stylesheet意思是样式表，固定写法 --><!-- href写入css文件的地址 -->

选择器

语法格式:

<style>
    选择器{属性:值;属性:值;}
<style>

标签选择器【重点】

指定标签类型，只要是这个标签就受影响

<head>
        <meta charset="utf-8">
        <title></title>
        <style>
            div{width: 200px;height: 200px;background-color: red;}
        </style>
    </head>
    <body>
        <div>d1</div>
        <div>d2</div>
        <div>d3</div>
        <input />
    </body>

id选择器【重点】

用标签中定义的id来与css进行联系，一个id对应一个标签

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            #d1{width: 200px;height: 200px;background-color: red;}#d2{width: 300px;height: 300px;background-color: green;}#d3{width: 400px;height: 400px;background-color: blue;}
        </style>
    </head>
    <body>
        <!-- id属性,是全局属性,所有标签都可以定义,id值要唯一 -->
        <div id="d1">d1</div>
        <div id="d2">d2</div>
        <div id="d3">d3</div>
        <input />
    </body>
</html>

class选择器【重点】

和id格式基本一样，但class可以被多个标签同时调用

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            /* style注释 
            .类名{}
            */.yuju1{background-color: antiquewhite;}.yuju2{font-size: 3    0px;}
        </style>
    </head>
    <body>
        <h1>岳阳楼</h1>
        <!-- 标签加class属性,可以同时设置多个clss值,中间空格隔开 -->
        <p class="yuju1 yuju2">岳阳楼上日衔窗，</p>
        <p>影到深潭赤玉幢。</p>
        <p class="yuju1">怅望残春万般意，</p>
        <p>满棂湖水入西江。</p>
    </body>
</html>

属性选择器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
        /*     标签[属性=值]{
                
            } */input[type=text]{width: 350px;height: 35px;background-color: red;}
        </style>
    </head>
    <body>
        <form action="/java2212/login">
            用户名: <input type="text" value="" name="username" placeholder="首字母大写"/><br>
            密码: <input type="password" name="password"/><br>
            性别:<input type="radio" name="sex"/>男
                <input type="radio" name="sex" />女<br>
            爱好:<input type="checkbox" name="hobby"/>学习
                <input type="checkbox" name="hobby"/>敲代码
                <input type="checkbox" name="hobby"/>睡觉<br>
            出生年月:<input type="date" name="birthday"/><br>
            年龄:<input type="range" name="age"/>18<br />
            头像:<input type="file" name="touxiang"/><br>
            邮箱:<input type="email"/><br>
        </form>
    </body>
</html>

层级选择器

    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            /* 层级选择器 
            选择器1 选择器2 ...{}
            选择器之间是空格,递进关系,在选择器1的基础上,
            再进行选择器2的选择
            */.d1 span{background-color: red;}
        </style>
    </head>
    <body>
        <div class="d1">
            <p>d1-p</p>
            <span>d1-s2</span>
        </div>
        <div>
            <span>d2-s1</span>
            <span>d2-s2</span>
        </div>
    </body>

组合选择器

选择器1,选择器2{

}
两个选择器会同时生效,两个选择器是平级关系

css属性

文字属性

font-family: 宋体;/*更改字体*/font-size: 35px;/*更改字体大小*/

文本属性

color: red;/*字体颜色*/text-align: center;/*文本居中*/text-indent: 20px;/*缩进*/

背景属性

backgrouond-color： 颜色;/*更给背景颜色*/
background-image：url("图片地址")/*背景图片*/默认平铺background-repeat：no-repeat;/*不平铺*/
repeat-x;  //   repeat-y;/*x或y轴平铺*/background-size:250px;/*背景图片大小*/background-position: bottom;/*背景图片的地方*/

列表属性

.l1{list-style-image:url("img/数字-1.png");/*在列表中添加图片，比如[1]这样的序号小图片*/

尺寸属性【重点】

width:100px; 或者 100%;height:100px; 或者 100%;

显示属性【重点】

display: none;/*不展示*/display: block;/*显示: 按块显示*/display: inline;/*显示,按行内显示*/

浮动属性float

float: right;/*浮动,会脱离当前的文档流*/

定位属性【重点】

相对定位

/*相对定位不会脱离原来的文档流
  加了定位就可以使用位置属性: left,right,top,bottom
  相对与父级进行位置移动*/position: relative;/*相对定位*/left: 30px;top: 30px;

绝对定位

/*绝对定位会脱离原来的文档流
  绝对定位是根据页面左上角进行位置移动*/position: absolute;/*绝对定位*/left: 30px;top: 30px;

标签： css html 前端

本文转载自: https://blog.csdn.net/m0_73050509/article/details/126492695
版权归原作者 javaEE初学者日常分享 所有，如有侵权，请联系我们删除。