<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>赵世城的html+CSS笔记</title>
<style>
/* 选择器{样式;} */
/* 给谁改样式{改什么样式;} */
/* 属性和属性值之间以键值对的形式出现 ，且CSS需要加分号*/
/* 选择器和大括号之间、属性值前冒号后，最好保留空格 */
/* 基础选择器 */
/* 调用多类名时用空格隔开，都在一个class里 */
p {
/* 标签选择器 */
color: gold;
}
.red {
/* 类选择器，需要在下面调用,在前标签中加class="red" */
color: #ff0000;
}
.redbox {
width: 100px;
height: 100px;
background-color: rgb(255, 0, 128);
}
#green {
/* id选择器，只能调用一次，调用时使用id="green" （经常搭配JS） */
color: lawngreen;
}
/* 通配符选择器，所有元素都改，语法为*{...} */
.fonttt {
/* 可以输入多个字体，如果第一个字体没有，就会用后面的字体，字体间用逗号隔开，如果字体名有空格最好加引号（单引号双引号都可） */
font-family: '汉仪细行楷简';
}
/* 字体复合属性（简写）节约代码 */
/* 固定格式，顺序不能变font：font-style font-weight font-size/line-height font-family */
/* 其中前两个可以省略，size和family不可省 */
.fuheshuxing {
font: italic 700 16px "Microsoft yahei"
}
.juzhong {
/* 文本对齐属性 */
text-align: center;
/* center改成right就是右对齐，left就是左 */
}
.zhuangshi {
/* 装饰文本，none默认（去掉链接的下划线），underline下划线，overline上划线，line-through删除线 */
text-decoration: underline;
}
.suojin {
/* 文本首行缩进多少像素 ，负值就是凸出去 */
text-indent: 20px;
text-indent: 2em;
/* em是相对单位，当前元素大小 */
}
.hangjianju {
line-height: 26px;
/* 行间距 */
}
/* 上面都是CSS内部样式表，也可以写行内样式表或外部样式表，外部样式表引入如下（好像有点问题？）herf=文件路径 */
/* <link rel="stylesheet" herf=""> */
</style>
</head>
<body>
<h1>标题标签，最小是h6</h1>
<p>换行</p>
强制<br />换行
strong<strong>加粗</strong>的文字
b<b>加粗</b>的文字
em<em>倾斜</em>文字
i<i>倾斜</i>文字
del<del>删除线</del>
s</s></s><s>删除线</s>
<ins>ins下划线</ins>
<u>u下划线</u>
<a href="#jump">锚点链接</a>
<div class="redbox"></div>
<div>div是division(分割，分区）的缩写，无语义，布局用，是独占一行的盒子</div>
<span>无语义，布局用，一行可以写多个</span>
<h4>图像标签</h4>
<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" />
<h4>alt：替换文本</h4>
<img src="https://www.bpng" alt="图片显示不出来的时候显示的字在img里用alt连接"/>
<h4>title：提示文本，输入鼠标放到图片上显示的文本</h4>
<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" title="显示了吧哈哈哈" />
<h4>width和height设置宽高</h4>
<h4>a（anchor，锚）可以实现超链接,href加链接或者文件地址，target指定页面的打开方式，_self为默认值，_blank为在新窗口中打开</h4>
<a href="https://www.baidu.com/" target="_blank"> 百度</a>
<h3 id="jump">test</h3>
<h3>"注释标签，快捷键为ctrl+/<!--注释标签-->"</h3>
表格语法，tr是列td是行，th是表头
<table width="500" height="249"border="1" cellspacing="0">
<tr><th class="red">姓名</th><th>性别</th><th>年龄</th></tr>
<tr><td>赵世城</td><td>男</td><td>20</td></tr>
<tr><td>跨列合并</td><td colspan="2"></td></tr>
<tr><td>跨行合并</td><td rowspan="2"></td><td>20</td></tr>
<tr><td></td><td></td></tr>
</table>
表格结构标签，thead定义表格头部，tbody定义表格主体。都放在table中
<h4>无序列表ul：规范中ul里只能放li，其他东西都要放到li里</h4>
<ul>
<li class="fuheshuxing">榴莲</li>
<li>臭豆腐</li>
<li>鲱鱼罐头</li>
</ul>
<h4>有序列表ol：会自动加1.2.3.</h4>
<ol>
<li>列表项1</li>
<li>列表项2</li>
</ol>
<h4>自定义列表dl：类似于一列带表头的表格里面有dt和dd</h4>
<dl>
<dt>名称1</dt>
<dd>解释1</dd>
<dd>解释2</dd>
</dl>
<h2>表单：文本框</h2>
<h4>输入表单元素input</h4>
<form action="xxx.php" method="get">
用户名：<input type="text" value="最多6字符"maxlength="6"><br>
密码：<input type="password" value="请输入密码"><br>
name是表单元素的名字，单选按钮必须有相同的name<br>
label标签可以让用户点击图片或文本时,聚焦到表单元素上,需要for和id相同(如男)<br>
性别：<label for="text">男</label><input type="radio" name="sex"value="男" id="text"> 女<input type="radio" name="sex" value="女">扶她/扶他<input type="radio" value="人妖"name="sex"><br>
复选框<input type="checkbox">
单选框和复选框设置checked属性，默认选中<br>
<input type="submit" value="提交按钮">
<input type="reset" >
submit和resrt要放到from里<br>
<input type="button" value="只是一个按钮">
<input type="file">
</form>
<br>
下拉表单元素select<br>
籍贯<select>
<option>辽宁</option>
<option>黑龙江</option>
<option>吉林</option>
<option>外星</option>
<option selected="sleected">selected编辑默认选项</option>
</select>
<br>
<h4>文本域元素textarea</h4>
<form>
反馈:<textarea>
cols=每行字数，rows=显示行数，但是都是用css实现
</textarea>
</form>
<h2 class="fonttt">使用CSS将字体改为汉仪细行楷简</h2>
</body>
</html>下滑进入正文~~~~~~~网站已部署SSL证书，您正以https安全访问