html练习之基础

最新推荐文章于 2023-03-25 21:24:40 发布

fx^

最新推荐文章于 2023-03-25 21:24:40 发布

阅读量218

点赞数

本文链接：https://blog.csdn.net/weixin_46036074/article/details/103589336

版权

html2

two 总结

7.框架的组成
多个页面文件组成
-主文件index.html
-文件1：top.html
-文件2

8…CSS
-定义：用于渲染HTML元素标签的样式
-如何添加到HTML中：内联样式-在HTML元素中使用“style”属性。
内部样式表-在头部使用

（1）内部样式表：在头部以style标签内定义。
（2）外部样式表：在头部以link标签外联css，
9.图像
-img作为标签来定义图像，src用来定义地址，可以定义图片属性大小。

10.表格
–跨行的表格rowspan
–跨列的表格colspan
11列表
–有序列表：在ul中用li标签包围
–无序列表：在ol中用li标签包围（ol中可以增加属性start=20，是从20开始定义顺序）
–自定义列表：在dl中庸dt标签自定义列表项，dd下一级自定义列表项描述
*注意：提示: 列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

12区块
–div元素是块级元素，同css一起使用，可用于对大的内容块设置样式属性
–span元素是内联元素，与css一起使用可用于为部分文本设置样式属性
13布局
–div元素用于分组html元素的多个块级元素来布局
14表单
–文本域：输入文字等需要用input type=text
–密码：需要type=password，添加name
–单选按钮：type=radio，定义name和value
–复选框：type=chekbox,定义value和name
–提交按钮：type=submit；
15框架
–使用框架，你可以在同一个浏览器窗口显示不止一个页面
–语法：iframe src=url
–iframe ：可以显示目标链接的页面

16字符实体
–空格：&nbsp
–小于号：< 或 < 或 <等等其他字符实体

截图：
在这里插入图片描述

代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" href="../../../Pictures/Camera Roll/3a7d-hfefkqr2594527.jpg">
<title>这是一个带图片的标签</title>
</head>

<body>
<h1 style="font-family:'宋体'; text-align:center">一个标题居中</h1>
<p style="background-color:red;font-size:20px;">这是一个段落</p>

<img src="../../../Pictures/Camera Roll/12-191102103319.jpg" alt="some_text" width="300" height="200" />
<h3>跨两列</h3>
<table border="1">
<tr>
  <th>name</th>
  <th colspan="2">跨两列</th>
</tr>
<tr>
  <th>bob</th>
  <th>一列</th>
  <th>两列</th>
</tr>

</table>
<h3>跨两行</h3>
<table border="1">
<tr>
  <th>age</th>
  <th>15</th>
</tr>
<tr>
  <th rowspan="2">跨两行</th>
  <th>一行</th>
</tr>
<tr>
  <th>两行</th>
</tr>


</table>
<h4>无序列表</h4>
<ul>
  <li>aa</li>
  <li>bb</li>
</ul>
<h4>有序列表</h4>
<ol start="10">
  <li>aa</li>
  <li>bb</li>
</ol>
<div id="aa" style="width:500px">
<div id="bb" style="background-color:#0033CC;">
<h1 style="margin-bottom:0;">主要的网页标题</h1></div>
<div id="cc" style="background-color:#FF66CC;height:200px;width:100px;float:left;">
<b>菜单</b><br />
HTML<br />
CSS<br />
JS</div>
<div id="dd" style="background-color:#00FFCC;height:200px;width:400px;float:left;">主要内容</div>
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
版权 ? runoob.com</div>
</div>
<iframe src="../../../Pictures/Camera Roll/3a7d-hfefkqr2594527.jpg" name="a" height="700" width="1024"></iframe>
<p><a href="http://www.baidu.com" target="a">baidu.com</a></p>

<h4>JS</h4>
<p id="demo">js可以触发点击事件，就像单击按钮</p>
<script>
function myFunction(){
  document.getElementById("demo").innerHTML="hello!"
}
</script>
<button type="button" onclick="myFunction()">点我</button>

</body>
</html>