HTML+CSS(1)

分类：菜鸟笔记作者：longgetaotao_06

1.新建maven项目

删除src目录(java相关的东西)创建Web目录

在这里插入图片描述

table相关

表头标签<caption></catoption>

input相关

placeholder 占位文本
maxlength 设置最大字符长度
value 设置空间的值
readonly只读

1.文本相关标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>内容<br>标题1</h1>
<h2 align="center">内容标题2</h2>
<h3 align="right">内容标题3</h3>
<h4>内容标题4</h4>
<h5>内容标题5</h5>
<h6>内容标题6</h6>
<hr>
<p>段落标签1</p>
<p>段落标签2</p>
<p>段落标签3</p>
加粗<b>标签</b>
斜体<i></i>
下划线<u>标签</u>
删除线<s>标签</s>

<h1>列表标签</h1>
<h2>无序列表</h2>
<ul><!--unordered list-->
    <li>刘备</li><!--list item-->
    <li>诸葛亮</li><li>孙尚香</li><li>刘禅</li><li>关羽</li>
</ul>
<h2>有序列表</h2>
<ol>
    <li>Java基础</li>
    <li>Java API</li>
    <li>Web前端</li>
</ol>
<h2>列表嵌套</h2>
<ol>
    <li>凉菜
        <ul>
            <li>拍黄瓜</li><li>花毛一体</li>
        </ul>
    </li>
    <li>炒菜
        <ul>
            <li>宫保鸡丁</li><li>木须肉</li>
        </ul>
    </li>
</ol>
</body>
</html>

2.个人简历

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1 align="center">个人简历</h1>
<hr>
<h2>基本信息</h2>
<p>姓名:<b>苍老师</b></p>
<p>性别:<i>男</i></p>
<p>爱好:<s>摄影</s></p>
<h2>个人经历</h2>
<ul>
    <li>小学9年</li>
    <li>中学6年</li>
    <li>高中12年</li>
</ul>
<h2>获得荣誉</h2>
<ol>
    <li>知名度最高奖</li>
    <li>达内体重达人</li>
</ol>
</body>
</html>

3.图片标签

src资源路径:
	相对路径:访问站内资源时使用
		1.资源和页面在同一目录:直接写图片名
		2.资源在页面的上级目录: ../图片名
		3.资源在页面的下级目录:文件夹名/图片名
	绝对路径:访问站外资源时使用，也称为图片盗链，有找不到图片的风险
	alt:当图片不能正常显示时显示文本
	title:图片标题 悬停在图片上显示的内容
	width/height:设置宽高
		1.像素
		2.百分比
		如果只是设置宽度，高度会等比例缩放	

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<img src="aa.png" alt="传奇哥靓照">
<img src="../b.jpg" title="你看我美吗?" width="50">
<img src="https://cdn.tmooc.cn/bsfile//courseImg///5f791c0985cc4a67a5c4dca6627155b0.jpg">
</body>
</html>

4.超链接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--href资源路径 类似图片标签的src属性-->
<a href="http://www.baidu.com">超链接1</a>
<a href="02简历练习.html">超链接2</a>
<a href="a.png">超链接3</a>

<a href="http://www.tmooc.cn"><img src="a.png" alt=""></a>
<img src="../imgs/a.jpg" alt="">
<img id="top" src="../imgs/b.jpg" alt="">
<img src="../imgs/c.jpg" alt="">
<img src="../imgs/d.jpg" alt="">
<img src="../imgs/e.jpg" alt="">
<img src="../imgs/f.jpg" alt="">
<a href="#top">回到顶部</a>
</body>
</html>

5.表格

  • 相关标签: table表格 tr表示行 td表示列 th表头 caption表格标题
  • 相关属性:border 边框 colspan跨列 rowspan跨行

    在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table border="1">
    <tr>
        <!--colspan跨列-->
        <td colspan="2">1-1</td>
        <!--rowspan跨行-->
        <td rowspan="2">1-3</td>
        <td rowspan="3">1-4</td>
    </tr>
    <tr>
        <td>2-1</td>
        <td>2-2</td>
    </tr>
    <tr>
        <td align="center" colspan="3">3-1</td>
    </tr>
</table>
<table border="1">
    <caption>购物车</caption>
    <tr><!--table head 表头 加粗并居中-->
        <th>编号</th><th>名称</th><th>价格</th>
    </tr>
    <tr>
        <td>1</td><td>康师傅冰红茶</td><td>3元</td>
    </tr>
    <tr>
        <td>2</td><td>小茗同学</td><td>6元</td>
    </tr>
</table>
</body>
</html>

6.表单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--action设置提交地址-->
<form action="http://www.baidu.com">
    <!--placeholder占位文本
    maxlength最大字符长度
    value最大字符长度
    readonly只读
    -->
    用户名:<input type="text" name="username" maxlength="5" value="tom" readonly placeholder="请输入用户名"><br>
    密码:<input type="password" name="password" placeholder="请输入密码"><br>
    <!--value设置提交的值，如果不设置则提交on checked设置默认选中-->
    性别:<input type="radio" name="gender" checked value="m" id="r1"><label for="r1">男</label>
    <input type="radio" name="gender" value="w" id="r2"><label for="r2">女</label>
    <br>
    兴趣爱好:<input type="checkbox" name="hobby" value="cy">抽烟
    <input type="checkbox" name="hobby" checked value="hj">喝酒
    <input type="checkbox" name="hobby" value="tt">烫头<br>
    生日:<input type="date" name="birthday"><br>
    靓照:<input type="file" name="pic"><br>
    所在地:
    <select name="city">
        <!--value设置提交的内容，如果不写则提交标签体的内容
        selected设置默认选中-->
        <option value="bj">北京</option>
        <option value="sh" selected>上海</option>
        <option value="gz">广州</option>
    </select><br>
    <input type="submit" value="注册">
    <!--重置按钮-->
    <input type="reset" value="重置">
    <input type="button" value="自定义按钮">
    <hr>
    <button type="submit">注册</button>
    <button type="reset">重置按钮</button>
    <button type="button">自定义按钮</button>
</form>
</body>
</html>

7.分区标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>div1</div>
<div>div2</div>
<div>div3</div>
<span>span1</span>
<span>span2</span>
<span>span3</span>
</body>
</html>

8.css引入方式

my.css文件
h3{
    color: green;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*先通过选择器找到页面中的元素，然后添加样式*/
        h2{
            color: blue;
        }
    </style>
    <!--rel关系 引入的文件和页面之间的关系-->
    <link rel="stylesheet" href="my.css">
</head>
<body>
<!--内联样式，弊端不能复用-->
<h1 style="color: red">内联样式1</h1>
<h1 style="color: red;">内联样式2</h1>
<h2>内部样式1</h2>
<h2>内部样式2</h2>
<h3>外部样式1</h3>
<h3>外部样式2</h3>
</body>
</html>

9.选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*id选择器*/
        #p1{color: red}
        /*类选择器*/
        .c1{color: blue}
        /*分组选择器*/
        h3,#p1,.c1{background-color: red}
        /*属性选择器*/
        input[type='text']{background-color: red}
        input[type='password']{color: green}
        /*任意元素选择器*/
        *{
            /*边框:粗细 样式 颜色*/
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <input type="text">
    <input type="password">
    <h3>我是h3</h3>
    <!--段落标签换行-->
    <p id="p1">苹果</p><p class="c1">香蕉</p><p>橘子</p>
    <div>冰箱</div>
    <div class="c1">洗衣机</div>
</body>
</html>

10.选择器练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #zxy{color: green}
        .c1{color: blue}
        h1,h2{background-color: yellow}
        input[type='submit']{background-color: red}
        input[type='button']{color: pink}
        *{border: 1px solid red}
    </style>
</head>
<body>
<ul>
    <li id="zxy">张学友</li><li class="c1">刘德华</li><li>郭富城</li>
</ul>
<h1 class="c1">悟空</h1><h1>八戒</h1><h1>沙僧</h1>
<h2>刘备</h2>
<input type="submit">
<input type="button" value="按钮">
</body>
</html>

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

html

相关推荐

如何学习编程？新手菜鸟如何学编程？
学习编程是顺着互联网的发展潮流，是一件好事。新手如何学习编程？其实不难，不过在学习编程之前你得先了解你的目的是什么？这个很重要，因为目的决定你的发展方向、决定你的发展速度。
it行业都是什么工作？it行业主要做什么？
IT行业是什么工作做什么？IT行业的工作有：产品策划类、页面设计类、前端与移动、开发与测试、营销推广类、数据运营类、运营维护类、游戏相关类等，根据不同的分类下面有细分了不同的岗位。
女生学Java好就业吗？女生适合学Java编程吗？
女生学Java好就业吗？女生适合学Java编程吗？目前有不少女生学习Java开发，但要结合自身的情况，先了解自己适不适合去学习Java，不要盲目的选择不适合自己的Java培训班进行学习。只要肯下功夫钻研，多看、多想、多练
mysql-connect-confused
Can’t connect to local MySQL server through socket \'/var/lib/mysql/mysql.sock问题 1.进入mysql路径
oracle基本命令
oracle基本命令 一、登录操作 1.管理员登录 # 管理员登录 sqlplus / as sysdba 2.普通用户登录
shell判断服务是否启动
一、背景 因为项目中需要通北京网络，所以需要连vpn，但是服务器有时候会断掉，所以写个shell脚本每五分钟去判断是否连接，于是就有下面的shell脚本。
SQL BETWEEN 操作符
BETWEEN 操作符选取介于两个值之间的数据范围内的值。这些值可以是数值、文本或者日期。
​​windows上传ipa到开发者中心app store的方法
假如你已经使用过苹果开发者中心上架app，你肯定知道在苹果开发者中心的web界面，无法直接提交ipa文件，而是需要使用第三方工具，将ipa文件上传到构建版本，开...
SQL 入门篇之什么是别名？
下面的 SQL 语句指定了两个别名，一个是 name 列的别名，一个是 country 列的别名。**提示：**如果列名称包含空格，要求使用双引号或方括号：
windows上传ipa文件到app store的方法​
在使用H5混合开发的app打包后，需要将ipa文件上传到appstore进行发布，就需要去苹果开发者中心进行发布。​
SQL AND & OR 运算符
+----+--------------+---------------------------+-------+---------+
C++ 数组
数组的声明并不是声明一个个单独的变量，比如 number0、number1、...、number99，而是声明一个数组变量，比如 numbers，然后使用 nu...
最全iOS 应用上架流程提交到AppStore
第一步：到appuploader官网下载辅助工具和iCloud驱动，使用前面创建的AppID登录。
SQL ALTER TABLE 语句
如需删除表中的列，请使用下面的语法（请注意，某些数据库系统不允许这种在数据库表中删除列的方式）：
dism操作巨慢
前不久在制作win11pe，制作了一版，1.26GB，太大了，不满意，想再裁剪下，发现这次dism mount正常，commit或discard巨慢，以前都很快...
三种方法卸载Symantec Endpoint Protection 赛门铁克
赛门铁克各个版本概览：https://knowledge.broadcom.com/external/article?legacyId=tech163829
python3.6、python3.10用什么版本的pip
实测Python 3.6.6用pip 21.3.1，再高就报错了，Python 3.10.7用pip 22.3.1是可以的
博通和诺顿
Broadcom Corporation （博通公司，股票代号AVGO）是全球领先的有线和无线通信半导体公司。其产品实现向家庭、 办公室和移动环境以及在这些环境...
高版本c4d在低版本windows系统上打开后不显示窗格
发现个问题，server2016上安装了c4d这些版本，低版本的正常显示窗格，但红色圈出的高版本c4d打开后不显示窗格，
基础网络windows不要使用TAT、如何卸载TAT
TAT：https://cloud.tencent.com/document/product/1340
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot