HTML基础

拾阿拾阿

已于 2022-07-09 09:11:54 修改

阅读量145

点赞数

文章标签： html 前端 javascript

于 2022-07-05 19:36:10 首次发布

本文链接：https://blog.csdn.net/shasha_bucou_sha/article/details/125626499

版权

HTML基础

注释快捷键：ctrl + /
前端：三大技术
HTML：负责显示页面内容（文字、按钮、输入框等）
CSS：负责页面内容的布局和样式
JavaScript：负责实现功能
前端文件的后缀名：html、htm、shtml
html现在最常用的前端文件后缀名。
htm和html相等，此前DOS操作系统后缀名存在限制，文件后缀名长度小于等于3
shtml：内置了脚本命令的html文件
HTML文件理解为是一个html标签，html标签内包含head标签和body标签
head标签存放页面部分置顶，body标签显示页面内容
html标签分为双标签（一般标签）、单标签（自闭合标签）
双标签：<标签名属性1=属性值1 属性2=属性值2…>标签和内容</标签名>
单标签：<标签名属性1=属性值1 属性2=属性值2…>或者<标签名属性1=属性值1 属性2=属性值2… />
属性=属性值为固定写法，用于修改标签的内容或样式
标签名也是固定写法，不同的标签用于显示不同的内容，用法是固定的。
html语法和Markdown语法属于同一类。

<!-- 声明这是一个html5文件 -->
<!DOCTYPE html>
<html>
	<head>
		<!-- charset用于页面指定编码 -->
		<meta charset="utf-8" />
		<!-- 页面的标题 -->
		<title></title>
	</head>
	<body>

	</body>
</html>

文本标签

标题标签：<h1><h2>.....<h6>
段落标签：<p>

标题标签和段落标签会自动换行（一个标签代表一行或一段，写下一个标签时，自动另起一行）
文字倾斜标签：i、em
文字加粗标签：b、strong
（可嵌套使用）

<i>
	<b>文字倾斜又加粗</b>
</i>

<b>
	<i>文字倾斜又加粗</i>
</b>

<em>文字倾斜</em>
<strong>文字加粗</strong>

换行标签：br

<br>

水平线标签：hr

<hr>

行内文本标签：span

<span>我的京东</span> | <span>京东会员</span> | <span>登录&nbsp;&nbsp;&emsp;注册

### 注意：
html页面敲任意多个空格恒等于一个空格。
html中一个空格可以用下列两种方式表示&nbsp; 或者&emsp;
&nbsp;表示一个像素（px）单位的空格
&emsp;表示一个汉字的宽度，一个&emsp;=16&nbsp;

超链接和图片

图片标签：img
src:1.可以写入链接。2.可以写本地图片路径
title：鼠标放在图片上可以提示文字
alt：当图片不显示时，显示文字
width、height：能够修改图片、标签盒子等的显示宽度和高度
超链接标签：a
href：1.引入在线连接 2.可以引入本地文件(html文件) 3.可以引入id选择器
target:1._self:当前页标签页跳转（默认）。2._blank：新的标签页跳转。
下面是将图片变为可点击的超链接（举例为动漫：一人之下）

<a href="https://yrzx.qq.com/act/2890/a20200518xz/index.html"
   target="_blank"><img src="https://game.gtimg.cn/images/ulink/act/2890/a20200518xz/bg-kv1.jpg" alt="" width="100px"height="50px">
<p>一人之下手游</p>
</a>

id选择器：实现页面跳转
id属性如何调用：使用#调用id属性

<a href="#top">返回顶部</a>
<a href="#mid">返回中部</a>

列表和内联框架

iframe：内联框架

iframe：经常被用在登录、注册页面

<iframe src="https://www.bilibili.com/" width="1300px" height="400px"></iframe>

列表：有序列表ol、无序列表ul

列表中的内容放在li标签

列表在网站中主要被用来做下拉菜单和展示同一类内容

        <ul>
			<p>千锋成都校区学科一览</p>
			<li>Java</li>
			<li>前端</li>
			<li>python</li>
			<li>UI</li>
			<li>物联网</li>
		</ul>
		
		<ol>
			<p>千锋成都校区学科一览</p>
			<li>Java</li>
			<li>前端</li>
			<li>python</li>
			<li>UI</li>
			<li>物联网</li>
        </ol>

input标签

input：默认是一个文本框，但是通过修改type属性的值可以将input构造成不同的形式
palceholder:输入框中的提示性文字
maxlength:限制输入内容的长度
value:当input为按钮时，在按钮上显示文字
redio:单选框
name:告诉系统两个单选框属于同一类
将单选框中的id属性值设置为和lable标签中的for属性值相同，表示相关联.

<input type="text"><br>
<span>密码：</span>
<input type="password" placeholder="请输入密码" maxlength="5">
<input type="submit" value="登录"><br>
<input type="color">
<input type="file">
<input type="date">
<input type="time">
<br>
<p>请选择你的性别：</p>
<input type="radio" name="gender" id="gender1"><label for="gender1">男</label>
<input type="radio" name="gender" id="gender2"><label for="gender2">女</label>

checkbox：复选框

<p>今晚吃啥？</p>
<input type="checkbox" name="food" id="one"><label for="one">面条</label>
<input type="checkbox" name="food" id="two"><label for="two">炒菜</label>
<input type="checkbox" name="food" id="three"><label for="three">火锅</label>
<input type="checkbox" name="food" id="four"><label for="four">水饺</label>

拾阿拾阿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML基础

注释快捷键：ctrl + /前端：三大技术HTML：负责显示页面内容（文字、按钮、输入框等）CSS：负责页面内容的布局和样式JavaScript：负责实现功能前端文件的后缀名：html、htm、shtmlhtml现在最常用的前端文件后缀名。htm和html相等，此前DOS操作系统后缀名存在限制，文件后缀名长度小于等于3shtml：内置了脚本命令的html文件HTML文件理解为是一个html标签，html标签内包含head标签和body标签head标签存放页面部分置顶，body标签显示页面
复制链接

扫一扫