HTML基础知识详解-优快云博客

本文链接：https://blog.youkuaiyun.com/CoCo629vanilla/article/details/126125715

学习牛客HTML总结

HTML简介：

HTML 指的是超文本标记语言: HyperText Markup Language，它可以通过标记标签来搭建网站。

HTML语言结构：

<!DOCTYPE html> 声明为 HTML5 文档
<html> 元素是 HTML 页面的根元素
<head> 元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。
<title> 元素描述了文档的标题
<body> 元素包含了可见的页面内容
<h1> 元素定义一个大标题
<p> 元素定义一个段落

HTML标签：

HTML 标签通常是成对出现的，比如 <b> 和 </b>
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签

HTML属性：

HTML 元素可以设置属性
属性可以在元素中添加附加信息
属性一般描述于开始标签
属性总是以名称/值对的形式出现，比如：name="value"。

HTML头部：

<head> 元素包含了所有的头部标签元素。在 <head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript>, <base>。

常用的HTML标签以及相关使用方法：

1、HTML 标题（Heading）是通过<h1> - <h6> 标签来定义的。

<h1>这是一个标题</h1>
<h2>这是一个标题</h2>
<h6>这是一个标题</h6>

2、段落。HTML 段落是通过标签 <p> 来定义的。

<p>这是一个段落。</p>
<p>这是另外一个段落。</p>

3、链接。HTML 链接是通过标签 <a> 来定义的。

<a href="http://www.baidu.com">这是一个链接</a>

4、图像。HTML 图像是通过标签 <img> 来定义的。

<img src="图像的地址" />

5、换行.。<br> 就是没有关闭标签的空元素（<br> 标签定义换行）。

</br>

6、水平线。<hr> 标签在 HTML 页面中创建水平线，可用于分隔内容。

<hr>

7、图像。使用<img>标签定义 HTML 页面中的图像，<img>标签有两个必需的属性：src和alt。

<h2smile</h2>
<img border="0" src="x.png" alt="happy" width="304" height="228">

1）在 HTML 中，图像由<img> 标签定义。<img> 是空标签，意思是说，它只包含属性，并且没有闭合标签。要在页面上显示图像，你需要使用源属性（src）。src 指 "source"。源属性的值是图像的 URL 地址。

2）alt 属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。

3）height（高度）与 width（宽度）属性用于设置图像的高度与宽度。属性值默认单位为像素:

8、表格。在HTML中，通过 <table> 标签来定义表格。

表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），

每行被分割为若干单元格（由 <td> 标签定义）。

表格的表头使用 <th> 标签进行定义。

    <h4>水平标题:</h4>
	<table border="1">
	<tr>
	  <th>Name</th>
	  <th>Telephone</th>
	  <th>Telephone</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>First Name:</th>
	  <td>Bill Gates</td>
	</tr>
	<tr>
	  <th>Telephone:</th>
	  <td>555 77 854</td>
	</tr>
	<tr>
	  <th>Telephone:</th>
	  <td>555 77 855</td>
	</tr>
	</table>

9、列表。

有序列表使用 <ol> 标签，每个列表项使用 <li> 标签

无序列表使用 <ul> 标签，每个列表项使用 <li> 标签。

自定义列表以 <dl> 标签开始，每个自定义列表项以 <dt> 开始，每个自定义列表项的定义以 <dd> 开始。

    有序列表：
    <h4>编号列表：</h4>
	<ol>
	  <li>Apples</li>
	  <li>Bananas</li>
	  <li>Lemons</li>
	  <li>Oranges</li>
	</ol>  

    无序列表：
    <h4>圆点列表：</h4>
	<ul style="list-style-type:disc">
	  <li>Apples</li>
	  <li>Bananas</li>
	  <li>Lemons</li>
	  <li>Oranges</li>
	</ul>  

    自定义列表：
    <dl>
        <dt>Coffee</dt>
        <dd>- black hot drink</dd>
        <dt>Milk</dt>
    <dd>- white cold drink</dd>
    </dl>

10、布局。HTML 可以通过 <div> 和 <span> 将元素组合起来。

<div> 元素是块级元素，它可用于组合其他 HTML 元素的容器。如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。

<span> 元素是内联元素，可用作文本的容器。当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。

<!--使用div布局-->
<body>
    <div id="container" style="width: 800px">
        <div id="header" style="background-color: #FFA500">
            <h1 style="margin-bottom: 0">主要的网页标题</h1></div>


    <div id="menu" style="background-color: #FFD700;height: 150px;width: 100px;float:left;">
        <b>菜单</b><br>
        HTML<br>
        CSS<br>
        JavaScript
    </div>

    <div id="content" style="background-color: #EEEEEE;height: 150px;width:700px;float:left;">
         内容在这里
    </div>
    <div id="footer" style="background-color: #FFA500;clear:both;text-align: center;">
        版权 @ my.layout.com
    </div>
    </div>

<!--使用表格table布局-->
    <table width="500" border="0">
        <tr>
            <td colspan="2" style="background-color:#FFA500;">
                <h1>主要的网页标题</h1>
            </td>
        </tr>
        <tr>
            <td style="background-color:#FFD700;width:100px;vertical-align:top;">
                <b>菜单</b><br>
                HTML<br>
                CSS<br>
                JavaScript
            </td>
            <td style="background-color:#eeeeee;height:200px;width:400px;vertical-align:top;">
                内容在这里
            </td>
        </tr>
        <tr>
            <td colspan="2" style="background-color:#FFA500;text-align:center;">
                版权 © nowcoder.com
            </td>
        </tr>
    </table>

11、表单。表单使用表单标签 <form> 来设置：多数情况下被用到的表单标签是输入标签（<input>）。

<form>
    input 元素
</form>

1）文本框（Text Fields）文本框通过 <input type="text"> 标签来设定

<form>
    First name: <input type="text" name="firstname"><br>
    Last name: <input type="text" name="lastname">
</form>

2）密码字段通过标签 <input type="password"> 来定义：

<form>
    Password: <input type="password" name="pwd">
</form>

3）单选按钮（Radio Buttons）<input type="radio"> 标签定义了表单单选框选项。

<form>
    <input type="radio" name="sex" value="male"> Male <br>
    <input type="radio" name="sex" value="female"> Female
</form>

4)复选框（Checkboxes）<input type="checkbox"> 定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。

<form>
    <input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
    <input type="checkbox" name="vehicle" value="Car">I have a car
</form>

5)提交按钮（Submit Button）<input type="submit"> 定义了提交按钮.

<form name="input" action="http://www.nowcoder.com" method="get">
    Username: <input type="text" name="user">
    <input type="submit" value="Submit">
</form>

12、框架。通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。

<iframe src="URL"  width="200" height="200" frameborder="0" name="iframe_a"></iframe>
<p><a href="http://www.baidu.com" target="iframe_a">BAIDU.COM</a></p>

width 和 height 属性用来定义iframe标签的高度与宽度。

frameborder 属性用于定义iframe表示是否显示边框，设置属性值为 "0" 移除iframe的边框。

iframe可以显示一个目标链接的页面，目标链接的属性必须使用iframe的属性

13、脚本。<script> 标签用于定义客户端脚本

<script>
    document.write("Hello World!");
</script>
<noscript>
    抱歉，你的浏览器不支持 JavaScript!
</noscript>

<noscript> 标签提供无法使用脚本时的替代内容，比方在浏览器禁用脚本时，或浏览器不支持客户端脚本时。

例子：JavaScript改变HTML元素样式的

<body>

	<h1>我的第一段 JavaScript</h1>
	<p id="demo">
		JavaScript 能改变 HTML 元素的样式。
	</p>
	<script>
		function myFunction() {
		x=document.getElementById("demo") // 找到元素
		x.style.color="#ff0000";          // 改变样式
	}
</script>
	<button type="button" onclick="myFunction()">点击这里</button>

</body>