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特殊符号编码：开头&结尾；

        常用：&nbsp；空格        &lt；小于符        &gt；大于符

 

 

五、无序列表与有序列表　

　　无序列表：<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>
     密&nbsp;&nbsp;&nbsp; 码：<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>

 

 

 

 

 

 

 

posted @ 2018-12-05 16:00  叶子说它不孤独  阅读(314)  评论(0)    收藏  举报