前端HTMLt快速入门教程。初学者最好的选择

最新推荐文章于 2024-05-02 01:41:27 发布

迷沉

最新推荐文章于 2024-05-02 01:41:27 发布

阅读量686

点赞数

分类专栏：前端j 文章标签： html 初学教程前端快速入门

本文链接：https://blog.csdn.net/huanglaoer123123/article/details/100673747

版权

前端j 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

1 Html简介

1.1 什么是Html？
Hyper Markup Language 超文本标记语言
标记网页的一种语言
1.2 Html是用来干嘛的？
用来方便程序员编写，浏览器识别以及渲染

2 Hello World

2.1 挑选合适的浏览器
推荐chrome 谷歌浏览器
2.2 挑选合适的开发工具
VS Code 下载地址
2.3 基本的HTML文档*

<!doctype html>  <!--告诉浏览器这是个HTML文档--> 
<html>    
	<head></head>    
 	<body>      
  		<p>Hello World</p>   
 	 </body>
 </html>

现在流行移动优先，最基本的HTML骨架

<!DOCTYPE html> 
<html lang="zh-cn"> 
	<head>   
 		<meta charset="UTF-8">    
 		<meta name="viewport" content="width=devicewidth, initial-scale=1.0">    
 		<meta http-equiv="X-UA-Compatible" content="ie=edge">    
 		<title>网页在浏览器显示的标题</title>
  </head>
  <body>    
  		<h1>Hello World!</h1>
  </body> 
 </html>

2.4 父元素、子元素、后代元素和兄弟元素*
像这些叫做元素 ,也称作标签

<body>      
	<div>1       
		<p>hello world</p>   
 	</div>    
 	<div>2</div>   
  	<div>3</div>
  </body>

如上：
每个 div 的父元素是 body
body 的子元素有 div1 , div2 , div3
p 和 div 都是 body 的后代元素
div1 , div2 , div3 是互为兄弟元素

2.5 注释

以 <!--开始，以--> 结束的代码

2.6 HTML属性
类似

<div id="idname" class="classname"></div>

里的id和class是div标签的属性，属性值为双引号里面的值
2.７常用字符实体（了解）
在这里插入图片描述

3 常用标签

块级元素，宽度默认为整个页面宽度，高度随内容而定，独占一行从上到下排列
可以看作是一个容器

<div>这里是一个容器</div>

3.2 span
行内元素，从左到右排列，表示一小块，多个span可以在同一行显示

<span>一周热门排行榜</span>

3.3 h1-h6
标题，从h1到h6为从大到小不同大小的标题文字
3.4 p
段落标签，里面的内容就是一个段落，独占一行
3.5 ul li无序列表
ul 是声明有一个无序列表
li 包含每一列表的内容
默认情况下每一列表独占一行
ol 有序列表

<ul>    
      <li>我是第一列</li>  
      <li>我是第二列</li>
   </ul>

3.6 img
图片标签，有一个属性是src为图片地址，alt属性是在图片没有正式加载的时候显示的内容

<img src="../logo.png" alt="我是一张图片">

3.7 a

 <a href="http://www.baidu.com/" target="_blank"> 百度一下</a>

表示一个链接，href="http://www.baidu.com/“里的内容就是要跳转的链接，加上target=”_blank"表示弹出新的窗口打开这个链接， target属性不写的话默认是在本窗口打开链接

3.8 form 表单

<form>  
 	 <fieldset>     
   			 <legend>我是表单标题</legend>   
     </fieldset>
  </form>

3.9 input

<input type="text" value="Kevin"> 
<input type="password" placeholder="请输入密码">
 <input type="button" value="登录">

type属性表示输入框的类型，text是文本输入框，password是密码输入框，button表示一个按钮
value属性表示输入框里面的内容
placeholder属性表示占位字符，做提示用。
3.10 button

<button>登录</button》

3.11 select > option
下拉选框

<select>    
    <option value="">成都</option>     
     <option value="">北京</option>     
     <option value="">上海</option> 
 </select>

select声明下拉选择框，option是选项，value表示选项的值

基本学会这些基础，做个简单的前端应该没问题了

迷沉

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端HTMLt快速入门教程。初学者最好的选择

1 Html简介1.1 什么是Html？Hyper Markup Language 超文本标记语言标记网页的一种语言1.2 Html是用来干嘛的？用来方便程序员编写，浏览器识别以及渲染2 Hello World2.1 挑选合适的浏览器推荐chrome 谷歌浏览器2.2 挑选合适的开发工具VS Code 下载地址2.3 基本的HTML文档*<!doctype html&...
复制链接

扫一扫