HTML+CSS

html概念：是最基础的网页开发语言
   * Hyper Text Markup Language 超文本标记语言
       * 超文本:
           * 超文本是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本.
       * 标记语言:
           * 由标签构成的语言。<标签名称> 如 html，xml
           * 标记语言不是编程语言

. 标签学习：
   1. 文件标签：构成html最基本的标签
       * html:html文档的根标签
       * head：头标签。用于指定html文档的一些属性。引入外部的资源
       * title：标题标签。
       * body：体标签
       * ：html5中定义该文档是html文档
   2. 文本标签：和文本有关的标签
       * 注释：
       *

to

：标题标签
* h1~h6:字体大小逐渐递减
*

：段落标签
*
：换行标签
*

：展示一条水平线
           * 属性：
               * color：颜色
               * width：宽度
               * size：高度
               * align：对其方式
                   * center：居中
                   * left：左对齐
                   * right：右对齐
       * ：字体加粗
       * ：字体斜体
       * :字体标签
       * :文本居中
           * 属性：
               * color：颜色
               * size：大小
               * face：字体

3. 图片标签：
       * img：展示图片
           * 属性：
               * src：指定图片的位置

       * 代码：









   4. 列表标签：
       * 有序列表：
           * ol:
           * li:
       * 无序列表：
           * ul:
           * li:
   5. 链接标签：
       * a:定义一个超链接
           * 属性：
               * href：指定访问资源的URL(统一资源定位符)
               * target：指定打开资源的方式
                   * _self:默认值，在当前页面打开
                   * _blank：在空白页面打开

CSS：页面美化和布局控制

1. 概念： Cascading Style Sheets 层叠样式表
   * 层叠：多个样式可以作用在同一个html的元素上，同时生效

2. 好处：
   1. 功能强大
   2. 将内容展示和样式控制分离
       * 降低耦合度。解耦
       * 让分工协作更容易
       * 提高开发效率

选择器：筛选具有相似特征的元素
   * 分类：
       . 基础选择器
           1. id选择器：选择具体的id属性值的元素.建议在一个html页面中id值唯一
       * 语法：#id属性值{}
       2. 元素选择器：选择具有相同标签名称的元素
       * 语法：标签名称{}
       * 注意：id选择器优先级高于元素选择器
       3. 类选择器：选择具有相同的class属性值的元素。
       * 语法：.class属性值{}
       * 注意：类选择器选择器优先级高于元素选择器
       . 扩展选择器：
           1. 选择所有元素：
               * 语法： *{}
           2. 并集选择器：
               * 选择器1,选择器2{}

           3. 子选择器：筛选选择器1元素下的选择器2元素
               * 语法：选择器1 选择器2{}
           4. 父选择器：筛选选择器2的父元素选择器1
               * 语法：选择器1 > 选择器2{}

模仿vivo官网html+css.zip

zip 0星超过10%的资源 18.41MB

下载

           5. 属性选择器：选择元素名称，属性名=属性值的元素
               * 语法：元素名称[属性名="属性值"]{}

           6. 伪类选择器：选择一些元素具有的状态
               * 语法：元素:状态{}
               * 如：
                   * 状态：
                       * link：初始化的状态
                       * visited：被访问过的状态
                       * active：正在访问状态
                       * hover：鼠标悬浮状态

属性
   1. 字体、文本
       * font-size：字体大小
       * color：文本颜色
       * text-align：对其方式
       * line-height：行高
   2. 背景
       * background：
   3. 边框
       * border：设置边框，符合属性
   4. 尺寸
       * width：宽度
       * height：高度
   5. 盒子模型：控制布局
       * margin：外边距
       * padding：内边距
           * 默认情况下内边距会影响整个盒子的大小
           * box-sizing: border-box; 设置盒子的属性，让width和height就是最终盒子的大小

       * float：浮动
           * left
           * right

html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Titletitle> <link href="css/registe.css" rel="stylesheet"> head> <body> <div> <form method="get"> <table border="1" align="center"> <tr> <td class="td_left"><label for="username">用户名label>td> <td class="td_right"><input type="text" name="username" id="username" placeholder="请输入用户名">td> tr> <tr> <td class="td_left"><label for="password">密码label>td> <td class="td_right"><input type="password" name="password" id="password" placeholder="请输入密码">td> tr> <tr> <td class="td_left"><label for="email">Emaillabel>td> <td class="td_right"><input type="email" name="email" id="email" placeholder="请输入邮箱">td> tr> <tr> <td class="td_left"><label for="name">姓名label>td> <td class="td_right"><input type="text" name="name" id="name" placeholder="请输入姓名">td> tr> <tr> <td class="td_left"><label for="tel">手机号label>td> <td class="td_right"><input type="text" name="tel" id="tel" placeholder="请输入手机号">td> tr> <tr> <td class="td_left"><label>性别label>td> <td class="td_right"> <input type="radio" name="gender" value="male" checked> 男 <input type="radio" name="gender" value="female"> 女 td> tr> <tr> <td class="td_left"><label for="birthday">出生日期label>td> <td class="td_right"><input type="date" name="birthday" id="birthday" placeholder="请输入出生日期">td> tr> <tr> <td class="td_left"><label for="checkcode" >验证码label>td> <td class="td_right"> <input type="text" name="checkcode" id="checkcode" placeholder="请输入验证码"> <img src="img/verify_code.jpg" id="img_check"> td> tr> <tr> <td colspan="2" align="center"><input type="submit" value="注册" id="btn_sub">td> tr> table> form> div> body> html>

.td_left { text-align: right; } .td_right { padding-left: 30px; } #username, #password, #email, #name, #tel, #birthday { height: 30px; border-radius: 5px; margin-top: 15px; width: 200px; } #checkcode { width: 90px; height: 28px; border-radius: 5px; margin-top: 15px; } #img_check{ width: 100px; height: 30px; vertical-align: middle; } #btn_sub{ background-color: #ffcc00; width: 80px; height: 40px; border-radius: 5px; }

相关阅读:
计算机网络知识点（七）
基于Streamlit的YOLOv5ToX模型转换工具（适用YOLOv5训练出来的模型转化为任何格式）
【Mybatis】INSERT INTO 遇到NULL怎么处理？
601-体育馆的人流量
 『忘了再学』Shell基础 — 26、cut列提取命令
 shell脚本的运行机制
 音频学习笔记之音频播放
 通过虚拟机搭建个人NAS
vue大型电商项目尚品汇（后台终结篇）day06 重磅！！！
iphone无线调试（通过wifi无线来调试真机）

原文地址：https://blog.csdn.net/weixin_49931066/article/details/126134632