点进HTML初步了解

写在前边

++##关于插件++

①简体中文

②open-in-browser:自动在浏览器生成html页面;

③Auto Rename Tag:自动匹配标签;

④Live server:实现页面的实时刷新;并且可以将生成的网页的url随机生成,而不是自己的盘符;

++##关于快捷键:++

Ctrl + '/' 用来注释一个代码段;

注释性质的语言可以用 <!-- 和 --> 框住;

++##HTML文件结构:++

html页面的固定结构在VS code中输入**!+ TAB或者! + 回车** 就可以得到。

①<!DOCTYPE html>表示文档类型,浏览器将按照html5来解析网页文件。

②<html lang="en"> </html>表示HTML的文档起止位置,浏览器与搜索引擎解析将按照lang属性

声明的语言来解析。

③meta标签的charset属性用于声明网页字符集的编码方式。 <meta charset="UTF-8">

++##HTML语法++

标记是HTML文档中一些有特定意义的符号,这些符号指明内容的含义或结构;

元素:HTML中标记和标记之间的内容组合;

元素有++行内元素、块状元素、行内块元素++ 三种;【利用CSS中的display属性可以相互转换】

行内元素:不可设置行高、上下内外边距;

块级元素:独占一行,可以设置宽高、内外边距;

行内块元素:可以设置宽高、内外边距;可以与其他行内元素、内联元素共处一行;

常见标记

结构标记:html、head、body、section、article、aside、hgroup、header、footer、nav;

【section元素表示页面的一个内容区块,比如章节、页眉页脚、或页面其他部分】

【article元素表示页面一块和上下文不相关的独立文章,例如本博客文章】

【aside元素表示++article元素的内容以外的++】

【header元素表示页面中的一个内容区域或整个页面的标题】

【hgroup元素表示整个页面或页面中一个内容区块的标题进行组合】

【footer元素表示整个页面或页面中一个内容区块的脚注】

【nav元素表示页面中导航链接的部分】

头部标记:title、meta、link、stytle

文本标记:strong、em

段落及标题标记:p、h1-h6、br

列表标记:ul、ol、li、dl、dt、dd

超链接标记:a、map、area

图像及媒体元素标记:img、embed、object

表格标记:table、tr、td、thead、tbody、tfoot

表单标记:form、input、textarea、select、option、label

容器标记:div、span

video:定义视频

autio:定义音频

<br>用于换行;

<hr/>水平分界线;

文本格式标记

常用的字符实体:

空格--&nbsp; 全角空格--&emsp; <小于号--&lt >大于号--gt "引号--quot

&符号--&amp

<pre>:预格式标记

列表标记

无序列表<ul> 其列表项<li> 列表项可以是图片or文字;

有序列表<ol> 其列表项<li>

自定义列表<dl> 列表项<dt> 列表项的描述<dd>

超链接标记【行内元素】

<a>标签定义超链接;

++href 属性++: 规定链接的目的地;

<a href="跳转的目标位置">文字或者图片</a>

跳转的目的地有:

①外部网站,即,<a href="http://www/w3school.com.cn/">学习网站</a>

②本网站的另外一个页面,同一📂下有front.html和rear.html网页,在front.html点击文字"前端与后端",跳转到rear.html,即,

<a href="rear.html">前端与后端</a>

③跳转特定位置,即

<article id="top">...</article>

<p><a href="#top">返回顶部</a></p>

④虚拟超链接,即,

<a href="#">学习网站</a>

学习网站字样下会有下划线,但是点击无跳转;


超链接属性target
  • _self:当前浏览上下文。(默认)
  • _blank:通常是一个新选项卡,但用户可以将浏览器配置为打开新窗口。
  • _parent:当前浏览上下文的父浏览上下文。如果没有父级,则行为为 _self
  • _top:最顶层的浏览上下文(作为当前上下文的祖先的"最高"上下文)。如果没有上级,则行为为_self
超链接属性title

title属性是全局属性,鼠标移在超链接上的时候显示的一段文字提示。

图像

<img src="图片位置+文件名+扩展名" alt="替换文字"/>

//替换文字是图片无法显示的时候显示的文字

title属性是全局属性,鼠标移在图像上显示的一段文字提示;

align属性是对齐属性;

width、height是宽和高属性;

表格

表格table由标题caption、表头thead、表体tbody、表尾tfoot构成;

表格按照行 tr 存储; 表格单元格分为++表头单元格++ th 和++数据单元格++ td;

默认表头单元格加粗显示;

border属性

表格默认无边框,若显示边框,可用border;

colspan属性和rowspan属性

colspan合并列,横向合并;

rowspan合并行,纵向合并;

表单

<form name="表单名称" method="get|post" action="后续处理页面">

表单元素

</form>

method属性:发送表单数据的方法,取值get用于安全性要求较低,传输数据较少的情况;

取值post用于安全要求较高,传输数据较多的情况;

action属性:向何处发送表单,处理表单数据的后端页面;

表单元素
文本框&密码框

<input type="text|password" name="名称" value="内容" placeholder="输入提示"/>

//type属性:取值是"text"时为文本框,取值是"password"是密码框;

//value属性:文本框中的文本;

//placeholder属性:用于显示在文本框中的输入提示;

提交按钮&重置按钮

<input type="submit|reset" name= "名称" value="内部文本"/>

//sunmit-提交按钮;reset-重置按钮;

value属性:按钮中的文字;

单选框& 复选框

<input type="radio|checkbox" name="名称" value="值" checked="checked"/>

//radio-单选框 checkbox-复选框

//name:一组单选框的name属性需要取值相同;

//value:按钮内的文字;

//checked:当设置为"chec

ked"时,该选项默认为选中状态;

标签

标签 label 通常包裹 input 元素,当用户在 label 元素内单击文本,被包裹的表单 元素会被触发单击事件。设置 label 的 for 属性为对应单选框的 id 属性,不仅可以单击单选框标识选择该选项,还可以单击文字"男/女"来选择单选框;

html 复制代码
<form>
性别:
<label for="boy">男
       <input type="radio" id="boy" name="gender" checked="checked"/>
</label>
<label for="girl">女
       <input type="radio" id="girl" name="gender"/> 
</label>
</form>
下拉列表

select标签用于生成下拉列表,option标签用于生成列表项;

html 复制代码
<form>    
    <select>
        <option>北京</option>
        <option selected="selected">上海</option>
    </select>
</form>
按钮

可以用button标签生成一个按钮,其内容可以是文本或图像,而 input 元素创建的按钮内容只能是文本。

<button><img src="baidu.png"></button>

文本域

<textarea cols="50" rows="10">文本域中的内容</textarea>

相关推荐
顾菁寒13 小时前
WEB第二次作业
前端·css·html
Qhumaing13 小时前
html第一个网页
网络·html·html5
前端Hardy18 小时前
HTML&CSS:爱上班的猫咪
前端·javascript·css·vue.js·html
细心的莽夫19 小时前
JavaWeb学习笔记
java·开发语言·笔记·学习·java-ee·web
前端Hardy21 小时前
超萌!HTML&CSS:打造趣味动画卡通 dog
前端·css·html·css3
Komorebi⁼21 小时前
JavaScript的对象事件监听处理,交互式网页的关键!
开发语言·前端·javascript·css·html
kali-Myon1 天前
NewStarCTF2024-Week5-Web&Misc-WP
前端·python·学习·mysql·web安全·php·web
布兰妮甜1 天前
HTML5:网页开发的新纪元
前端·html·html5
想要成为祖国的花朵1 天前
Web前端_HTML5(新增type类型)
前端·html·html5
羊小猪~~1 天前
前端入门一之HTML知识讲解
前端·javascript·css·前端框架·html·html5