HTML CSS 学习笔记
2024-05-10 23:42:51
(77条消息) EditPlus下载安装及基本设置_沧海黎明的博客-CSDN博客_editplus怎么下载
第一个HTML
<!--1.这是HTML的注释2.加上以下的代码的第一行就表示HTML5的语法，去掉就说明是HTML4.03.HTML不区分大小写，语法松散不严格
-->
<!doctype html>
<html><head> <title>第一个HTML程序</title></head><body>欢迎学习html</body></html>
HTML的基本标签
<html><head><title>这是标签</title></head><!--换行--><body><p>她才刚把这东西放进去，还没化开呢！无奈初月已经在她面前急的上窜下跳，一副再不走全TM吃屁的样子，笙歌抄起裤兜里拿来应急的一双筷子匆匆搅拌了几下，差不多到个看不出来的地步，笙歌抽出筷子一撮，看的初月直楞，最后一个爆炒栗子砸她头上</p><p>她才刚把这东西放进去，还没化开呢！无奈初月已经在她面前急的上窜下跳，一副再不走全TM吃屁的样子，笙歌抄起裤兜里拿来应急的一双筷子匆匆搅拌了几下，差不多到个看不出来的地步，笙歌抽出筷子一撮，看的初月直楞，最后一个爆炒栗子砸她头上</p><!--换行--><h1>世界还是很美好的</h1><h2>世界还是很美好的</h2><h3>世界还是很美好的</h3><h4>世界还是很美好的</h4><h5>世界还是很美好的</h5><h6>世界还是很美好的</h6><!--换行标签,br是一个独目标签-->Hello,world!Hello,<br>world!<hr><hr color="red" width=50%><!--预留格式--><pre>for(i=0;i<100;i++){}</pre><!--粗体字，斜体字，删除字--><del>删除字</del><b>加粗字</b><l>斜体字</l><ins>插入字</ins>10<sup>2</sup>10<sub>2</sub><br><font color="red" size=50>你好</font></body>
</html>
实体符号
实体符号总是以&开头，然后以;结束
<html>
<title>实体符号</title>
<!--实体符号总是在-->
<body>
<!--<表示的是小于的实体符号，>表示的是大于的实体符号-->a<b>ca b c <br><!--&absp;表示的是空格的实体符号-->a c b
</body>
</html>
表格
<html><title>表格</title><body><br><br><br><br><center><h1>员工信息列表<h1></center><hr><table align="center" border="2px" width="30%" height="150px"><!--align表示的是放的位置--><tr align="center"><td>a</td><td>b</td><td>c</td></tr><tr><td>a</td><td>b</td><td>c</td></tr><tr><td align="center">a</td><td>b</td><td>c</td></tr></table></body>
</html>
<html><title>合并单元格</title><body><table align="center" border="1px" width="50%"><tr align="center"><!--th标签也是单元格但是比td多了加粗和居中--><!--<td>1</td><td>2</td><td>3</td>--><th>1</th><th>2</th><th>3</th></tr><tr><td>10</td><td>20</td><td rowspan=2>30</td></tr><tr><td>01</td><td>02</td></tr></table></body>
</html>
背景图片设置
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>背景颜色和背景图片</title></head><body bgcolor="red"background="img/t018bb7e86156b2f37f.jpg"></body>
</html>设置图片
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>设置图片</title></head><!-- 这里面同样是可以设置图片的路径，宽度以及名称 --><!-- img开头 这是单目的文件 src里面设置图片的位置 width设置图片的大小 不去设置高度否则会失真 title是鼠标点击在上面会提示的文字 --><!-- alt里面放置的是图片找不到了的提示信息 --><!-- 在开始结束标签里面有一种写法就是把前面删了，然后后面加个/ --><body><img src="img/t018bb7e86156b2f37f.jpg" width="800px" title="小猫咪"alt="图片找不到了"/></body>
</html>超链接文本
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>超链接文本</title></head><body><a href="https://www.bilibili.com/">b站</a><a href="https://www.baidu.com/">百度</a><br /><br /><!-- target里面可以放很多东西像_blank表示的是在新窗口中打开 _self表示的是在当前窗口中打开 --><a href="html-01.html">01</a><a href="html-01.html" target="_blank">01</a></body><!-- 超链接的作用就是可以通过客户端像服务器端发送请求 --><!-- 超链接和在网站上去写url发送请求是没有区别的，超链接更傻瓜式 -->
</html>列表
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>列表</title></head><body><!-- 有序列表 --><ol type="I"><li>蔬菜<ol><li>油菜</li><li>油麦</li></ol></li><li>水果</li><li>甜点</li></ol><!-- 无序列表 --><ul type="circle"><li>中国<ul type="square"><li>北京<ul type="disc"><li>北京</li><li>清华</li><li>北大</li></ul></li><li>天津</li><li>上海</li></ul></li><li>美国</li><li>日本</li></ul></body>
</html>html最重要的内容：form表单
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><form action="https://www.baidu.com/"><table><tr><td>用户名</td><td><input type="text" name="username"/></td></tr><tr><td>密码</td><td><input type="password" name="password"/></td></tr><tr align="center"><td colspan="2"><input type="submit" value="登录" /> <input type="reset" value="清空"/></td></tr></table></form></body>
</html>
只有添加了name之后才会传递数值，否则不能传递数值 不填写数值默认提交的是空字符串
用户表单的实现内容：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><!-- method是post不会将信息显示到浏览器的搜索这里，是get则会显示 --><form action="http:www.baidu.com" method="post">账号<input type="text" name="username"/>密码<input type="password" name="password"/><br>确认密码<input type="password"/>性别<input type="radio" name="gender" value="1" checked/>男<input type="radio" name="gender" value="0"/>女兴趣爱好<input type="checkbox" name="interest" value="smoke"/>喝酒<input type="checkbox" name="interest" value="smoke"/>抽烟<select name="gender"><option value="gz">高中</option><option value="college">大学</option></select><!-- 文本域没有value属性，往文本域中添加的就是文本属性 --><textarea rows="10" cols="5" name="text"></textarea><input type="submit" value="注册"/><input type="reset" value="清空"/></form><!-- 超链接提交的数据都是固定不变的，超链接提交的都是get请求 --><a href="https://lanqiaocompetition.acmcoder.com/cand/login?yu49rqhj">提交</a></body>
</html>
<select multiple="multiple"><option>河北</option><option>河南</option><option>北京</option><option>天津</option></select>
file控件：可以选择文件
<body><input type="file"/></body>隐藏域的hidden控件：
<form action="html-01.html"><input type="hidden" name="xiaoyang" value="15"/><input type="submit" value="提交"/></form>
readonly和disabled
readonly和disabled都是只读，但是disabled不能提交到服务器
<form action="http://localhost:8080/taobao/save">yyyyy<input type="text" name="yyyy" value="YYYY" readonly/>xxxxx<input type="text" name="xxxx" value="XXXX" disabled/><input type="submit" value="提交"/></form>
maxlength可以设置输入的最大的字符的数量
ZZZZZ<input type="text" name="zzzz" value="zzzz" maxlength="5"/>
name要是没有数据不会提交，不希望提交就不需要设置name，提交才需要设置name
html中的元素id属性：
每个html元素都有自己的元素属性
div和span
<div id="121"><div>nihaoa</div></div></body>
CSS：层叠样式表语言
修饰HTml元素中的某些样式，让html元素更好看
css就是用来修饰html的所以新建的文件还是html文件
常见的要会写，其他人写的可以看懂：
最常用的方式：
<head><meta charset="utf-8"><title>css引入第一种方式</title></head><body><div style="width: 300px;height: 200px;background-color: aqua;display: block;border: red;border-width: 1px;border-style: solid;"</body>
id选择器，根据id来选择css的标签
<head><meta charset="utf-8"><title>根据id来选择样式</title><style>#usernameerror{color:red;font-size: 15px;}</style></head><body><span id="usernameerror">对不起你的用户名不能为空</span></body>
根据标签来选择，标签选择器：
<head><meta charset="utf-8"><title>根据标签来选择</title><style>div{width: 300px;height: 200px;background-color: aqua;display: block;border: red;border-width: 1px;border-style: solid;}</style></head><body><div></div><div></div><div></div></body>
根据类来选择样式（可以跨标签）：
<head><meta charset="utf-8"><title>根据类来选择</title><style>.myclass{border: 1px solid red;width: 400px;}</style></head><body><select class="myclass"><option>专科</option><option>本科</option></select><br /><br /><br /><br /><input type="text" class="myclass"/></body>
什么是样式表：CSS和HTML结合的方式，其实就是问你css的代码放在哪里比较合适。CSS代码理论上的位置是任意的，但通常写在<style>标签里。只要是<style>标签里的代码，那就是css代码，浏览器就是这样来进行解析的
（1）采用
<link>标签。例如：<link rel = "stylesheet" type = "text/css" href = "a.css"></link>rel是relationship的英文缩写 stylesheet中style是样式的意思,sheet是表格之意,总起来是样式表的意思 rel="stylesheet" 描述了当前页面与href所指定文档的关系.即说明的是,href连接的文档是一个新式表
第三种：链接进来css文件：
<head><meta charset="utf-8"><title>链入外部文件来修改样式</title>
<!-- <link rel="stylesheet" type="text/css" href="file:///D:/系统固有/文档/HBuilderProjects/csspractice/css/css-01.css"/> --><link rel="stylesheet" type="text/css" href="css/css-01.css"/></head><body><a href="http://www/baidu.com">百度</a><span id="baiduSpan">点击链接到百度</span></body>
list-style-type一般都要设置为none：
<head><meta charset="utf-8"><title>列表样式</title><style type="text/css">ul{list-style-type:none;}</style></head><body><ul><li>中国<ul>北京</ul><ul>上海</ul><ul>重庆</ul></li><li>美国</li><li>俄国</li></ul></body>
绝对定位：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>css的绝对定位</title><style type="text/css">#div1{background-color: red;border:1px black solid;width:300px;height:300px;position: absolute;left: 100px;top:100px;}</style></head><body><div id="div1"></div></body>
</html>
HTML CSS 学习笔记相关推荐
- CSS学习笔记--浮动元素由于浏览器页面缩小而被挤到下面的解决方法
CSS学习笔记--浮动元素由于浏览器页面缩小而被挤到下面的解决方法 参考文章: (1)CSS学习笔记--浮动元素由于浏览器页面缩小而被挤到下面的解决方法 (2)https://www.cnblogs. ...
- 前端篇--------1.css学习笔记
1.css 单行文本换行溢出解决方案(css三件套) white-space:nowrap overflow:hidden text-overflow:ellipsis 2.css m ...
- HTML/CSS学习笔记03【CSS概述、CSS选择器、CSS属性、CSS案例-注册页面】
w3cschool菜鸟教程.CHM(腾讯微云):https://share.weiyun.com/c1FaX6ZD HTML/CSS学习笔记01[概念介绍.基本标签.表单标签][day01] HTML ...
- HTML/CSS学习笔记02【表单标签】
w3cschool菜鸟教程.CHM(腾讯微云):https://share.weiyun.com/c1FaX6ZD HTML/CSS学习笔记01[概念介绍.基本标签.表单标签][day01] HTML ...
- HTML/CSS学习笔记01【概念介绍、基本标签】
w3cschool菜鸟教程.CHM(腾讯微云):https://share.weiyun.com/c1FaX6ZD HTML/CSS学习笔记01[概念介绍.基本标签.表单标签][day01] HTML ...
- CSS学习笔记 display属性
CSS学习笔记05 display属性 HTML标记一般分为块标记和行内标记两种类型,它们也称块元素和行内元素. 块元素 每个块元素通常都会独自占据一整行或多整行,可以对其设置宽度.高度.对齐等属性, ...
- CSS学习笔记-04 a标签-导航练习
个人练习,各位大神勿笑 .. <!DOCTYPE html> <html lang="en"> <head><meta charset= ...
- div+css学习笔记一（转）
div+css学习笔记一 (2011-05-12 07:32:08) 标签: div css 居中 背景图片 ie6 ie7 margin 杂谈 分类: 网页制作 1.IE6中用了float之后导致m ...
- HTML+CSS学习笔记（3）- 认识标签（2）
HTML+CSS学习笔记(3)- 认识标签(2) 1.使用ul,添加新闻信息列表 在浏览网页时,你会发现网页上有很多信息的列表,如新闻列表.图片列表, 这些列表就可以使用ul-li标签来完成.ul-l ...
- CSS 学习笔记 - 盒模型
CSS学习笔记 - 盒模型 外边距margin 内边距padding 背景background 背景图background-image 边框border 样式 宽度 颜色 圆角 边框图片border- ...
最新文章
- java和jdbc对应关系,JDBC类型与JAVA类型对应关系
- java 版本SQLHelper
- BroadcastReceiver应用详解（转）
- micropython仿真器_Micropython教程之TPYBoard DIY超声波测距仪实例演示
- golang 包含 数组_Golang数组类型
- 流量劫持能有多大危害？
- 修改系统时间导致myeclipse不能自动发布的解决方法
- 【Docker】elasticsearch 监控工具 elasticsearch-HQ Unable to create connection to: http://localhost:9200
- 喂不饱的滴滴，也要撇开腾讯另立门户了
- 解决从PDF复制出来的文字总是换行的小技巧
- QCC3024/QCC3034/QCC3020/QCC3021/QCC3031 USB AUDIO USB声卡 双向动态切换功能
- bootstrap+javascript制作体重标准计算器
- android studio使用雷电模拟器详细过程（或其他）
- mac多个html合并,如何在Mac上将多页文件扫描合成一个PDF文档
- 一文读懂VargFacenet
- swiper.js显示指定图片
- 《LabVIEW数据采集》视频教程第19集:数值型数据—复数
- Redis 的主从复制
- 真的以为看过几本理财书籍就能实现财富自由？
- codeforces1404C Fixed Point Removal