HTML属性
属性是提供有关元素的附加信息的修饰符。
属性可以是可选的，也可以是必需的。
image标签需要一个属性才能正常工作。
alt属性可以是：
用屏幕阅读器大声朗读
当图像无法加载时显示
搜索引擎阅读
属性通常以名称/值对的形式出现，如：
name="value"
示例：src="img_boy.jpg"
为控制图像水平尺寸的属性标记名称和可能的值
在HTML中，属性值周围的双引号是最常见的，但是单引号也可以使用。
<img src="img_boy.jpg" width="300">
高度(height)是image元素的可选属性。
默认情况下，宽度和高度都以像素为单位测量。
您可以同时提供宽度和高度。
<img src="img_boy.jpg" width="300" height="150">
<nav>容器标签定义了一组允许用户在网站页面之间导航的链接。
不同页面的链接使用锚标记<a>添加，并嵌套在<nav>容器标记中。
多页面网站的HTML项目是由不同的HTML文档（或文件）组成的。
<html>
<head>
<title>Page Title</title>
</head>
<body>
<nav>
<a href="index.html">Home</a>
</nav>
</body>
</html>
单页网站的所有内容都在主页上。任何导航链接都将访问者带到不同的部分（而不是加载新页面）。
要跳转到单页网站的特定部分，首先你需要用id （ID）属性标记该部分。
<h2 id="section-1">Section 1</h2>
一旦您想要跳转到的元素被标记了id，您就可以使用锚标记<a>来定位它
<html>
<head>
<title>Travel with us</title>
</head>
<body>
<nav>
<a href="#about">About</a>
<a href="#packages">Packages</a>
</nav>
<h2>Discover the world with us!</h2>
<p>At <b>Around the world </b>, we believe that travel is one of the greatest gifts life has to offer. That’s why we're dedicated to making your journeys as seamless and enjoyable as possible.
Whether you're seeking adventure, relaxation, or a combination of both, we’ve got you covered.
With a wide range of destinations and customizable travel packages, you'll be able to create the trip of a lifetime.
</p>
<p>Our team of experienced travel consultants are passionate about travel and will work with you to design an itinerary that fits your individual needs and budget. So why wait? Book your next adventure with <b>Around the world</b> today and start creating memories that will last a lifetime!
</p>
<h2 id="about">About us</h2>
<p>At <b>Around the world</b>, we are a team of passionate travelers dedicated to helping our clients experience the world. With years of experience in the travel industry, our knowledgeable and experienced staff will work with you to plan and book your next journey.
</p>
<h2 id="packages">Packages</h2>
<ul>
<li>Adults</li>
<li>School groups</li>
<li>Students</li>
<li>Family</li>
<li>Corporate</li>
<li>Honeymoon</li>
</ul>
<a href="#top">Top of the page</a>
</body>
</html>
单页还是多页网站设计是你在一个新网站项目中需要做的第一个决定。
这两种选择都有各自的优点和缺点，你很快就会发现。
表单
您可以与您网站的访问者进行互动，并使用表单从他们那里收集信息。
可以使用表单让访问者：
- 和你联系
- 发送订单、请求和其他信息
- 创建帐户或注册
- 等等
表单由文本字段、复选框和提交按钮等输入元素组成。这些输入元素嵌套在<form>容器标记中。
最常见的表单元素是<input>。根据type属性的不同，<input>元素有多种形式。
常见3种类型：text（文本栏）、radio（圆圈加点）、checkbox（方框打钩）
<html>
<head>
<title>Page Title</title>
</head>
<body>
<form>
<input type="text">
<input type="radio">
<input type="checkbox">
</form>
</body>
</html>
可以使用<label>标记为不同的输入元素添加标签。
<html>
<head>
<title>Page Title</title>
</head>
<body>
<form>
<label>Enter text</label>
<input type="text"><br>
<label>Select the radio button</label>
<input type="radio"><br>
<label>Check the box</label>
<input type="checkbox"><br>
</form>
</body>
</html>
使用for和id属性将标签连接到输入元素被认为是一种非常好的做法。
<p>Notification preferences:</p>
<form>
<input type="checkbox" id="boxl">
<label for="boxl">
Email</label>
<input type="checkbox" id="box2">
<label for="box2">
Push</label>
</form>
id属性用于标识唯一的输入元素。标签中的for属性瞄准（并匹配！）输入的id。
<input type="radio" id="r1">
<html>
<head>
<title>Page Title</title>
</head>
<body>
<p> Choose your area of interest:</p>
<form>
<input type="checkbox" id="c1">
<label for="c1">Art</label><br>
<input type="checkbox" id="c2">
<label for="c2">Sports</label><br>
<input type="checkbox" id="c3">
<label for="c3">Tech</label>
</form>
</body>
</html>
提交表单
HTML表单是将数据发送到托管在服务器上的数据库的一种方便方式。
提交按钮用于发送表单中的数据。提交类型的输入将一个按钮添加到表单中。
<form>
<input type="text" name="email">
<input type="text" name="city">
<input type="submit">
</form>
只有带有name属性的表单元素在提交表单时才会将其值传递给数据库。
name属性用于将来自用户的输入放在数据库中正确的字段（列）中。
value属性定义了当选择输入时提交的值。
在数据库中正确存储信息需要名称和值。HTML代码需要包括在数据库中放置的位置和内容。
<form>
<input type="radio" id="r1" name="pay"
value="cash">
<label for="r1">Cash</label>
<input type="radio" id="r2" name="pay"
value="card">
<label for="r2">Card</label>
<input type="submit">
</form>
只有当用户没有提供不同的值时，文本输入中的值将被发送到数据库
<form>
<label for="t1">Email:</label>
<input type="text" id="t1"
name="email"
value="example@domain.com">
</form>
浙公网安备 33010602011771号