html基础学习笔记-CSDN博客

本文链接：https://blog.csdn.net/yubo_725/article/details/45150077

1、HTML中的img标签可以指定图片的高度和宽度，如下代码所示：

<img src="http://s0.hao123img.com/res/img/logo/logonew1.png" width="100" height="50">

2、标题水平居中可以使用align属性，如下代码所示：

<h1 align="center">This is head title.</h1>

3、可以给body标签加上bgcolor属性，指定页面的背景颜色，如下代码所示：

<body bgcolor="#d3d3d3">
</body>

4、使用<hr/>标签可以添加水平分隔条

5、创建不带下划线的超链接可以用下面的代码：

<a href="http://www.baidu.com" style="text-decoration:none">打开百度</a>

6、通过外部css文件设置样式，使用如下代码：

<link rel="stylesheet" type="text/css" href="/css/test.css">

这句代码指定了链接到与当前文件相同目录下的css目录中的test.css文件，而test.css文件内容为：

h1 {
	background-color: #6699ff
}

7、除了通过外部文件指定样式，还可以就在当前文件中指定css样式，如下代码：

<style type="text/css">
h1{
    color:#ff0000
}
</style>

<body>

    <h1>Hello World!</h1>

</body>

8、<a>标签中的name属性可以指定书签，当href属性的值为指定的书签名时，可以直接跳转到该书签所在的位置，如下面的代码：

<a href="#tip">hello</a>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<a name="tip">world</a>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

在上面的代码中，点击hello后，会跳转到world所在的地方，因为world通过name属性指定了一个名为tip的标签，而hello引用了这个标签

9、若需要在新的页面中打开超链接，需要为<a>标签指定target属性，如下面的代码：

<a href="http://www.baidu.com/" target="_blank">baidu</a>

10、img标签除了显示URL外，还可以显示本地图片，其中alt属性指定了图片无法显示时显示的文本，如下代码所示：

<img src="aa.jpg" alt="can not display the image"/>

当aa.jpg图片无法找到时，浏览器会显示如下页面：

如果图片可以显示，则将鼠标移动到图片上时，会显示Alt属性中指定的文字

11、可以为body标签添加background属性，用于指定页面的背景图片，如下面的代码所示：

<body background="a.jpg">

</body>

需要注意的是，如果图片小于页面尺寸，图片会重复显示

12、设置图片在文本中的对齐方式，可以使用img标签中的align属性，取值可以是top、middle、bottom，默认情况下，图片是底部对齐的，如下代码所示：

<html>

<body>

<h2>未设置对齐方式的图像：</h2>

<p>图像 <img src ="/i/eg_cute.gif"> 在文本中</p>

<h2>已设置对齐方式的图像：</h2>

<p>图像 <img src="/i/eg_cute.gif" align="bottom"> 在文本中</p>

<p>图像 <img src ="/i/eg_cute.gif" align="center"> 在文本中</p>

<p>图像 <img src ="/i/eg_cute.gif" align="top"> 在文本中</p>

<p>请注意，bottom 对齐方式是默认的对齐方式。</p>

</body>
</html>

页面效果如下图：

13、通过指定img标签的align属性，还可以设置图片在文本中的浮动方式，可以是left或right，left即图片在文本的左边，right则在右边，如下代码：

<html>

<body>
<div style="width:500px">
<p>
<img src ="aaa.gif" align ="left"> 
带有图像的一个段落。图像的 align 属性设置为 "left"。图像将浮动到文本的左侧。
</p>
<br/><br/><br/>
<p>
<img src ="aaa.gif" align ="right"> 
带有图像的一个段落。图像的 align 属性设置为 "right"。图像将浮动到文本的右侧。
</p>
</div>
</body>
</html>

在浏览器中访问的效果如下图：

14、给表格加上标题可以用caption标签，如下代码所示：

<table border="1">
    <caption>Person Info</caption>
    <tr>
        <th>ID</th>
        <th>NAME</th>
        <th>SEX</th>
    </tr>
    <tr>
        <td>1</td>
        <td>Lucy</td>
        <td>female</td>
    </tr>
</table>

效果如下：

15、table中的单元格，可以通过colspan和rowspan来指定横跨的行和列，如下面的代码所示：

<html>

<body>

<h4>横跨两列的单元格：</h4>
<table border="1">
<tr>
  <th>姓名</th>
  <th colspan="2">电话</th>
</tr>
<tr>
  <td>Bill Gates</td>
  <td>555 77 854</td>
  <td>555 77 855</td>
</tr>
</table>

<h4>横跨两行的单元格：</h4>
<table border="1">
<tr>
  <th>姓名</th>
  <td>Bill Gates</td>
</tr>
<tr>
  <th rowspan="2">电话</th>
  <td>555 77 854</td>
</tr>
<tr>
  <td>555 77 855</td>
</tr>
</table>

</body>
</html>

效果图如下：

16、table标签中的cellpadding属性，指定了单元格的内边距，如下代码所示：

<table border="1" cellpadding="10">
    <caption>Person Info</caption>
    <tr>
        <th>NAME</th>
        <th colspan="2">NUMBER</th>
    </tr>
    <tr>
        <td>Tom</td>
        <td>123</td>
        <td>456</td>
    </tr>
</table>

效果：

cellspacing属性则制定了单元格与单元格之间的距离，如下代码：

<table border="1" cellspacing="10">
    <caption>Person Info</caption>
    <tr>
        <th>NAME</th>
        <th colspan="2">NUMBER</th>
    </tr>
    <tr>
        <td>Tom</td>
        <td>123</td>
        <td>456</td>
    </tr>
</table>

效果：

table中的bgcolor属性指定表格的背景颜色，background指定表格的背景图片

除了在table标签中使用上面这两个属性外，在table中的td标签中也可以使用这两个属性

table中的单元格，可以通过align属性，指定单元格中的文本的对齐方式，有left、center、right可选

17、无序列表，可以使用ul标签，如下面的代码所示：

<ul>
    <li>hello</li>
    <li>world</li>
    <li>nimei</li>
    <li>cacaca</li>
</ul>

有序标签则可以通过ol实现，有序列表会为每个列表项编号，默认会从1开始编号，若指定了ol标签中的start属性，则从start指定的数字开始编号，如下面的代码所示：

<ol start="5">
    <li>hello</li>
    <li>world</li>
    <li>nimei</li>
    <li>cacaca</li>
</ol>

18、单选和多选按钮的使用：

<input type="radio" name="sex" />male
<br/>
<input type="radio" name="sex" />female

<br/>

<input type="checkbox" name="book" />Chinese
<br/>
<input type="checkbox" name="book" />Math
<br/>
<input type="checkbox" name="book" />History

19、下拉框的使用：

<select name="books">
    <option value="Chinese">Chinese</option>
    <option value="History" selected="selected">History</option>
    <option value="Math">Math</option>
</select>

selected属性指定了默认情况下被选中的条目

20、在数据周围绘制带标题的框，代码如下：

<div style="width:500px">
<fieldset>
    <legend>个人信息</legend>
    姓名：<input type="text" name="name"/>
    性别：<input type="text" name="sex"/>
</fieldset>
</div>

效果：

21、frameset标签的使用。如下面的代码所示：

<frameset cols="25%, 50%, 25%">
    <frame src="/frames/frame1.html" noresize="noresize"></frame>
    <frame src="/frames/frame2.html"></frame>
    <frame src="/frames/frame3.html"></frame>
</frameset>

效果图如下：

默认情况下，这三个frame是可以自由调整比例的，通过指定noresize="noresize"使frame不可调整大小，上面通过cols属性来指定三个frame所占的水平比例，通过rows可以指定三个frame所占的垂直比例。

22、使用frameset实现导航菜单，如下图所示：

通过点击左侧的菜单，可以动态改变右侧的页面内容，代码如下：

<frameset cols="200, *">
    <frame src="left_nav.html">
    <frame src="frames/frame1.html" name="container">
</frameset>

上面的left_nav.html文件的内容如下：

<a href="frames/frame1.html" target="container">frame1</a><br/><br/>
<a href="frames/frame2.html" target="container">frame2</a><br/><br/>
<a href="frames/frame3.html" target="container">frame3</a><br/><br/>

其中frame1.html、frame2.html、frame3.html是三个不同的HTML页面

23、iframe用于在网页中显示网页，如下代码所示：

<iframe src="https://www.baidu.com" width="600" height="400"/>

24、除了在a标签中指定属性target="_blank"外，还可以使用如下代码，使页面中的所有超链接都在新窗口中打开：

<base target="_blank"/>