基础html和css样式总结part2

原创 2015年11月17日 21:42:58

无序列表:

  • 默认显示 li 前面自带一个圆点

<ul>
  <li>信息</li>
  <li>信息</li>
</ul>

有序列表:

  1. 前后有序,有顺序标号

<ol>
  <li>信息</li>
  <li>信息</li>
</ol>
逻辑包围板块
<div  id="版块名称">…</div>

表格:


table当表格内容非常多时,表格会下载一点显示一点,但如果加上标签后,这个表格就要等表格内容全部下载完才会显示。如右侧代码编辑器中的代码。

tr 表格的一行,所以有几对tr 表格就有几行。table row

td:表格的一个单元格,一行中包含几对…,说明一行中就有几列。 table data

th:表格的头部的一个单元格,表格表头。table head

<table summary="表格简介文本">
    <caption>标题文本</caption>
    <tr>
        <td></td>
        <td></td></tr></table>

a 标签 建立链接

<a href ="目标网址" target="——blank">click here</a>

img图片标签

<img src="图片地址" alt="下载失败时的替换文本" title = "提示文本">

HTML表单(form)。表单是可以把浏览者输入的数据传送到服务器端,服务器端程序就可以处理表单传过来的数据
输入框基本使用

<form>
  姓名:
  <input type="text" name="myName">
  <br/>
  密码:
  <input type="password" name="pass">
</form>

单选框:radio 复选框:checkbox
单选框的name值要一致

<form action="save.php" method="post" >
    <label>性别:</label>
    <label></label>
    <input type="radio" value="1"  name="gender" />
    <label></label>
    <input type="radio" value="2"  name="gender" />
    <!--type="submit"表示按钮-->
</form>

下拉列表:

<label>爱好:</label>
    <select>
      <option value="看书">看书</option>
      <option value="旅游"  selected="selected">旅游</option>
      <!--selected="selected"表示该选项默认被选中-->
      <!--css中使用/**/进行注释-->
      <option value="运动">运动</option>
      <option value="购物">购物</option>
    </select>

form表单当中的label标签

<label for="控件id名称">
<!--注意:标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。-->
<form>
  <label for="male"></label>
  <!--for="male" 对应的id="male"-->
  <!--当用户点击该lable的时候,就自动会关联相应的控件,比如上面的radio-->
  <input type="radio" name="gender" id="male" />
  <br />
  <label for="female"></label>
  <input type="radio" name="gender" id="female" />
  <label for="email">输入你的邮箱地址</label>
  <input type="email" id="email" placeholder="Enter email">
</form>

span 一小段

<span style="color:red"></span>

类选择器:

<!--类选择器的使用-->
.dada{
    color:red;
}
<span class="dada"><!--选择相应类,使用样式-->

ID选择器:

<!--ID选择器的使用-->
#dada{
    color:red;
}
<span id="dada"><!--选择相应类,使用样式-->

———新手 学习,请多指点 共勉————

版权声明:本文为博主原创文章,未经博主允许不得转载。

HTML5基础加强css样式篇(伸缩容器的简介和声明:display:flex||inline-flex)(五十一)

1为什么要有伸缩容器:    1. 使用浮动布局,无法实现等高    2.不能很快的调整DOM的顺序    3.不能很好控制子元素的位置 2.如何声明一个伸缩容器:   display:flex; ...

iOS进阶(一)之组件化开发

背景:15人左右ios团队,共同开发一个系列的app,有一些功能组件是共用的。需要节省维护成本,保持代码同步。 1,什么是公共...

HTML5基础加强css样式篇(animation填充属性:animation-fill-mode,播放控制属性:animation-play-state,播放顺序设置,)(三十一)

代码如下: .box { /* .box 默认样式 */ margin: 200px 0 0 200...

HTML5基础加强css样式篇(target目标伪类选择器应用)(十)

1.静态界面 Title html body{ margin: 0px; padding: 0px;...

HTML基础学习-10-CSS样式学习

HTML基础学习-10-CSS样式学习

HTML5基础加强css样式篇(文本裁剪,背景裁剪:background-origin,background-position,background-clip)(三十七)

1.背景定位: .box { /* .box 默认样式 */ margin: 200px 0 0 ...

HTML5基础加强css样式篇(伸缩容器子元素属性:order,flex-grow,flex-shrink,flex-basis,flex,align-self)(五十四)

1

HTML5基础加强css样式篇(background-image径向渐变函数)(四十一)

1.radial-gradient基础使用: .box { margin: 100px 0 0 100px; ...

HTML5基础加强css样式篇(animation属性animation-name,animation-delay,animation-duration,等)(三十)

1.

HTML5基础加强css样式篇(盒子阴影属性:box-shadow)(三十六)

1.box-shadow属性简介: .box { /* .box 默认样式 */ margin: ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:基础html和css样式总结part2
举报原因:
原因补充:

(最多只允许输入30个字)