前端——基础知识HTML

最新推荐文章于 2024-07-16 17:39:09 发布

山河绝故人

最新推荐文章于 2024-07-16 17:39:09 发布

阅读量201

点赞数

文章标签： html5

本文链接：https://blog.csdn.net/q_everyday/article/details/108032329

版权

基础介绍

HTML、CSS、JavaScript三者用于设计网页

HTML 超文本标记语言，描述一个网站的结构，是标记语言。负责页面的内容。
HTML发展历史：HTML1，HTML2.0（95年发布）,HTML4.0和HTML4.01(W3C的推荐标准）,XHTML,现今使用的HTML5标准（html+css3+javascript+api）
CSS 层叠样式表 ，为结构化文档添加样式，确定页面布局，设定页面元素样式，如字体大小，颜色，位置等）。负责页面布局。
JavaScript 解释性编程语言，使网页交互，为网页添加动态功能。支持面向对象/命令式/函数式编程。

基本格式

<!--告知浏览器该页面文件的文档类型，提示web使用哪个HTML版本编写页面-->
<!DOCTYPE html>
<!--lang语言属性，此处en表示英文-->
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>标题</title>
    <style>
      <!--css基本格式编写地方-->
      p{
      text-align:right;
      }
    </style>
  </head>
  <body>
    <p>网页输出内容</p>
  </body>
</html>

HTML

W3schoo-html标签
 MDN-HTML：提供web开发者学习的web文档，Mozilla开发者网站是多家联合打造的web文档。
https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element
1.body标签内
1)内容
内联标签可以嵌套在块状标签内
块状标签如：<p><h1><div>
内联标签如<strong><img><span>

<div>
分块
	<p>段落</p>
	<h1>标题从1—6，字体大到小</h1><h6></h6>
	<p>块状标签<strong>加粗字体</strong>
	<span>使字体不换行，例如beautiful,由于一行显示限制，可能是bea换行utiful,分为两行显示，而span是的beautiful直接完整显示在上一行</span>
	</p>
</div>
<!--列表标签-->
<ul>无序列表标签
<li>列表内容</li>
<li></li>
</ul>
<ol>有序列表标签
<li></li>
<li></li>
</ol>

<!-- <form>块状标签，表单，要注意：<form>标签不能嵌套<form>标签 -->
action:表格信息将在提交时发送到定义的地址
method:值是GET和POST，规定如何发送表单信息
<!-- action=""则表单信息将提交到当前页面 -->
<form action="">
<!--readonly和disabled使用户不可修改输入框，只读
disabled 对象是所有表单元素，使文本框不能输入，当表单以GET或POST提交时使用disabled的元素的值不会被传递出去外观会使文本框变灰。
readonly 对象是input和textarea，仅使文本框不能输入，外观没有变化-->
 <input type="text" placeholder="昵称" name="单行文本输入框" value="小明" readonly />
   <!--限制文本框只能输入数字-->
  <input type="number" /> 
  <textarea
  name="多行文本输入框"
  rows="5"
  cols="30"
  placeholder="请输入个性签名"
></textarea>
<input type="password" name="password" placeholder="密码" />
<!--单选框，同一道题里面name应该相同-->
<input type="radio" name="gender" value="male" />
<input type="radio" name="gender" value="female" />
<！--点击文字也可以选项，而不是必须点击圆框-->
<input id="male" type="radio" name="gender" value="male" />
<label for="male">男</label>
或者
<label> <input type="radio" name="gender" value="male" />男 </label>

<!--复选框-->
<label> <input type="checkbox" name="interest" value="coding" />编程 </label>
<label> <input type="checkbox" name="interest" value="other" />其他 </label>
</form>

<!--下拉菜单-->
<select name="career">
  <option value="default">请选择职业</option>
  <option value="staff">公司职员</option>
  <option value="freelancer">自由职业者</option>
  <option value="student">学生</option>
  <option value="other">其他</option>
</select>
<!--多选菜单-->
<select name="career" multiple>
  <option value="default">请选择职业</option>
  <option value="staff">公司职员</option>
  <option value="freelancer">自由职业者</option>
  <option value="student">学生</option>
  <option value="other">其他</option>
</select>

<!--按钮-->
<button type="submit">注册</button>

2）引用

<!--图片-->
<img src = "" alt="">
<!--添加音频文件-->
<audio controls src=""></audio>
<!--网页链接-->
<a href="">可以加段落，图像，多媒体
<img src="">
</a>

3）显示

<!--显示进度-->
<progress max="100" value="80">当前进度为80</progress>

山河绝故人

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端——基础知识HTML

基础介绍HTML、CSS、JavaScript三者用于设计网页HTML 超文本标记语言，描述一个网站的结构，是标记语言。负责页面的内容。HTML发展历史：HTML1，HTML2.0（95年发布）,HTML4.0和HTML4.01(W3C的推荐标准）,XHTML,现今使用的HTML5标准（html+css3+javascript+api）CSS 层叠样式表，为结构化文档添加样式，确定页面布局，设定页面元素样式，如字体大小，颜色，位置等）。负责页面布局。JavaScript 解释性编程语言，使网
复制链接

扫一扫