黑马程序员 HTML基础

最新推荐文章于 2022-06-25 15:58:09 发布

song_zheng

最新推荐文章于 2022-06-25 15:58:09 发布

阅读量823

点赞数

分类专栏：黑马程序员文章标签： HTML 黑马程序员

本文链接：https://blog.csdn.net/song_zheng/article/details/9264823

版权

黑马程序员专栏收录该内容

10 篇文章 0 订阅

订阅专栏

------- Windows Phone 7手机开发、.Net培训、期待与您交流！ ------

一、常用HTML标签及属性：

body：bgcolor表示背景颜色

<img>：src指明图片的链接地址，alt表示在图片无法显示的时候显示的文字。注意图片是链接的，不是插入的。border属性指定边框，border="0"不显示边框，width、height属性知道图片的显示大小，如果不指定则是图片的原始大小。（最好指定width、height，这样即使图片还未加载完，也会先占据位置）

缩略图：如果要在网页上显示小图（比如缩略图），不要仅仅把大图设定小的width、height来使图片变小，因为这样仍然会下载大图，导致加载速度慢，增大服务器的压力。

font：color文字颜色

<center>居中显示

<h1>~<h6>标题大小

二、常用特殊符号：

< 小于号，less than

> 大于号，greater than；

  空格,no-break space

为什么HTML中<>要用<、>代替？因为<>有特殊的含义

三、 <br/>和<p>的区别？

回车只是换行，p定义段落，前后会有空白行。

四、 URL：资源在网络中的地址

相对URL：相对于当前文档的资源，"/"表示网站根目录，"../"表示父目录,"../../"表示父目录的父目录，"./"或者不写任何斜线，表示相对于当前路径的目录。站内引用最好用相对URL，这样域名改变了、目录改变了都不受影响。如：<ahref="a.html"><img src="a.jpg"/></a>

<a>的target属性：值"_blank"就是在新窗口中打开超链接（国内网站大多采用这种方式）；

<a>的锚点：用name属性给<a>起名字，<a name="last">这是是最后</a>。可以通过<ahref="#last">转到最后</a>来跳转到超链接的部分。

五、 ul和ol

ul：unordered list，无序列表

<ul>

    <li>灌水区</li>

    <li>版务区</li>

</ul>

ol：ordered list，有序列表，用的很少

table表格

<!--table的用法-->
<table border="1">
    <tr><td>姓名</td><td>年龄</td></tr>
    <tr><td>tom</td><td>20</td></tr>
    <tr align="center"><td>Jim</td><td align="right">23</td></tr>
</table>

在<table>内部通过<tr>创建一行，<td>创建单元格。默认table没有边框，属性<table border="1">设置边框的宽度为1。

<tr>的属性：align（水平对齐方式），可选值left、righ、center；valign（垂直对齐方式），可选值top、middle、bottom。

<td>也有alig和valign

align对齐方式，如<tr align="center">整行中间对齐，<td align="right">单个单元格右对齐。

子标签默认继承父标签的属性，也可以单独指定该属性，将覆盖父标签的属性。

六、表单

表单的作用：将用户输入的内容提交到服务器。

<form>：如果要提交数据到服务器，需要把<input>、<textarea>、<select>等表单元素放到form中。

<input >是主要的表单元素，示例：<input type="submit" />。

type的可选值有：submit（提交按钮）、button（普通按钮）、checkbox（多选框）、radio（单选按钮）、file（文件选择框）、hidden（隐藏字段）、image（图片按钮）、password（密码框）、reset（重置按钮）、text（单行文本框）、textarea（多行文本框）

input表单详解：

subit：点击submit按钮表单就会被提交到服务器，中午IE下默认按钮文本是“提交查询”，可以设置value属性修改按钮的显示文本。

text：size设置宽度，value为值，maxlength为可以输入的最大长度，readyonly只读。推荐<input type="text" readonly="readonly"/>。

checkbox：checked属性表是否被选中，推荐写法：<inputtype="checkbox" checked="checked"/>。

radio：相同name属性的为一组，不同readio设定不同的value值，这样通过name属性就知道谁被选中了，不用单独判断。

file：使用file，则form的enctype必须设置为multipart/form-data、method属性为post。

image：src属性指定图片的地址，用来美化按钮。

七、 select标签

单行下拉列表框，示例代码如下：

    <select>
        <option value="1">北京</option>
        <option value="2">河南</option>
        <option value="3">山东</option>
    </select>

<option>：<option value="1">北京</option>，北京是显示的文本，value是值。

将一个option选中：<option value="2"selected="selected">河南</option>

实现“不选择”：<optionvalue="-1">--不选择--</option>

实现“多选”：<selectsize="2" multiple="multiple">

<optgroup>：为选项分组，示例代码如下：

<select>
      <optgroup label="Swedish Cars">
        <option value ="volvo">Volvo</option>
        <option value ="saab">Saab</option>
      </optgroup> 
      <optgroup label="German Cars">
        <option value ="mercedes">Mercedes</option>
        <option value ="audi">Audi</option>
      </optgroup>
 </select>

八、 textarea

多行文本框，属性rows、cols控制TextArea的行高和列宽。

给textarea默认值：<textarea>我是默认值</textarea>。

九、 label

作用：修饰元素A，就相当于将焦点聚焦到A。代码示例：

    <label for="isMarried">婚否</label> <input id="isMarried" type="checkbox" />

点击“婚否”，等于点击了id为isMarried的input。

十、 filedset

相当于WinForm中的Groupbox效果，将一些控件划分为一个区域，看起来更规整。

十一、 div

层：<div></div>将内容放到层中，就可以将这些内容当作一个整体进行处理，比如整体隐藏、整体移动。

十二、 span

div是将内容放到一个矩形的区块中，会影响布局，而span只是将一段内容定义成一个整体进行操作，但不会影响布局显示。

十三、练习（登录页面）

<form action="index.htm" method="post">
    <table>
        <tr><td colspan="2" align="center">登录</td></tr>
        <tr><td>用户名</td><td><input type="text"/></td></tr>
        <tr><td>密码</td><td><input type="password"/></td></tr>
        <tr><td colspan="2"><input id="remember" type="checkbox" /><label for="remember">记住我？</label></td></tr>
        <tr><td colspan="2" align="center"><input type="submit" value="登     录" /></td></tr>
    </table>
</form>

十四、练习（注册页面）

<form action="index.htm" method="post">
<table>
    <tr>
        <td colspan="2" align="center">
            注册
        </td>
    </tr>
    <tr>
        <td>
            用户名
        </td>
        <td>
            <input type="text" />
        </td>
    </tr>
    <tr>
        <td>
            密码
        </td>
        <td>
            <input type="password" />
        </td>
    </tr>
    <tr>
        <td>
            重复密码
        </td>
        <td>
            <input type="password" />
        </td>
    </tr>
    <tr>
        <td>
            省份
        </td>
        <td>
            <select>
                <option>北京</option>
                <option>重庆</option>
                <option>河南</option>
            </select>
        </td>
    </tr>
    <tr>
        <td>
            性别
        </td>
        <td>
            <input type="radio" name="gender" checked="checked" />男<input type="radio" name="gender" />女<input
                type="radio" name="gender" />保密
        </td>
    </tr>
    <tr>
        <td>
            职业
        </td>
        <td>
            <input type="radio" name="job" checked="checked" />学生<input type="radio" name="job" />公司职员<input
                type="radio" name="job" />其他
        </td>
    </tr>
    <tr>
        <td>
            爱好
        </td>
        <td>
            <input type="checkbox" />登山<input type="checkbox" />篮球<input type="checkbox" />足球<input
                type="checkbox" />读书<input type="checkbox" />游泳
        </td>
    </tr>
    <tr>
        <td colspan="2" align="center">
            <input type="submit" value="注册" />
        </td>
    </tr>
</table>
</form>

十五、 CSS

层叠样式表，用来美化页面。

三种使用方式：

1.元素内联，直接将样式写在元素的style属性中，如 <a href="#"style="text-decoration:none;">新浪</a>。

2.页面嵌入：在head中加入<styletype="text/css"> a{text-decoration:none;} </style>表示页面中所有的a都采用指定样式，适用于样式复用，减小页面体积。

3.外部引用：将css内容写入css后缀的文件，然后在页面中引用，在head中加入<linktype="text/css" rel="stylesheet"href="style.css"/>，适用于多个页面共享css。

1．常见样式：

计量单位：px（像素）、百分比、em（相对单位）；

background-color：背景颜色；

color：文本颜色；

border-style：边框风格，值：solid（实线）、dotted（点线）等。

border-color：边框颜色；

border-width：边框宽度；

实例：style="border-color:red; border-width:1px;border-style:dotted"，它的简写形式是：style="border:1pxdotted red"。

display：是否显示，none(不显示）、block（显示为块元素）、inline（显示为内联元素）等。

cursor：鼠标样式，可选：pointer（手）、text（输入bean）、wait（忙）、help（帮助）等。

取出li的原点：list-style-type:none;

2．CSS选择器：

（1）class选择器：

定义一个命名样式，然后在元素的class属性指定该名称，一个元素可以指定多个class名称，之间以空格隔开。

如：

 .hey{color:red;font-size:x-large;}
<span class="hey">hello，哈喽</span>

（2）标签+class选择器

针对不同的标签，可以使用相同样式名，但是样式内容可以不一样。代码示例：

input.uname{color:Red;}
       label.uname{text-decoration:underline;}
<input type="text" class="uname" />
    <labelclass="uname">用户名：甄子丹</label>

（3）ID选择器

为指定ID的元素设定样式，id前加#

（4）更多选择器

1. 关联选择器

p strong{background-color:yellow;}

表示p标签内的strong子标签使用的样式，应用如下：

<p><strong>白日依山尽</strong></p>

2．组合选择器

同时为多个标签设定同一个样式

h1,h2,input{border:1px dotted red;}

3．伪选择器

为标签的不同的状态设定不同的样式

常用的有：

A:visited 超链接被访问过的样式

A:hover，鼠标停留在超链接上时的样式

A:link 超链接未被访问时的样式

a:active超链接点击后的样式