html+css
<head>
一、<meta charset="utf-8"> 编码字符集 | <title>text</title> 标题
<body>
一、< p > text</p> 段落 | <h1></h1>......<h6></h6> 标题 特点:独占一行 | <br>换行 (单标签) | <hr>水平线(单标签)
二、<strong>text</strong>粗体 | <del>text</del> 删除线 | <em>text</em> 斜体 字体基础样式.
三、<div>标签</div> 容器 特点:独占一行 | <span>标签</span>空标签 容器 特点:无功能
容器特点:1、结构化可以分块布局 2、样式可以绑定化操作(绑定父级)
四、HTML特殊符号编码:开头&结尾;
常用: ;空格 <;小于符 >;大于符
五、无序列表与有序列表
无序列表:<ul><li>text</li> ......<li>text</li></ul> line-style:none 去除圆点 type="disc"默认实心圆 type="cirde" 空心圆
<ul>
<li type="circle">迈克尔·杰克逊</li> <li>李小龙</li> <li>贝克汉姆</li> </ul>
有序列表:<ol><li>text</li> ......<li>text</li></ol> 序号5种表达方式:type="1"(按数字排序) type="a/A"(按小写/大写字母排序) type=“i/I” (说明:字母i;按罗马小写/大写排序)
start="110"(说明:引号里写数字,指从第几个开始排序;此例为从第110个开始排序) reversed="reversed" 倒排序
<ol> <li>迈克尔·杰克逊</li> <li>李小龙</li> <li>贝克汉姆</li> </ol>
六、img 标签(单标签)
<img src="路径" alt="图片占位符,用于图片出错提示" title=“图片提示符,描述文本”>
地址分为三类:1、网络上的URL;2、本地的绝对路径;3、本地的相对路径
七、a 标签
作用1:超链接
<a href="http://网址" target=“_blank”></a> target="_blank" 在新窗口打开
注意:网址一定要写全 a标签可以包括任何标签
作用2:定锚点
<a href="#aa">内容</a> 通过选择器定锚点:例如置顶按钮
作用3:打电话
<a href="tel:17560045637">叶子说它不孤独</a> 经常用在手机端:给叶子说它不孤独拨打电话
作用4:协议限定符
<a href="javascript:JS代码">内容</a> 运行 JS 命令
作用5:发邮件(不常用)
<a href="mailto:327944239@qq.com">叶子说它不孤独</a> 给叶子说它不孤独发邮件
八、form 表单标签
1、输入框 form需要配合input使用
<form action="" method="get"> <!-- 登录 --> <p> 用户名:<input type="text" name="username" id="" value="" /> 文本输入框 text </p> <p> 密 码:<input type="password" name="password" /> 密码输入框 password </p> <p> <input type="submit" id="" name="" value="登录"/> 提交、登录按钮 submit </p> </form>
action 发送对方的网址 method="get/post" 发送方式
2、单选框 form需要配合input使用
<form method="get" action="">
1.莱昂纳多<input type="radio" name="star" value="xialai" checked="checked"/> checked="checked" 默认选中 单选:radio 2.贝克汉姆<input type="radio" name="star" value="xiaobei"/> 3.刘杰<input type="radio" name="star" value="ajie" /> <input type="submit"/>
</form>
注意:单选name必须为一样的名称
3、复选框 form需要配合input使用
<form method="get" action="">
1.apple <input type="checkbox" name="fruit" value="apple" checked="checked"/> checked="checked"默认选中 复选:checkbox
2.orange <input type="checkbox" name="fruit" value="orange" />
3.banana <input type="checkbox" name="fruit" value="banana" />
<input type="submit"/>
</form>
4、下拉菜单 form需要配合select使用
<!-- 下拉菜单 -->
<form method="get" action="">
<select name="shengfen">
<option>山东</option>
<option>广东</option>
<option>黑龙江</option>
<option>甘肃</option>
<option>海南</option>
</select>
<input type="submit"/>
</form>