爱站程序员基地HTML5+CSS3
技术展望
-
java+DBMS+Mybatis+Spring
-
C/S 窗体模式/服务 C#-winform java-swing
-
B/S浏览器/服务器 html5+css+js+(java/python/c#/php)
-
html/css
-
js+vue.js+bootstrap
-
Spring+SpringMVC+Mybatis
-
Springboot
HTML
基本知识
- 超文本标记语言
- 多媒体及文本
标签
-
双标签：< 标签名 属性=“ ”>文本，子标签</标签名>
-
单标签：
元素：从标签开始到标签结束
语言特点
- 描述性语言，无逻辑
- 语言结构为树形结构
第一个案例
<!DOCTYPE html><html><head><meta charset=\"utf-8\"><title>This is my first webhtml</title></head><body>这是正文内容<h1>Hello world</h1></body></html>
常用标签
标题标签 <h1…6>
<h1>Hello World</h1><h2>Hello World</h2><h3>Hello World</h3><h4>Hello World</h4><h5>Hello World</h5><h6>Hello World</h6>
字体依次从大到小
<p>段落</p><br/> 换行<hr/> 划分线<a href=\"\" target=\"_blank/\">超链接</a>锚链接<a name=\"mao\"></a>用来定位<a href=\"index.html#mao\">hello</a>导航到定位位置<img src=\"\"> 图像
列表 ul ol dl
- 无序列表最为常用
<h3>无序列表</h3><ul><li>首页</li><li>Home</li><li>Login</li><li>Exit</li></ul><h3>有序列表</h3><ol><li>首页</li><li>Home</li><li>Login</li><li>Exit</li></ol><h3>定义列表</h3><dl><dt>标题</dt><dd>内容</dd><li>首页</li><li>Home</li><li>Login</li><li>Exit</li></dl>
表格
<table width=\"100px\" height=\"100px\" align=\"center\" border=\"1\" cellpadding=\"0\" cellspacing=\"0\"><tr align=\"center\"><td width=\"50px\" rowspan=\"2\">1</td><td colspan=\"2\">1</td></tr><tr align=\"center\"><td>2</td><td>2</td></tr></table>
表单
<!-- 表单 --><form id=\"login\" action=\"\" name=\"\" method=\"post\"><div><label>用户名：</label><input type=\"text\" id=\"username\" name=\"username\" placeholder=\"请输入用户名\" ></div><div><label>密 码 ： </label><input type=\"password\" id=\"password\" name=\"password\" ></div><div><label>邮 箱 ： </label><input type=\"email\" id=\"email\" name=\"email\" ></div><div><label>手 机 ： </label><input type=\"number\" id=\"phone\" name=\"phone\" ></div><div><label>性 别 ： </label><input type=\"radio\" name=\"sex\" ></div><div><label>性别：</label> <input type=\"radio\" name=\"sex\" value=\"0\" />女 <input type=\"radio\" name=\"sex\" value=\"1\" />男</div><div><label>爱好：</label> <input type=\"checkbox\" name=\"like\" value=\"game\" />游戏<input type=\"checkbox\" name=\"like\" value=\"football\" />足球<input type=\"checkbox\" name=\"like\" value=\"basketball\" />篮球</div><div><label>出生日期：</label> <select id=\"bornYear\"><option value=\"1999\">1999</option><option value=\"2000\">2000</option><option value=\"2001\">2001</option></select>年 </div><div><label>上传头像：</label><input type=\"file\" name=\"icon\" /> </div><div><label>自我介绍：</label><br><textarea rows=\"10\" cols=\"50\"></textarea></div><input type=\"submit\"/> <input type=\"reset\" /> <input type=\"button\" value=\"取消\" /></form><input readonly=\"readonly\">只读 disabled紧用
css
-
层叠样式表
-
立体的 3d的
-
用来设计HTML网页
-
内容与表现分离
语法结构
选择器{}h1{font-size: 18px;color: antiquewhite; background-color: aqua;}
选择器
- 标签选择器
p{font-size: 26px;color: #c02c38;}
- 类选择器
.title{font-size: 1.25rem;color: #FF0000;}
类选择器优先级高于标签选择器
- id选择器
#sub{font-size: 1.25rem;}
id选择器优先级高于上述两种选择器
-
复合选择器
后代选择器
h1 strong{color: plum;}
-
交集选择器 第二个必须是类选择器或者是id选择器中间没有空格
-
并集选择器 多个选择器通过逗号
精美案例
- html
<!DOCTYPE html><html><head><meta charset=\"utf-8\"><title></title><link href=\"css/style.css\" rel=\"stylesheet\" type=\"text/css\" /></head><body><!-- 先写内容 --><ul><li><span class=\"redspan\">1</span>萤火虫小巷<img src=\"\"</li><li><span class=\"redspan\">2</span>如果蜗牛有爱情</li><li><span class=\"redspan\">3</span>语言学纲要</li><li><span>4</span>管理信息系统</li><li><span>5</span>美国文学选读</li><li><span>6</span>C语言设计</li><li><span>7</span>亲密关系</li><li><span>8</span>穷爸爸富爸爸</li><li><span>9</span>细节决定成败</li><li><span>10</span>上班族妈妈</li></ul></body></html>
- css
*{padding: 0px;margin: 0px;font-size: 14px;font-family: \"微软雅黑\";}ul{border-style: solid;border-color: #DCDCDC;border-width: 0.8px;margin: 20px auto;width: 200px;}li{list-style: none;padding-left: 10px;height: 35px;line-height: 35px;border-bottom-style: dashed;border-bottom-color: #DCDCDC;border-bottom-width: 0.8px;}span{margin-right: 10px;}.redspan{color: #DC143C;font-size: 15px;font-weight: bold;}
效果如下
