小白学前端Day2

来源：互联网发布：和讯黄金软件编辑：程序博客网时间：2024/06/06 08:09

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/

1 0