码迷,mamicode.com
首页 > Web开发 > 详细

html+css

时间:2018-09-14 23:53:34      阅读:197      评论:0      收藏:0      [点我收藏+]

标签:abs   ima   3.1   图片   标记语言   布局   常用标签   pos   合并   

1. 什么是html

hyper 超级 text 文本 markup 标记 language 语言
超文本标记语言,俗称网页

2. html 文件结构

.html 或 .htm 结尾的文本文件

1) 标签一般成对出现:<标签名> </标签名>
2) 最外层的标签<html></html> 其它标签必须在它之内
3) doctype 用来说明html的版本 如:<!DOCTYPE html>

###1 .格式

<html>
    <head>
        <meta charset="utf-8">
        <title>网页标题</titie>
    </head>
    <body>
        要显示的内容
    </body>
</html>

head标签主要用来引入外部的样式和脚本文件, 还可以用来定义编码和标题
主要的是网页中与内容无关的部分

body标签里放的是要显示的内容部分

3. 常用标签

3.1 标题标签
<h1>...<h6> 标题从1到6,字号依次减小

3.2 段落标签(正文)
<p> 可以起到内容换行的作用, 普通文本是不会自动换行的

3.3
分隔符 <hr> 不需要结束标签, 加一道横线
换行符 <br> 不需要结束标签, 起到换行的作用

3.4 标签的属性: 格式 : 属性名="属性值"
可以用来定义标签的宽、高、颜色等等

3.5 图片标签 img
src 属性代表图片路径
更多注释内容
alt 是图片访问不到时的提示文字
width 表示宽度(单位是像素)
height 表示高度(单位是像素)

3.6 超链接 a 【重点】
href 属性 表示跳转的目标
方式1:两个网页之间跳转:

<a href="目标网页的地址">超链接提示文字</a>

方式2:网页内跳转 (锚点)

<a href="#另一个标签的id值">超链接提示文字</a>

方式3:图片作为超链接
<a href=""> <img src="图片路径"> </a>

3.7 列表
有序列表 (order)

<ol>
   <li>列表项</li>
</ol>

无序列表 (unorder)

<ul>
   <li>列表项</li>
</ul>

3.8表格

<table>
    <thead></thead>  头
    <tbody></tbody>  体
    <tfoot></tfoot>  脚
</table>

其中 thead, tbody, tfoot 里又可以分为行与列
&lt;tr&gt; 表示行 ‘<td>‘ 表示列
例:
<table border="1" width="100%">

编号姓名 1张三 2李四 与``类似的‘‘,他们都是代表一列,但‘‘其中的文本默认是居中并加粗 简写 table[border=1] [width=100%]>tbody>tr*2>td*2 同时生成thead和tbody 需要用() 把他们分组,平级的用+连在一起 table>(thead>tr>td*3)+(tbody>tr*4>td*3) 行1列1 conlspan用来合并行 2:代表合并2行 行1列1 rowspan用来合并列 ## 表单标签 ``` 文本框 密码框 单选, name取值相同的为一组 checked表示默认值为 复选, name取值相同的为一组 普通按钮 重置按钮 提交按钮
登录后才能评论!
分享档案
周排行
mamicode.com排行更多图片
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!