Javaweb__html、css

最新推荐文章于 2023-06-13 16:01:27 发布

丑_小子

最新推荐文章于 2023-06-13 16:01:27 发布

阅读量818

点赞数

分类专栏： javaweb

本文链接：https://blog.csdn.net/u011192281/article/details/23718475

版权

javaweb 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一些常用的标签

标签

<br/>换行
    <hr/>下划线 noshade 没有阴影效果
    <pre>格式预设

    font 属性：color，size大小，face字体类型默认字体大小是 3 也可以写成+2 就是5

    特殊字符：<<>小于   <$gt>大于 ¥人民币 ™商标

    图像标记：img

*清单列表
     有序 <ol></ol>属性 type 1 i a A 超过26aa ab start
          <li></li>
     无序<ul></ul> 属性 type circle disc square 如果不填属性，默认的实心空心方块

     自定义列表： <dl>是 <dt><dd>的父类

* 超链接
     <a>
         href:
              http://www.baidu.com
              demo2.html
              mailto:xxx.@163.com
              xxx.js
              zip文件
          name ="定义锚地址" href="#地址"
          target：_self,_blank,new,框架名显示到框架中另一个部分
     </a>
* 表格标记
<table>一个表格
       属性： border ,bordercolor ,width ,cellspacing 边线的空间 ,cellpadding 字体与表框的距离 ,align
   tr 行
   td 列单元格
   rowspan
   colspan

   th 列标题

   caption 表格标题

框架标记及<iframe> cols 和rows 是框架的标签
<frameset>跟<body>不能同时使用 iframe跟frameset同一级别
    <frame>

* 表单标记及语义化；
     <form action="提交地址" method="post/get"提交方式>
     <input type=""> type属性值：type:Text, Radio,Checkbox, Password, Submit/Reset, Image 相当于按钮图片提交, File, Hidden, Button。
     <select> <option></option></select>列拉列表
     <textarea></textarea>多行文本框
* 多媒体标记
     <embed> 媒体标签
     <bgsound> 背景声音
   src:资源位置

头标记
   <meta> 可以调编码格式
       可以定时刷新   可以提供引擎搜索
   <base href="基础地址" target="打开方式"/>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> 表单</title>
<!--
<form></form>
   type=
        "text"
       password
       radio
       checkbox
       submit
       reset

       hidden 隐藏域
       file 文件域
       image 图片按钮，src="" 也可以实现提交表单的作用
       button 也是一个按钮，可以添自己的事件

       demo14.html?username=aa&password=aaa&sex=male&hobby=on
       demo14.html?username=a&password=a&sex=male&hobby=eating&hobby=game&photo=&photo=

       get提交

       post提交
       对比post与get提交两种方式
       1.get提交的数据在地址是可见的，而post地址数据不可见
       2.get提交数据不安全，post提交数据更安全
       3.get提交数据不超过1K,post理论上没有数据量的限制

一段form表单的代码。。。

<form>
	  用户名：<input type="text" name="username" ><br/>
	  密码：<input type="password" name="password"><br/>
	  性别:  男<input type="radio" name="sex" value="male" checked />  女<input type="radio" name="sex" value="female" /><br/>
	  爱好：吃饭<input type="checkbox" name="hobby" value="eating"/>    睡觉<input type="checkbox" name="hobby" value="sleep"/>    打游戏<input type="checkbox" name="hobby" value="game"/><br/>
	  上传照片:
		<input type="file" name="photo"><br/>
		<input type="submit" value="注册"><input type="reset"/>
		<input type="button" value="我是一个可以加自己的事件" οnclick="alert('Hello');"/>
</form>
 <br/>-------------------表单的进一步使用--------------------------<br/>
	 <form action="demo12.html" method="post">
	  用户名：<input type="text" name="username" ><br/>
	  密码：<input type="password" name="password"><br/>
	  性别:  男<input type="radio" name="sex" value="male" checked="checked" />  女<input type="radio" name="sex" value="female" /><br/>
	  爱好：吃饭<input type="checkbox" name="hobby" value="eating"/>    睡觉<input type="checkbox" name="hobby" value="sleep"/>    打游戏<input type="checkbox" name="hobby"  checked="checked" value="game"/><br/>
	  上传照片:
		<input type="file" name="photo"><br/>
		
		个人描述：(最多填200字)
		 <textarea	rows="5" cols="10" >写自己的工作经历</textarea><br/>
		 所在的城市:
		 <select>
			<option>--请选择城市--</option>
			<option value="bj" selected>北京</option>
			<option value="sh">上海</option>
			<option value="gz">广州</option>
			<option value="sz">深圳</option>
		 </select><br/>
		 <input type="file" name="photo"><br/>
		<input type="submit" value="注册"><input type="reset"/>
		<input type="button" value="我是一个可以加自己的事件" οnclick="alert('Hello');"/>
</form>

css：层叠样式表
与html结合的四种方式 <head></head>
1.style 内部写法行内样式
2.内嵌样式
   <style type="text/css">
   标签选择器，作用范围当前页面中具有相同选择器的标签
    </style>
3. 外部文件样式引入<link rel="stylesheet" type="text/css" href="demo.css">
4. 导入方式
   <style type="text/css">
           @import url(demo2.css);
              </style>
css的注释：只有一种样式：/* */

样式优先级：外部<内部   从上到下就近原则

选择器： 1.html选择器，标签名选择器

         2.id 选择器样式中 #id值 html中设置id

   3.class 样式中 .(值)开头的选择器 class引入 class="值"

   层级选择器

   关联选择器：div p{} 选择器1 选择器2

   font-famylie字体 font-size：大小

        组合选择器：p,div{}

   伪元素选择器：标签名：伪元素(状态)
   a:link 连接未点击
        a:hover 悬浮
        a:active 点击
css属性：

   font 字体风格粗细大小类型

   文本 text-indent：文本缩进

          text-align：right input输入值居右

   background
      导入图片 background-image：url(路径);
                 background—repeat：no-repeat;

   border：solid实线 dashed虚线

   margin div与div的间距 padding边框与文字的距离

   布局：float 漂浮      clear：清除左右both

   margin：上 2px 右左3px 下5px 上右下左

层叠定位 positioning 绝对定位，相对定位

   绝对定位：position：absolute绝对定位，后面的内容会变化
                            它始终相对于body

                     relative相对定位相对于原来的位置
   z-index：调整层次关系；