HTML基础

一、web前端标准

1、html结构标准：负责网页结构的搭建

2、css样式标准：负责网页美化工作

3、行为标准：负责网页行为动作

二、html定义

1、定义：

超文本标记语言

2、语法规定

<>：标签（标记）符号

/：关闭符号，又称反斜杠

#html语言必须写在标签符号里面

#html中的标签大多数都是成对出现

3、一个html页面

<!DOCTYPE html> 
<!--描述当前文件的版本信息，如果没有4.0或者x1.0那就是html5版本-->
<html>
<!--html文件-->
    <head>
    <!--网页的头部-->
        <meta charset="UTF-8">
        <!--utf-8是国际编码的意思-->
        <title>哈哈哈</title>
        <!--此处内容是网页的标题-->
    </head>
    <body>
        呵呵呵呵呵呵
        <!--所有自己写的html代码都在body标签中-->
    </body>
</html>

三、h和p标签

1、h共有h1~h6六个标签，代表文章标题

2、p代表文章段落

<!DOCTYPE html> 
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <h1>我是1级标题</h1>
        <h2>我是2级标题</h2>
        <h3>我是3级标题</h3>
        <h4>我是4级标题</h4>
        <h5>我是5级标题</h5>
        <h6>我是6级标题</h6>
        <p>我是文章段落</p>
    </body>
</html>

 四、bui和它的小伙伴

1、b：加粗

2、strong：加粗，但具有强调语义

3、u：下划线

4、i：倾斜

5、em：倾斜，但具有强调语义

6、s：删除线

7、del：删除线，建议使用del代替s

8、<br />：换行符，是单标签

<!DOCTYPE html> 
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    <b>b标签代表加粗</b>
    <br /> <!--换行符号-->
    <strong>也代表加粗，但具有强调语义</strong>
    <!--strong代表特别强调，一篇文章中一般不要出现多次-->
    <br />
    <u>u标签代表下划线</u>
    <br />
    <i>i标签代表倾斜</i>
    <br />
    <em>也代表倾斜，但具有强调语义</em>
    <!--em代表一般强调，一篇文章中可以出现多次-->
    <br />
    <s>s标签代表删除线，这种写法逐渐被淘汰</s>
    <br />
    <del>也代表删除线，这种写法是主流</del>
    </body>
</html>

五、img标签

1、（单标签）格式：<img src="图片名字" width="宽度" height="高度" alt="1.图片未加载出来时的提示文字2.网页阅读器可以朗读这里的文字" title="鼠标悬停时候的提示文字"/>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        原始图片<br>
        <img src="1.jpg"/><br><!--1.jpg文件和本文件是同一个目录的，因此可以直接使用-->
        设置了宽高的图<br>
        <img src="1.jpg" width="500" height="500"/><br>
        等比例缩放：宽或高设置其中一个，另外一个不设置就会自动等比例缩放了<br>
        <img src="1.jpg" width="500"/><br>
        有提示文本的：鼠标悬停有提示文字<br>
        <img src="1.jpg" title="我是在图片上悬停才能看到的文字"/><br>
        图片没有加载出来的时候显示的文字：网络等原因图片没加载出来就显示alt属性中设置的文字<br>
        <img src="1.jpg" alt="加载中..."/><!--可以把图片名字故意写错测试alt属性-->
    </body>
</html>

六、超链接

1、格式：<a href="地址">文字</a>

2、锚点链接：点击之后可以跳转到页面对应位置。方法：给跳转到的位置写一个id属性（锚点），a标签中的href属性写#+id的值即可

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <a href="http://www.baidu.com">跳转到百度官网</a><br />
        <!--跳转到在线网址-->
        <a href="new1.html">跳转到本地new1.html网页</a><br />
        <!--跳转到本地文件。new1.html和本文件在一个目录，因此可以使用相对路径-->
        <a href="http://www.baidu.com" target="_blank">在新窗口打开百度官网</a><br />
        <!--target="_blank"可以设置新窗口打开-->
        <a href="###">暂时不知道写什么地址必须用3个#代表空地址</a><br />
        <p>有思念你的人在的地方，就是你的归处。</p>
        <p>有思念你的人在的地方，就是你的归处。</p>
        <p>有思念你的人在的地方，就是你的归处。</p>
        <p id="point">【我是锚点】有思念你的人在的地方，就是你的归处。</p>
        <p>有思念你的人在的地方，就是你的归处。</p>
        <p>有思念你的人在的地方，就是你的归处。</p>
        <p>有思念你的人在的地方，就是你的归处。</p>
        <p>有思念你的人在的地方，就是你的归处。</p>
        <p>有思念你的人在的地方，就是你的归处。</p>
        <p>有思念你的人在的地方，就是你的归处。</p>
        <p>有思念你的人在的地方，就是你的归处。</p>
        <p>有思念你的人在的地方，就是你的归处。</p>
        <p>有思念你的人在的地方，就是你的归处。</p>
        <p>有思念你的人在的地方，就是你的归处。</p>
        <p>有思念你的人在的地方，就是你的归处。</p>
        <p>有思念你的人在的地方，就是你的归处。</p>
        <p>有思念你的人在的地方，就是你的归处。</p>
        <p>有思念你的人在的地方，就是你的归处。</p>
        <p>有思念你的人在的地方，就是你的归处。</p>
        <p>有思念你的人在的地方，就是你的归处。</p>
        <p>有思念你的人在的地方，就是你的归处。</p>
        <p>有思念你的人在的地方，就是你的归处。</p>
        <p>有思念你的人在的地方，就是你的归处。</p>
        <p>有思念你的人在的地方，就是你的归处。</p>
        <p>有思念你的人在的地方，就是你的归处。</p>
        <p>有思念你的人在的地方，就是你的归处。</p>
        <p>有思念你的人在的地方，就是你的归处。</p>
        <p>有思念你的人在的地方，就是你的归处。</p>
        <p>有思念你的人在的地方，就是你的归处。</p>
        <p>有思念你的人在的地方，就是你的归处。</p>
        <p>有思念你的人在的地方，就是你的归处。</p>
        <p>有思念你的人在的地方，就是你的归处。</p>
        <p>有思念你的人在的地方，就是你的归处。</p>
        <p>有思念你的人在的地方，就是你的归处。</p>
        <p>有思念你的人在的地方，就是你的归处。</p>
        <p>有思念你的人在的地方，就是你的归处。</p>
        <p>有思念你的人在的地方，就是你的归处。</p>
        <p>有思念你的人在的地方，就是你的归处。</p>
        <p>有思念你的人在的地方，就是你的归处。</p>
        <p>有思念你的人在的地方，就是你的归处。</p>
        <a href="#point">跳转到锚点位置</a>
    </body>
</html>

 

 七、表单

1、form标签：<form action ="" method=""></form>

     所有用户输入的内容都要放到form标签中

     action：代表数据给哪个后台程序，可省略

     method：代表传输过程中使用哪种形式：post（加密）、get（不加密）

2、input标签：<input type="" name="" id="" placeholder=""/>

     input代表输入框标签（单标签）

     type代表输入框的类型：type="text"表示普通输入框（明文），type="password"表示密码输入框（密文）

     name代表这个输入框名字，可省略

     id代表输入框的id编号，可省略

     placeholder代表文本框中默认的提示文字（置灰显示），placeholder是html5才有的属性，IE 10以前的浏览器不支持，可省略

3、单选按钮

     格式：<input type="radio" name="" checked="checked" />文字描述

     type="radio"代表单选按钮

     如果有多个input标签并列，但是需要只能选其中一个按钮就要给多个input标签加相同的name值才行

     checked="checked"代表将这个按钮设置为默认选中状态

4、下拉框

4.1、格式：

<select name="">
　　<option></option>
</select>

4.2、所有内容放到select标签内，option标签内是备选项：

4.3、如果要给备选项设置分组，在option标签外面加上<optgroup label="">，label属性为提示文字：

4.4、如果要设置默认选项，则需要给对应的option标签添加selected属性，例如这里设置<option selected="selected">华南</option>和<option selected="selected">宝山区</option>默认会选择华南、深圳宝山区

5、文本域

格式：<textarea></textarea>

textarea中并不能用rows、cols设置行、列。因为这里的10行22列在不同浏览器大小是不同的，会出现兼容性问题，必须使用css样式中的width、height属性设置宽、高为多少像素(px)才可以

6、多选框

格式：<input type="checkbox" />

和单选框一样支持checked="checked"默认选中状态

7、按钮

6.1、提交

格式：<input type="submit" value="" />  #必须设置value属性，否则不同浏览器有兼容性问题

功能：submit类型表示将表单中输入的数据提交到from标签的action中设置的后台程序

6.2、重置：

格式：<input type="reset" value="" />  #必须设置value属性，否则不同浏览器有兼容性问题

功能：reset类型表示将页面恢复刚打开时的状态

6.3、普通按钮：

格式：<input type="button" value="" />或者<button></button>  #value属性可以不设置

8、用户体验

打开网页后想让光标停留到第一个输入框中，好让用户直接打字输入内容，不用再用鼠标点击选中。可以给输入框设置autofocus="autofocus"，例如下面给输入昵称那里设置这个属性：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <form action="" method="post">
            昵称：<input type="text" name="" id="" placeholder="请输入用户名" autofocus="autofocus" /><br>
            密码：<input type="password" /><br>
            性别：<input type="radio" name="xb" checked="checked" />男 <input type="radio" name="xb" />女 <input type="radio" name="xb" />保密<br>
            地址：
            <select name="">
                <option>华北</option>
                <option selected="selected">华南</option>
            </select>
            <select name="">
                <optgroup label="北京">
                    <option>朝阳</option>
                    <option>顺义</option>
                <optgroup label="深圳">
                    <option>罗湖区</option>
                    <option selected="selected">宝山区</option>
            </select><br>
            <!--在实际使用时，textarea中并不能用rows、cols设置行、列。因为这里的10行22列在不同浏览器大小是不同的，会出现兼容性问题，必须使用css样式中的width、height属性设置宽、高为多少像素(px)才可以-->
            备注：<textarea rows="10" cols="22" placeholder="请输入"></textarea><br>
            职业：<input type="checkbox" checked="checked" />法师 <input type="checkbox" />战士 <input type="checkbox" />格斗士<br>
            <input type="submit" value="提交" />
            <!--submit类型表示将表单中输入的数据提交到from标签的action中设置的后台程序-->
            <input type="reset" value="重置" />
            <!--reset类型表示将页面恢复刚打开时的状态-->
            <input type="button" value="普通按钮1" />
            <!--button类型表示普通按钮-->
            <button>普通按钮2</button>
            <!--普通按钮的另一种写法-->
        </form>
    </body>
</html>

 

posted on 2021-03-11 00:36  vorn  阅读(111)  评论(0)    收藏  举报

导航