HTML&CSS基础

来源：互联网发布：网络分流器怎么连接图编辑：程序博客网时间：2024/05/29 16:12

1.网站，网页

2.com盈利性组织 .cn 中国

.edu教育机构 .gov 政府机构

3.域名

dns域名解析

4.html 超文本标记语言——控制结构

5.css 层叠样式表——控制样式标题

基本结构：

 <head>      <title>题目</title>  </head> <body>     …………内容 </body>

6.浏览文件快捷键：alt+f2

刷新：F5

7.放图片 ctrl+c——ctrl+v

8.该文件名字：shift+F6

9.段落文本：<p>...</p>

10.<h1>......</h1> 标题一 ——一个页面中只能有一个标题一

<h2>......</h2> 标题二其他标题可以有多个
……
<h6>......</h6> 标题六

11.图片标签：<img src=”图片路径” alt=”说明” title=”注释”/ >
单标签属性名=属性值

12.测试路径：ctrl+鼠标悬停

13.一个图片，一个img。

14<img … title=” ” width=”宽” heigh=”高”>

 名称  属性      宽和高一般只设一个，另一个等比例缩放

15.超链接:<a href=”http://www.baidu.com” >百度</a>

         跳转

<a  href=”…/页面名称” target=”目标窗口”></a>

        跳转目标，地址

目标窗口：_blank 新页面

      _parent  原页面

16.单标签：<br> 换行

       <hr>  一条线分隔线

<hrsize="线的粗细" color="线的颜色" width="线的宽度">

17.颜色表示方式：

red （英文单词）

#ff0000

rgb(255,0,0)

18.文本效果：

 <spn> 普通文字——最常用 <b> 定义粗体文本 <em>  定义着重文字 <i>   定义斜体字 <small>   定义小号字 <strong> 定义加重语气 <sub>      定义下标字 <sup>      定义上标字 <ins>        定义插入字——定义已经被插入文档中的文本 <del>       定义删除字

19.<pre>……</pre>

预格式化 ——空格，换行均显示

网页中有两种输入空格方式：

<1>  表示一个半角空格

<2>全角状态下

20.无序列表

<ul type="circle">    <li></li>    <li></li></ul>type="square/disc/circle" 方块/圆点/空心圆   默认为disc

例如：

<ul type="circle">    <li>one:12345678</li>    <li>two:12345678</li></ul>

效果:

one:12345678
two:12345678

21.有序列表

<ol type="类型" start="起始数字">             <li></li></ol>type="aA 1 I i"

例如：

<ol type="I" start="3">    <li>one</li>    <li>two</li>    <li>three</li></ol>

效果:

one
two
three

22.自定义列表

<dl>            <dt>标题</dt>            <dd>描述</dd></dl>

例如：

<dl>    <dt>Web 前端</dt>    <dd>这是第一门课程</dd></dl>

效果：

Web 前端: 这是第一门课程

23.表格

<table cellspacing="单元格间距" cellpadding="单元格填充" border="边框线"><caption>表头</caption>             <tr>                      <td></td>             </tr></table>table表示表格

tr表示行

td表示单元格

th表示标题单元格

caption表示表头

colspan=”跨列数”

rowspan=”跨行数”

例如：

<table border="1" cellspacing="0" cellpadding="0" width="800px">    <caption>个人信息表</caption>    <tr>        <th>姓名</th>        <td>张三</td>  </tr>    <tr>        <th>性别</th>        <td>男</td>    </tr>    <tr>        <th>年龄</th>        <td>33</td>    </tr></table>

效果：

个人信息表姓名张三性别男年龄 33

24.表单：

<faction="提交目标地址" method="get/post"></form>

表单元素：

 单行文本框<input type="text"/>

多行文本域 <textarea></textarea>

密码框： <inputtype="password"/>

单选按钮 <inputtype="radio" name="">

注：name值相同表示单选按钮组

复选框：<inputtype="checkbox"/>

文件域：<inputtype="file"/>

提交按钮：<inputtype="submit"/>重置按钮：<inputtype="reset"/>普通按钮：<inputtype="button">按钮<button></button>

下拉菜单<select>         <option value="" selected></option></select>

下拉列表<select multiple>         <option value="" selected></option></select>

例如：

<p>姓名：<input type="text"/></p>

<p>密码：<input type="password"/></p>

<p>性别：<input type="radio" name="sex"  checked/>女               <input type="radio" name="sex"/>男</p>

 地址： <select>        <option value="陕西" selected>陕西</option>        <option value="广东" >广东</option>        <option value="河北" >河北</option>        <option value="山西" >山西</option>    </select>

<p><input type="submit"/></p><p><input type="reset"/></p><p><a href="http://www.baidu.com">忘记密码</a></p>

效果图：
这里写图片描述

阅读全文

0 0