html简介

最新推荐文章于 2022-04-25 15:41:47 发布

山有木兮木有枝21

最新推荐文章于 2022-04-25 15:41:47 发布

阅读量135

点赞数

分类专栏： web前端 # html 文章标签：前端开发

本文链接：https://blog.csdn.net/weixin_39477501/article/details/104046261

版权

web前端同时被 2 个专栏收录

37 篇文章 0 订阅

订阅专栏

html

2 篇文章 0 订阅

订阅专栏

1. html（Hyper Text Makeup Language）超文本标记语言骨架：

<!DOCTYPE html>                   <!-- 文档类型，向浏览器说明当前使用html或xhtml标准规范 -->
<html lang="en">                  <!-- 根标签 -->
<head>                            <!-- 头标签 -->
    <meta charset="UTF-8">        <!-- 字符集,全世界文字 -->
    <title>Document</title>       <!-- 标题 -->
</head>
<body>                            <!-- 主体 -->
	
</body>
</html>

2. 前端开发工具

Dreamweaver，Sublime，WebStorm，HBuilder，Visual Studio Code等等。

3. html双标签

（1）标题标签head：<h1></h1>，<h2></h2>，<h3></h3>，<h4></h4>，<h5></h5>，<h6></h6>。

（2）段落标签paragraph：<p></p>，根据窗口大小可自动换行。

（3）布局盒子division：<div></div>，分割，分区；<span></span>，跨度，跨距，范围。

（4）链接标签anchor：<a></a>，锚点。

<a href="https://www.baidu.com/" target="_blank">访问百度</a>
<!-- href="跳转目标"，hypertext reference的缩写，可为外部链接或相对路径
     target="目标窗口弹出方式"，取值可为self当前窗口，或_blank新窗口打开 -->

<a href="#live">点击跳转</a>
<h3 id="live">跳转到此处</h3>
<!-- 锚点定位，点击该链接，可跳转到id为live所在的地方 -->

（5）文本格式化标签

	XHTML推荐，具有强调语义	语义
<b></b>	<strong></strong>	粗体
<i></i>	<em></em>	斜体
<s></s>	<del></del>	加删除线
<u></u>	<ins></ins>	加下划线

（6）列表：<ul></ul>，<ol></ol>标签里只能放<li></li>标签，<li></li>标签里可以放各种标签，自定义列表常用于网页底部链接的排版。

<!-- 无序列表            有序列表                 自定义列表 -->
<ul>                     <ol>                    <dl>
    <li></li>                <li></li>                <dt></dt>
</ul>                    </ol>                        <dd></dd>
                                                 </dl>

（7）表格：

<table width="500" height="300" border="1" cellspacing="0" cellpadding="0" align="center">
<!-- table标签里只能放tr标签，tr标签里只能放td标签；
     width，height，表格的宽高；border边框，默认为0，无边框；
     cellspaceing默认值为2，单元格边框之间的距离；cellpadding默认值为1，单元格内容与单元格边框之间的距离；
     align，表格水平对齐方式，取值left，center，right，默认为left -->
    <caption>名侦探柯南</caption>       <!-- 表格的标题 -->
    <thead>
        <tr>                           <!-- 表格的行 -->
            <th>姓名</th>               <!-- 单元格中的内容自动居中对其并加粗 -->
            <th>性别</th>
            <th>年龄</th>
        <tr>
    </thead>
    <tbody>
        <tr>
            <td>柯南</td>              <!-- 单元格 -->
            <td>男</td>
            <td rowspan="2">7</td>    <!-- 合并单元格：跨行合并rowspan，跨列合并colspan； -->
        </tr>
        <tr>
            <td>灰原哀</td>
            <td>女</td>
        </tr>
    </tbody>
</table>

（9）label标签：

<!-- label标签用于绑定一个表单元素，当点击label标签时，被绑定的表单元素就会获得输入焦点 -->
<label> 输入邮箱： <input type="text"> </label> <br /> <!-- 直接label包裹input -->
<label for="two"> 输入邮箱： <input type="text"> <input type="text" id="two"> </label>
<!-- label里面包含多个表单时，可利用for  id的格式定位到某个表单 -->

（10）文本域标签：

<textarea cols="20" rows="3">文本内容</textarea>
<!-- 文本域，即多行文本输入框，cols="每行中的字符数" rows="显示的行数" -->

（11）下拉菜单标签：

籍贯：
<select>                                            <!-- 下拉菜单，至少包含一个选项 -->
    <option>点击选择您的籍贯</option>
    <option>北京</option>
    <option selected="selected">上海</option>        <!-- 默认选中项 -->
    <option>广州</option>
</select>

（12）表单域标签：

<form action="url地址" method="提交方式" name="表单名称">
    各种表单控件
</form>

4. html单标签

（1）换行标签break：<br />，强制换行。

（2）注释标签：

（3）水平线标签horizontal：<hr />，创建横跨网页的水平线标记。

（4）base标签：例如<head><base target="_blank"></head>，设置整体链接的打开方式。

（5）图像标签：

<img src="logo.jpg" alt="some_text" width="400" height="300" border="1">
<!-- src="路径"，alt="替换文本"，title="鼠标悬停时显示的文本内容"，width，
     height宽高可仅设置一个，图片大小相应等比例缩放，border边框属性。
     相对路径：①同一级文件夹下<img src = "logo.gif" />，②下一级文件夹<img src = "folder/logo.gif" />，③上一级文件夹<img src = "../logo.gif" />；
     绝对路径：<img src = "C:\users\logo.gif" />，也可直接用网络上的图片地址 -->

（6）input表单控件：

用户名：<input type="text" /> <br />                    <!-- 单行文本框 -->
密 码：<input type="password" maxlength="6" /> <br />   <!-- 密码框 -->
性 别：<input type="radio" name="sex" checked="checked" />女 
      <input type="radio" name="sex"/>男 <br />        <!-- 单选框 -->
爱 好：<input type="checkbox" name="hobby">足球 
      <input type="checkbox" name="hobby">篮球 <br />  <!-- 复选框 -->
		
搜索： <input type="button" value="搜索" /> <br />      <!-- 普通按钮 -->
<input type="submit" />                                <!-- 提交按钮，可设置value改变文字 -->
<input type="reset" />                                 <!-- 重置按钮 -->
<input type="image" src="button.jpg" /> <br />         <!-- 图像按钮 -->
上传头像：<input type="file" /> <br />                  <!-- 文件按钮 -->
<!-- 属性name为控件名称，相同值属于同一组，value为控件默认文本值，size为控件在页面中的显示宽度，
    checked为控件默认被选中的项，maxlength为控件允许输入的最多字符数 -->

5. 常用特殊字符

语义	符号	代码	语义	符号	代码	语义	符号	代码
空格符			人民币	￥	¥	正负号	±	±
大于号	>	>	版权	©	©	乘号	✖	×
小于号	<	<	注册商标	®	®	除号	➗	÷
和号	&	&	摄氏度	℃	°
平方	²	²	立方	³	³