前端开发笔记html基础

Posted 2022-12-11 lxq_xsyu

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端开发笔记html基础相关的知识，希望对你有一定的参考价值。

html介绍

HTML是HyperTextMarkupLanguage超文本标记语言的缩写
HTML是标记语意的语言

编辑器

任何纯文本编辑器都能够编辑html，比如记事本，editplus,notepad++
比较有名的专门制作网页工具有：DreamWeaver (Adobe公司的产品，过时了，不是一个好的代码编辑器）
Sublime （高效率的程序书写工具）
WebStorm （更高级的项目级别编程工具）

文档头声明

任何一个标准的HTML页面，第一行一定是一个以我们现在学习的是HTML4.01这个版本，这个版本是IE6开始兼容的。HTML5是IE9开始兼容的，但是IE 6,7,8这些浏览器还不能过早被淘汰，所以这几年网页还是该用HTML4.0.1来制作，移动端可以使用HTML5了。

4.01两大规范

HTML4.01里面有两大种规范，每大种规范里面又各有3种小规范。所以一共6种规范。
HTML4.01里面规定了普通,XHTML两大种规范。
HTML 觉得自己有一些规定不严谨，比如，标签是否可以用大写字母呢？
所以，HTML就觉得，把一些规范严格的标准又制订了一个XHTML1.0。在XHTML中的字母X表示”严格的“
HTML4.01规定了三种文档类型：Strict, Transitional以及Frameset.
所以HTML第一行有6种写法。

大规范	里面的小规范
HTML4.01	Strict Transitional Frameset
HTML1.0	Strict Transitional Frameset

strict表示严格，这种模式要求比较严格，比如<u>标签

<u>让文本加上下划线，和html的本质含义有冲突，html只负责语义（文档结构）</u>

transitional表示普通的
frameset框架的页面

我们学习的就是XHTML1.0中的transitional版本，因为我们的页面中偶尔要使用一些类似u这种标签HTML5中极大的简化了DTD,也就是HTML5中没有XHTML了

Sublime生成框架的快捷键

html:xt

按Tab键生成下面代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
</head>
<body>

</body>
</html>

常用头部设置

<title>定义标签的标题

定义浏览器工具栏中的标题
提供页面被添加到收藏夹时显示的标题
显示在搜索引擎结果中的页面标题

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

<body>
The content of the document......
</body>

</html>

<base>元素

<base>为页面的规定地址或默认target

<head>
<base href="http://blog.csdn.net/dawanganban" />
<base target="_blank" />
</head>

<style>元素

<head>
<style type="text/css">
body background-color:yellow
p color:blue
</style>
</head>

<meta> 元素

定义页面描述

<meta name="description" content="前端开发笔记" />

定义页面关键词

<meta name="keywords" content="HTML, CSS, XML" />

<script>元素

    <script type="text/javascript">
        function fun()
            alert("ok");
        
    </script>

标签	描述
<head>	定义关于文档的信息
<title>	定义文档标题
<base>	定义页面上所有链接的默认地址或者默认目标
<link>	定义文档与外部资源之间的关系
<meta>	定义关于HTML文档的元数据
<script>	定义客户端脚本
<style>	定义文档的样式信息

常用标签

html的标签语法特征

1.html对换行不敏感。
2.html中文之间所有空格、换行、Tab都被折叠为一个空格显示。
3.html标签要严格封闭。

列表

有序列表<ol>

<ol>
    <li>item1</li>
    <li>item2</li>
</ol>

显示效果：

item1
item2

无序列表<ul>

<ul>
    <li>item1</li>
    <li>item2</li>
</ul>

显示效果：

item1
item2

自定义列表<dl>

<dl>
    <dt>北京</dt>
    <dd>国家首都，政治文化中心</dd>
    <dd>天安门在北京的</dd>
    <dd>八达岭长城在北京</dd>
    <dt>上海</dt>
    <dd>有外滩，东方明珠塔</dd>
    <dd>黄浦江在上海</dd>
</dl>

一个<dt>可以配很多<dd>使用非常灵活，一个dt可以有很多描述dd.
显示效果：

北京

国家首都，政治文化中心

天安门在北京的

八达岭长城在北京

上海

有外滩，东方明珠塔

黄浦江在上海

<div>和<span>

div在浏览器中，默认是不会增加任何的效果改变的，但是语义变了，div中的所有元素是一个小区域。
div标签是一个容器级标签，里面什么都能放，甚至可以放div自己
span也是表达”小区域，小跨度“的标签，但是是一个”文本级“的标签，也就是说span里面不能放p, h, ul, dl, ol, div
span里面是放置小元素的，div里面放置大东西的
所以，我们亲切的称呼这种模式叫做”div+css”, div标签负责布局，负责结构，负责分块。css负责样式。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style type="text/css">
        .outdiv
            width:200px;
            height:200px;
            background-color:green;
        

        .innerdiv
            width:100px;
            height:100px;
            background-color:blue;
        
    </style>
</head>
<body>
    <div class="outdiv">
        <div class="innerdiv">

        </div>
    </div>
</body>
</html>

表单

表单就是收集用户信息的，就是让用户填写，选择的

<form action="form_action.asp" method="get">
  <p>账号: <input type="text" name="uname" /></p>
  <p>密码: <input type="text" name="upwd" /></p>
  <input type="submit" value="Submit" />
</form>

input标记

文本输入框:

<input type="text" name="username" value="缺省值"/><!--必须加name-->

提交按钮：

<input type="submit" value="确认"/>

密码输入框：

<input type="password" name="pwd"/> <!--必须加name-->

单选：

<input type="radio" name="gender" value="m"/><!--必须加name和value-->

多选：

<!--同一组name必须相同-->
<input type="checkbox" name="interest" value="fishing"/>

重置：

<input type="reset" value="取消"/>

普通按钮：

<input type="button" value="点我吧"/>

上传文件：

<input type="file" name="file1"/>

隐藏域：

<input type="hidden" name="userId" value="123">

非input标记

下拉列表：

<select name="city" multiple="multiple">
<option value="bj">北京</option>
<option value="wh">武汉</option>
<option value="nj">南京</option>
</select>
<!--加上mutiple属性就成为多选了-->

多行文本输入框：

<textarea name="desc" cols="" rows=""></textarea>

html废弃的标签

以下这些标签并不是表面页面结构的，所以不建议使用

  <font size="9" color="red">haha</font>
  <b>加粗</b>
  <u>下划线</u>
  <i>倾斜</i>
  <del>删除线</del>
  <hr/><!-- 水平线 -->
  <br/><!-- 不另起一个段落换行，一般换行都是另起段落，所以用p代替 -->

以上是关于前端开发笔记html基础的主要内容，如果未能解决你的问题，请参考以下文章

2021年 Web 前端入门学习路线，(附：前端基础学习笔记)

前端基础（HTML，CSS，JavaScript）知识笔记，附：前端基础面试题！！