前端基础语法一

最新推荐文章于 2024-04-13 21:56:51 发布

原创最新推荐文章于 2024-04-13 21:56:51 发布 · 705 阅读

6 ·

CC 4.0 BY-SA版权

HTML、XML、AJAX 专栏收录该内容

3 篇文章

订阅专栏

本文深入讲解前端开发的基础语法，包括HTML、CSS和JavaScript的核心用法，探讨文本格式化、列表、表格、样式表的内外部应用及脚本定义。同时，文章通过实例展示了div和span元素的综合使用，以及如何利用meta标签优化网页元数据。

前端基础语法

<!DOCTYPE html> 声明
<html>描述网页</html>
<body>可见的页面内容</body>
<h1>标题</h1>
<h1 style="text-align:center">标题居中</h1>
<p>段落</p>
<a href="http://www.w3school.com.cn">链接</a>
<img src="图片.jpg" width="104" height="142" />
<img src="图片url地址" />
name='Bill "HelloWorld" Gates' 属性值本身就含有双引号，就必须使用单引号
<hr/> 添加水平线

<br /> 换行
<p>第一行<br/>第二行<br/>通过br标签在不产生一个新段落的情况下进行换行</p>
所有连续的空格或空行都会被算作一个空格
<p style="font-family: arial; color: red; font-size: 30px">字体，颜色，字体大小</p>
<q>打双引号</q> “打双引号”
<blockquote>缩进处理</blockquote>
<p><abbr title="World Health Organization">WHO</abbr> 成立于 1948 年。</p> 通过 abbr 对缩写进行标记能够为浏览器、翻译系统以及搜索引擎提供有用的信息。

文本格式化标签

在这里插入图片描述

预格式文本

<pre>
预格式文本。
它保留了      空格
和换行。
适合用来显示代码
for i = 1 to 10
     print i
next i
</pre>

使用添加到 head 部分的样式信息对 HTML 进行格式化

在这里插入图片描述

1.外部样式表

当样式需要被应用到很多页面的时候，可以采用外部样式表。使用外部样式表，就可以通过更改一个文件来改变整个站点的外观。

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

rel：规定当前文档与被链接文档之间的关系。stylesheet表示文档的外部样式表。
type：规定被链接文档的类型。
href：规定被链接文档的位置。

2.内部样式表

当单个文件需要特别样式时，就可以使用内部样式表。你可以在 head 部分通过 style 标签定义内部样式表。

<head>

<style type="text/css">
body {background-color: green}
p {margin-left: 20px}
</style>

</head>

3. 内联样式

当特殊的样式需要应用到个别元素时，就可以使用内联样式。使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。

<p style="color: red; margin-left: 20px">
This is a paragraph
</p>

div

在这里插入图片描述

table 表格

每个表格由 table 标签开始。
每个表格行由 tr 标签开始。
每个表格数据由 td 标签开始。
比如三行两列，就要有三个<tr></tr>，每个 tr 中有两个 <td></td>
border 指表格边框的粗度

<h4>三行两列</h4>
<table border="8">
<tr>
	<th>表头</th>
    <th>默认粗体居中</th>
</tr>
<tr>
  <td>1111111111</td>
  <td>2222222222</td>
</tr>
<tr>
  <td>3333333333</td>
  <td>4444444444</td>
</tr>
<tr>
  <td>5555555555</td>
  <td>6666666666</td>
</tr>
</table>

在这里插入图片描述

无序列表（ul）和有序列表（ol）

在这里插入图片描述

div

把文档分割为独立的、不同的部分
div 元素是块级元素，可用于组合其他 HTML 元素的容器。
div 元素没有特定的含义，它属于块级元素，浏览器会在其前后显示折行。
如果与 CSS 一同使用，可对大的内容块设置样式属性。

在这里插入图片描述

span

span 标签用来组合文档中的行内元素，以便通过样式来格式化它们。

在这里插入图片描述

<!DOCTYPE html>
<html>

<head>
<style>
header {
    background-color:black;
    color:white;
    text-align:center;
    padding:5px;	 
}
nav {
    line-height:30px;
    background-color:#eeeeee;
    height:300px;
    width:100px;
    float:left;
    padding:5px;	      
}
section {
    width:350px;
    float:left;
    padding:10px;	 	 
}
footer {
    background-color:black;
    color:white;
    clear:both;
    text-align:center;
    padding:5px;	 	 
}
</style>
</head>

<body>

<header>
<h1>City Gallery</h1>
</header>

<nav>
London<br>
Paris<br>
Tokyo<br>
</nav>

<section>
<h1>London</h1>
<p>
London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.
</p>
<p>
Standing on the River Thames, London has been a major settlement for two millennia,
its history going back to its founding by the Romans, who named it Londinium.
</p>
</section>

<footer>
Copyright W3Schools.com
</footer>

</body>
</html>

综合使用

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" 
  href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  
<style>
	.row {
    	color:green;
    }
    
    .col-md-4 {
    	font-size:30px;
    }
</style>
</head>

<body>

<div class="container">
<div class="jumbotron">
  <h1>W3School Demo</h1> 
  <p>Resize this responsive page!</p> 
</div>
</div>

<div class="container">
<div class="row">
  <div class="col-md-5">
    <h2>London</h2>
    <p>London is the capital city of England.</p>
    <p>It is the most populous city in the United Kingdom,
    with a metropolitan area of over 13 million inhabitants.</p>
  </div>
  <div class="col-md-4">
    <h2>Paris</h2>
    <p>Paris is the capital and most populous city of France.</p>
  </div>
  <div class="col-md-4">
    <h2>Tokyo</h2>
    <p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
    and the most populous metropolitan area in the world.</p>
  </div>
</div>
</div>

</body>
</html>

script 脚本：用于定义客户端脚本，比如 JavaScript。

必需的 type 属性规定脚本的 MIME 类型。

<html>
<body>

<script type="text/javascript">
	document.write("<h1>Hello World!</h1>")
</script> 

</body>
</html>

html的头部元素

title

<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>

<body>

<h3>标题</h3>
<p>段落</p>

<div class="test" style="color:green">
  <h3>div内部的标题</h3>
  <p>div内部的段落</p>
</div>

<p>
	<span>
		some text.
	</span>
	some other text.
</p>

</body>
</html>