W3SCHOOL—“HTML”链接”到“HTML布局”
使用样式的三种方式
外部样式表
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
内部样式表
<head>
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>
内联样式
<p style="color: red; margin-left: 20px">
This is a paragraph
</p>
HTML 链接
HTML 图像
<img src="boat.gif" alt="Big Boat">
src 指 “source”,图像的 URL 地址。alt 属性用来为图像定义一串预备的可替换的文本。
HTML表格
<table> 定义表格
<caption> 定义表格标题。
<th> 定义表格的表头。
<tr> 定义表格的行。
<td> 定义表格单元。
<thead> 定义表格的页眉。
<tbody> 定义表格的主体。
<tfoot> 定义表格的页脚。
<col> 定义用于表格列的属性。
HTML列表
有序:有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。
无序:无序列表始于 <ul> 标签。每个列表项始于 <li>。
自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始
块元素与内联元素
块级元素在浏览器显示时,通常会以新行来开始(和结束)。
例子:<h1>, <p>, <ul>, <table>,<div>
内联元素在显示时通常不会以新行开始。
例子:<b>, <td>, <a>, <img>,<span>
语义化标签
使用 <header>, <nav>, <section>, 以及 <footer> 来创建多列布局
软谋教育网站开发绝杀技—“html常用标签使用(二)”到“标签的语义化”
HTML超链接
链接地址一定要有http://协议
target属性
_blank 在新窗口中打开被链接文档。
_self 默认。在相同的框架中打开被链接文档。
_parent 在父框架集中打开被链接文档。
_top 在整个窗口中打开被链接文档。
framename 在指定的框架中打开被链接文档。
相对路径与绝对路径
绝对路径:c:/website/index.htm
相对路径:../../img/images/photo.jpg
相对路径语法:“../”来表示上一级目录,“../../”表示上上级的目录,以此类推。
form
<form action="value" method="post">
必需的 action 属性规定当提交表单时,向何处发送表单数据。
浏览器使用 method 属性设置的方法将表单中的数据传送给服务器进行处理,POST 方法和 GET 方法。
input
- input name属性
name 属性用于对提交到服务器后的表单数据进行标识,或者在客户端通过 JavaScript 引用表单数据。
注释:只有设置了 name 属性的表单元素才能在提交表单时传递它们的值。 - input标签的type属性
button 定义可点击按钮(多数情况下,用于通过 JavaScript 启动脚本)。
checkbox 定义复选框。
file 定义输入字段和 "浏览"按钮,供文件上传。
hidden 定义隐藏的输入字段。
image 定义图像形式的提交按钮。
password 定义密码字段。该字段中的字符被掩码。
radio 定义单选按钮。
reset 定义重置按钮。重置按钮会清除表单中的所有数据。
submit 定义提交按钮。提交按钮会把表单数据发送到服务器。
text 定义单行的输入字段,用户可在其中输入文本。默认宽度为 20 个字符。
select
select 元素可创建单选或多选菜单。
<select>
<option value ="volvo">Volvo</option>
<option value ="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
multiple规定可选择多个选项。
name规定下拉列表的名称。
3.学习任务 用HTML写一首诗并配上图片,需要满足诗的格式。可以结合学习的html知识对页面进行加工。
代码链接:
https://codepen.io/everfighting/project/editor/XoaWwD/