前端与HTML-CFANZ编程社区

一，什么是前端

1.解决人机交互问题

2.跨终端

3.web技术栈

HTML（结构）
css（表现）
JavaScript（行为）

二，什么是html?
html是超文本标记语言,是用来描述web文档的一种标记语言,使用HTML，将所需要表达的信息按某种规则写成HTML文件，通过专用的浏览器来识别，并将这些HTML文件“翻译”成可以识别的信息，即现在所见到的网页。
三，HTML的语法

Screenshot_20220116_131120_com.ss.android.lark.png

四，HTML的主体结构。

` <!DOCTYPE html> 
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
</head>
<body>    
</body>
</html> `

注：其中DOCTYPE是告诉浏览器，当前当前的文本是HTML5。是HTML的开头和结尾标签，lang="en"表示语言是英文，也可以lang="zh"中文，也可以不写，不影响。
head是HTML的头部标签，里面可以写标题以及编码等，body则是HTML的主体内容。

Screenshot_20220116_131035_com.ss.android.lark.png
四，HTML的常用标签。

1.标题标签
从h1~h6,大小不同，例如：
<h1> h1</h1>

Screenshot_20220116_131552_com.ss.android.lark_ed.jpg

2.列表标签

有序列表

` <ol>
        <li>阿凡达</li>
        <li>泰坦尼克号</li>
        <li>复仇者</li>
    </ol>  `

无序列表

` <ul>
        <li>阿凡达</li>
        <li>泰坦尼克号</li>
        <li>复仇者</li>
    </ul>  `

自定义列表（dt是标题，dd是内容）

` <dl>
    <dt>代言人</dt>
    <dd>阿牛</dd>
    <dt>日期</dt>
    <dd>2001-07-06</dd>
</dl>  `

Screenshot_20220116_131626_com.ss.android.lark.jpg

3.链接

`  <a href="https://www.baidu.com">百度</a> <!--默认在当前窗口打开链接-->
<a href="https://www.baidu.com" target="_blank">百度</a> <!--默认在新窗口打开链接-->  `

target属性还有_top,_self,_parent等

4.多媒体标签

`  <img src="./123.png" alt="截图" width="400">

<audio src="./半生雪_是七叔呢.mp3" controls></audio>

<video src="./video.mp4" controls></video>  `

Screenshot_20220116_132054_com.ss.android.lark_ed.jpg
他们都是单标签，src属性放多媒体文件的网址，controls属性：播放器是否显示控制栏。该属性是布尔属性，不用赋值，只要写上属性名，就表示打开。如果不想使用浏览器默认的播放器，而想使用自定义播放器，就不要使用该属性。

5.输入标签
(1).input标签

`<input  placeholder="请输入name">
<input  type="range">
<input type="number" min ="1",max="10" >
<input type="date">
<textarea name="" id="" cols="30" rows="10">1223</textarea>`

(2).多选框

   `<p>
        <label><input type="checkbox"></label>
        <label><input type="checkbox" checked></label>
    </p>   `

(3).单选框

   `  <p>
        <label><input type="radio" name="sport"></label>
        <label><input type="radio" name="sport"></label>
    </p> `

注：是name在控制，给name相同属性值，只能选一个，不能去掉，去掉后会变成多选

(4).下拉框

    `  <p>
        <select name="" id="">
            <option value="">1</option>
            <option value="">2</option>
            <option value="">3</option>
        </select>
    </p> `

6.文本标签

 p标签：行标签
 
 em和strong:都是强调标签，em注重语气，strong注重内容
 
 code:引入代码的标签
 
 还有一些引用标签，像cite,q标签等

Screenshot_20220116_160126_com.ss.android.lark_ed.jpg

7.其他标签

div和span：div和span都是容器，没有什么意义，div常用来布局，div是块标签，span是行内标签

nav：导航栏标签

Screenshot_20220116_133954_com.ss.android.lark_ed.jpg

···