【javaweb】自学日记oneday

最新推荐文章于 2024-10-08 14:23:59 发布

残雪2022

最新推荐文章于 2024-10-08 14:23:59 发布

阅读量156

点赞数

文章标签： java html css

本文链接：https://blog.csdn.net/qq_43271509/article/details/105475145

版权

大学生代码爱好者一枚，此日记单纯用于记录学习过程，并且方便日后的回顾，第一天开始学习前端的知识也只是初步的了解，深入学习后会有所更新

1. HTML部分

0.字体标签
（color 设置字体颜色，face 设置字体，size 设置字体大小）

<font color="blue" face="宋体" size="5">字体</font>

1.标题标签
（由1~6从大到小）

		<h1>标题1</h1>
        <h2>标题2</h2>
        <h3>标题3</h3>
        <h4>标题4</h4>
        <h5>标题5</h5>
        <h6>标题6</h6>

2.超链接标签
（href 设置超链接地址路径，target =“_blank”使用新的浏览器窗口打开链接 target=“_self”使用当前浏览器打开链接）

<a href="https://www.baidu.com" target="_blank">百度</a>

3.无序列表标签

<ul >
        <li> 青龙</li>
        <li> 白虎</li>
        <li> 朱雀</li>
        <li> 玄武</li>
    </ul>

4.图片导入标签
（src设置图片地址，width是指图片宽度，height 设置图片高度，border设置边框，alt 设置错误信息）

<img src="../seeing/photo01.jpg " width="250" height="150" border="2" alt="图片不显示">

5.表格标签
（table 创建表格，tr 创建行，td 单元格标签，th 创建表头，b 加粗标签，align 调整对齐方式cellspacing 设置单元格间距，colspan 跨列rowspan 跨行）

<table border="1" width="200" height="20" cellspacing="0">
    <tr>
        <th>01</th> <!-- 表头意味着 居中 加粗 align=“center”  <b> 同样可以做到-->
        <td colspan="2">02</td>
        
    </tr>
    <tr>
        <td rowspan="2">04</td>
        <td>05</td>
        <td>06</td>
    </tr>
    <tr>
        
        <td>08</td>
        <td>09</td>
    </tr>
</table>

6.iframe标签
（用于内嵌小窗口 src 确认引入HTML文件路径 width，height进行长宽设置，name可以让其他标签引用从而以此窗口的形式打开以下为例）

<iframe src="Test01.html" width="200" height="200" name="001"> </iframe>
  <ul>
      <li><a href="Test01.html" target="001">01</a></li>
      <li><a href="Test02.html" target="001">02</a></li>
      
  </ul>

2. Css部分

（此处主要是了解了如何使用）
1.Css语法整体定义 style
（ Css 写法可以整体改变标签的定义增加了复用性，前面以div 或者 span形式命名就说名了确定了主要用于何种标签）

<style type="text/css">
        div{
            border: 1px solid red;
        }
        span{
            border: 1px solid green;
        }
        
    </style>

还有第二种定义引用的方法是建立css文档，然后使用link标签调用css文档
（type 设置文件类型 href引入文件的地址）

<link rel="stylesheet" type="text/css" href="Css.css"/>

2.选择器
（以下介绍选择器类型以及调用的几个基本的css属性）

 <style>
        /*id选择器选择设置类型*/
        #id01{
            font-size: 10px;
            border: red 1px solid;
        }
        /*class选择器选择设置类型*/
        .class02{
            font-size: 10px;
            border: green 1px solid; 
        }
        /*组合选择器选择设置类型 可以选择其中的任意一个*/
        .class01,#id02{
            font-size: 10px;
            border: yellow 1px solid;
        }
    </style>

3. 总结部分

（根据前面了解一个简单的练手表格）

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
</head>
<body>
<!--1.表单的建立 
  input type=text 建立文本框只是输入那种 value属性 可以设置初始值
  input type=password 建立密码框 默认密码隐藏 value属性 可以设置初始值
  input type=radio 建立一个单选框 checked=“checked”属性可以设置默认
  input type=CheckBox 建立一个复选框 checked=“checked”属性可以设置默认值
  input type=reset 设置重置按钮 name属性可以为其命名
  input type=submit 设置提交按钮 name属性可以为其命名
  
  select标签 与 option标签配合使用 可以设置下拉框按钮  从而checked=“checked”属性也可以设置默认
  textarea标签可以设置文本输入框 默认信息位置在两标签之间
  
  2.运用表格格式化表单使其更整齐
  3.form标签增加了action属性确定了其提交发送的地址 method属性确定了发送的方法
       method属性有  get：发送信息可以以 name=value显式
                          很不安全
                    post：发送的信息不会被显式，比较安全
  4.其他标签
     div标签  独自占一行
     span标签  中间有多少个字符就是多少个字符
     p标签（段落标签） 前空出一行在进行文字输入
  -->
  <form action="https://localhost"  method="get">
      <table align="center">
          <tr>
              <td>用户名：</td>
              <td><input type="text" value="默认名"></td>
          </tr>
          <tr>
              <td>密码：</td>
              <td><input type="password" value="123456"></td>
          </tr>
          <tr>
              <td>确认密码：</td>
              <td><input type="password" value="123456"></td>
          </tr>
          <tr>
              <td>性别：</td>
              <td><input type="radio" checked="checked">男<input type="radio">女</td>
          </tr>
          <tr>
              <td> 兴趣爱好：</td>
              <td><input type="checkbox" checked="checked">Java
                  <input type="checkbox">C
                  <input type="checkbox">C++
              </td>
          </tr>
          <tr>
              <td>国籍：</td>
              <td><select>
                  <option checked="checked">中国</option>
                  <option>英国</option>
                  <option>伊拉克</option>
              </select></td>
          </tr>
          <tr>
              <td>自我评价：</td>
              <td><textarea rows="5" role="10">默认信息位置</textarea></td>
          </tr><tr>
              <td><input type="reset"></td>
              <td><input type="submit"></td>
          </tr>
      </table>
  </form>
</body>
</html>